@ui5/webcomponents 2.5.0 → 2.6.0-rc.1

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,16 @@
+import type Text from "./Text.js";
+
+export default function TextTemplate(this: Text) {
+	return <>
+		<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>
+	</>;
+}

package/src/TimePickerClockTemplate.tsx

@@ -0,0 +1,82 @@
+import type TimePickerClock from "./TimePickerClock.js";
+
+export default function TimePickerClockTemplate(this: TimePickerClock) {
+	return (
+		<div
+			id={`${this._id}`}
+			onDragStart={this.noop}
+			onDrop={this.noop}
+			aria-hidden="true"
+			class={{
+				"ui5-tp-clock": true,
+				"ui5-tp-clock-inner": this.showInnerCircle,
+				"ui5-tp-clock-active": this.active,
+			}}
+		>
+
+			<div data-label={this.label} class="ui5-tp-clock-dial"></div>
+
+			<div>
+				{this._items.map((item, i) => (
+					<div class="ui5-tp-clock-item" style={{ transform: `translate(-50%) rotate(${(i + 1) * 6}deg` }}>
+						{
+							item.item &&
+						<>
+							<span class="ui5-tp-clock-dot"></span>
+							<span id={`${this._id}-${item.item}`}
+								class="ui5-tp-clock-number"
+								style={{ transform: `rotate(-${(i + 1) * 6}deg)` }}
+							>
+								{item.item}
+							</span>
+							{
+								item.innerItem &&
+									<span
+										id={`${this._id}-${item.innerItem}`}
+										class="ui5-tp-clock-number"
+										style={{ transform: `rotate(-${(i + 1) * 6}deg)` }}
+									>
+										{item.innerItem}
+									</span>
+							}
+						</>
+						}
+
+						{ !item.item && !this.hideFractions
+						&& <span class="ui5-tp-clock-mid-dot"></span>
+						}
+					</div>
+				))}
+
+				{this._selectedItem.showMarker &&
+				<div
+					class="ui5-tp-clock-item ui5-tp-clock-item-with-marker"
+					style={{ transform: `translate(-50%) rotate(${this._selectedItem.angle || 0}deg)` }}
+				>
+					<div class="ui5-tp-clock-marker"></div>
+					<div
+						class={this._selectedItem.itemClasses}
+						style={{ transform: `rotate(-${this._selectedItem.angle || 0}deg)` }}
+					>{this._selectedItem.item}</div>
+
+					<div id={`${this._id}-selected`}
+						class={this._selectedItem.innerItemClasses}
+						style={{ transform: `rotate(-${this._selectedItem.angle || 0}deg)` }}
+					>{this._selectedItem.innerItem}</div>
+				</div>
+				}
+			</div>
+
+			<div
+				class="ui5-tp-clock-cover"
+				onTouchStart={this._onTouchStart}
+				onTouchMove={this._onTouchMove}
+				onTouchEnd={this._onTouchEnd}
+				onMouseDown={this._onTouchStart}
+				onMouseMove={this._onTouchMove}
+				onMouseUp={this._onTouchEnd}
+				onMouseOut={this._onMouseOut}
+				ref={this._captureClockRef.bind(this)}
+			></div>
+		</div>);
+}

package/src/TimePickerPopoverTemplate.tsx

@@ -0,0 +1,73 @@
+import type TimePicker from "./TimePicker.js";
+import Button from "./Button.js";
+import Popover from "./Popover.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import TimeSelectionClocks from "./TimeSelectionClocks.js";
+import TimeSelectionInputs from "./TimeSelectionInputs.js";
+
+export default function TimePickerPopoverTemplate(this: TimePicker) {
+	return (
+		<>
+			<ResponsivePopover
+				id={`${this._id}-responsive-popover`}
+				class="ui5-time-picker-popover"
+				placement="Bottom"
+				horizontalAlign="Start"
+				opener={this}
+				open={this.open}
+				allowTargetOverlap={true}
+				_hideHeader={true}
+				hideArrow={true}
+				accessibleName={this.pickerAccessibleName}
+				onClose={this.onResponsivePopoverAfterClose}
+				onOpen={this.onResponsivePopoverAfterOpen}
+				onWheel={this._handleWheel}
+				onKeyDown={this._onkeydown}
+			>
+				<TimeSelectionClocks
+					id={`${this._id}-time-sel`}
+					value={this._timeSelectionValue}
+					formatPattern={this._formatPattern}
+					onChange={this.onTimeSelectionChange}
+					onClosePicker={this.submitPickers}
+				/>
+
+				<div slot="footer" class="ui5-time-picker-footer">
+					<Button id="submit" design="Emphasized" onClick={this.submitPickers}>{this.submitButtonLabel}</Button>
+					<Button id="close" design="Transparent" onClick={this._togglePicker}>{this.cancelButtonLabel}</Button>
+				</div>
+			</ResponsivePopover>
+
+			{this._isMobileDevice &&
+				<Popover
+					id={`${this._id}-popover`}
+					class="ui5-time-picker-inputs-popover"
+					placement="Bottom"
+					horizontalAlign="Start"
+					allow-target-overlap
+					_hide-header
+					hide-arrow
+					onOpen={this.onInputsPopoverAfterOpen}
+					onClose={this.onInputsPopoverAfterClose}
+					onWheel={this._handleWheel}
+					onKeyDown={this._onkeydown}
+				>
+					<div class="popover-content">
+						<TimeSelectionInputs
+							id={`${this._id}-time-sel-inputs`}
+							value={this._timeSelectionValue}
+							formatPattern={this._formatPattern}
+							onChange={this.onTimeSelectionChange}
+							onCloseInputs={this.submitInputsPopover}
+						/>
+					</div>
+
+					<div slot="footer" class="ui5-time-picker-footer">
+						<Button id="submitInputs" design="Emphasized" onClick={this.submitInputsPopover}>{this.submitButtonLabel}</Button>
+						<Button id="closeInputs" design="Transparent" onClick={this.closeInputsPopover}>{this.cancelButtonLabel}</Button>
+					</div>
+				</Popover>
+			}
+		</>
+	);
+}

package/src/TimePickerTemplate.tsx

@@ -0,0 +1,54 @@
+import type TimePicker from "./TimePicker.js";
+import Icon from "./Icon.js";
+import Input from "./Input.js";
+import TimePickerPopoverTemplate from "./TimePickerPopoverTemplate.js";
+
+export default function TimePickerTemplate(this: TimePicker) {
+	return (
+		<>
+			<div id={this._id} class="ui5-time-picker-root">
+				<Input
+					data-sap-focus-ref
+					id={`${this._id}-inner`}
+					class="ui5-time-picker-input"
+					value={this.value}
+					placeholder={this._placeholder}
+					disabled={this.disabled}
+					readonly={this.readonly}
+					required={this.required}
+					valueState={this.valueState}
+					_inputAccInfo={this.accInfo}
+					onClick={this._handleInputClick}
+					onChange={this._handleInputChange}
+					onInput={this._handleInputLiveChange}
+					onFocusIn={this._onfocusin}
+					onKeyDown={this._onkeydown}
+				>
+					{this.valueStateMessage.length > 0 &&
+						<slot
+							name="valueStateMessage"
+							slot="valueStateMessage"
+						></slot>
+					}
+
+					{!this.readonly &&
+						<Icon
+							slot="icon"
+							name={this.openIconName}
+							tabindex={-1}
+							showTooltip={true}
+							onClick={this._togglePicker}
+							class={{
+								"ui5-time-picker-input-icon-button": true,
+								"inputIcon": true,
+								"inputIcon--pressed": this.open,
+							}}
+						/>
+					}
+				</Input>
+			</div>
+
+			{ TimePickerPopoverTemplate.call(this) }
+		</>
+	);
+}

package/src/TimeSelectionClocksTemplate.tsx

@@ -0,0 +1,78 @@
+import type TimeSelectionClocks from "./TimeSelectionClocks.js";
+import ToggleSpinButton from "./ToggleSpinButton.js";
+import SegmentedButton from "./SegmentedButton.js";
+import SegmentedButtonItem from "./SegmentedButtonItem.js";
+import TimePickerClock from "./TimePickerClock.js";
+
+export default function TimeSelectionClocksTemplate(this: TimeSelectionClocks) {
+	return (
+		<div
+			id={`${this._id}`}
+			class="ui5-time-picker-tsc-container"
+			tabindex={-1}
+			onKeyDown={this._onkeydown}
+			onKeyUp={this._onkeyup}
+			onFocusIn={this._clocksFocusIn}
+		>
+			<div class="ui5-time-picker-tsc-buttons">
+				{this._entities.map(entity =>
+					<>
+						{ entity.hasSeparator && <span class="ui5-time-selection-separator">:</span> }
+						<ToggleSpinButton
+							id={`${this._id}_button_${entity.entity}`}
+							data-ui5-clock={entity.entity}
+							valueMin={entity.attributes && entity.attributes.min}
+							valueMax={entity.attributes && entity.attributes.max}
+							valueNow={entity.value}
+							valueText={entity.textValue}
+							accessibleName={entity.label}
+							pressed={entity.active}
+							onFocusIn={this._buttonFocusIn}
+						>{entity.stringValue}</ToggleSpinButton>
+					</>
+				)}
+
+				{this._periods.length > 0 &&
+					<>
+						<span class="ui5-time-selection-separator"></span>
+						<SegmentedButton
+							id={`${this._id}_AmPm`}
+							onClick={this._periodChange}
+							onFocusIn={this._amPmFocusIn}
+							onFocusOut={this._amPmFocusOut}
+						>
+							{this._periods.map(period =>
+								<SegmentedButtonItem selected={period.selected}>{period.label}</SegmentedButtonItem>
+							)}
+						</SegmentedButton>
+					</>
+				}
+			</div>
+
+			<div
+				class="ui5-time-picker-tsc-clocks"
+				role="img"
+				aria-label={this.clockDialAriaLabel}
+			>
+				{this._entities.map(entity =>
+					<TimePickerClock
+						id={`${this._id}_clock_${entity.entity}`}
+						data-ui5-clock={entity.entity}
+						active={entity.active}
+						label={entity.label}
+						itemMin={entity.itemMin}
+						itemMax={entity.itemMax}
+						selectedValue={entity.value}
+						displayStep={entity.displayStep}
+						valueStep={entity.attributes && entity.attributes.step}
+						lastItemReplacement={entity.lastItemReplacement}
+						showInnerCircle={entity.showInnerCircle}
+						prependZero={entity.prependZero}
+						onChange={this._clockChange}
+					>
+					</TimePickerClock>
+				)}
+			</div>
+		</div>
+	);
+}