@ui5/webcomponents 0.0.0-e7dd012d7 → 0.0.0-ebd9a4db3

package/src/DialogTemplate.tsx

@@ -0,0 +1,70 @@
+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,58 @@
+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}
+				>
+					{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,47 @@
+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,76 @@
+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-label={this.effectiveAccessibleName}
+			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={this.headerLevel}>{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={groupItem.headerLevel} size="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>
+	);
+}

package/src/InputPopoverTemplate.tsx

@@ -0,0 +1,61 @@
+import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js";
+import type Input from "./Input.js";
+import Icon from "./Icon.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 Popover from "./Popover.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+
+export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult }) {
+	const suggestionsList = hooks?.suggestionsList;
+
+	return (
+		<>
+			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, { suggestionsList, valueStateMessage, valueStateMessageInputIcon }) }
+
+			{this.hasValueStateMessage &&
+				<Popover
+					preventInitialFocus={true}
+					preventFocusRestore={true}
+					hideArrow={true}
+					class="ui5-valuestatemessage-popover"
+					placement="Bottom"
+					tabindex={-1}
+					horizontalAlign={this._valueStatePopoverHorizontalAlign}
+					opener={this}
+					open={this.valueStateOpen}
+					onClose={this._handleValueStatePopoverAfterClose}
+				>
+					<div slot="header" class={this.classes.popoverValueState} style={this.styles.popoverHeader}>
+						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)} />
+						{ this.valueStateOpen && valueStateMessage.call(this) }
+					</div>
+				</Popover>
+			}
+		</>
+	);
+}
+
+function valueStateMessage(this: Input) {
+	return (
+		<>
+			{
+				this.shouldDisplayDefaultValueStateMessage ? this.valueStateText : <slot name="valueStateMessage"></slot>
+			}
+		</>
+	);
+}
+
+function valueStateMessageInputIcon(this: Input) {
+	const iconPerValueState = {
+		Negative: error,
+		Critical: alert,
+		Positive: sysEnter2,
+		Information: information,
+	};
+
+	return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+}

package/src/InputTemplate.tsx

@@ -0,0 +1,124 @@
+import type Input from "./Input.js";
+import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js";
+import Icon from "./Icon.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import InputPopoverTemplate from "./InputPopoverTemplate.js";
+
+type TemplateHook = () => JsxTemplateResult;
+
+export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook, suggestionsList?: TemplateHook }) {
+	const suggestionsList = hooks?.suggestionsList;
+	const preContent = hooks?.preContent || defaultPreContent;
+	const postContent = hooks?.postContent || defaultPostContent;
+
+	return (
+		<>
+			<div
+				class="ui5-input-root ui5-input-focusable-element"
+				part="root"
+				onFocusIn={this._onfocusin}
+				onFocusOut={this._onfocusout}
+			>
+				<div class="ui5-input-content">
+					{ preContent.call(this) }
+
+					<input
+						id="inner"
+						part="input"
+						class="ui5-input-inner"
+						style={this.styles.innerInput}
+						type={this.inputNativeType}
+						inner-input
+						inner-input-with-icon={this.icon.length}
+						disabled={this.disabled}
+						readonly={this._readonly}
+						value={this._innerValue}
+						placeholder={this._placeholder}
+						maxlength={this.maxlength}
+						role={this.accInfo.role}
+						enterkeyhint={this.hint}
+						aria-controls={this.accInfo.ariaControls}
+						aria-invalid={this.accInfo.ariaInvalid}
+						aria-haspopup={this.accInfo.ariaHasPopup}
+						aria-describedby={this.accInfo.ariaDescribedBy}
+						aria-roledescription={this.accInfo.ariaRoledescription}
+						aria-autocomplete={this.accInfo.ariaAutoComplete}
+						aria-expanded={this.accInfo.ariaExpanded}
+						aria-label={this.accInfo.ariaLabel}
+						aria-required={this.required}
+						autocomplete="off"
+						data-sap-focus-ref
+						step={this.nativeInputAttributes.step}
+						min={this.nativeInputAttributes.min}
+						max={this.nativeInputAttributes.max}
+						onInput={this._handleNativeInput}
+						onChange={this._handleChange}
+						onSelect={this._handleSelect}
+						onKeyDown={this._onkeydown}
+						onKeyUp={this._onkeyup}
+						onClick={this._click}
+						onFocusIn={this.innerFocusIn}
+					/>
+
+					{this._effectiveShowClearIcon &&
+						<div
+							tabindex={-1}
+							class="ui5-input-clear-icon-wrapper inputIcon"
+							part="clear-icon-wrapper"
+							onClick={this._clear}
+							onMouseDown={this._iconMouseDown}
+						>
+							<Icon
+								part="clear-icon"
+								class="ui5-input-clear-icon"
+								name={decline}
+								tabindex={-1}
+								accessibleName={this.clearIconAccessibleName}>
+							</Icon>
+						</div>
+					}
+
+					{this.icon.length > 0 &&
+						<div class="ui5-input-icon-root"
+							tabindex={-1}
+						>
+							<slot name="icon"></slot>
+						</div>
+					}
+
+					<div class="ui5-input-value-state-icon">
+						{this._valueStateInputIcon}
+					</div>
+
+					{ postContent.call(this) }
+
+					{this._effectiveShowSuggestions &&
+						<>
+							<span id="suggestionsText" class="ui5-hidden-text">{this.suggestionsText}</span>
+							<span id="selectionText" class="ui5-hidden-text" aria-live="polite" role="status"></span>
+							<span id="suggestionsCount" class="ui5-hidden-text" aria-live="polite">{this.availableSuggestionsCount}</span>
+						</>
+					}
+
+					{this.accInfo.ariaDescription &&
+						<span id="descr" class="ui5-hidden-text">{this.accInfo.ariaDescription}</span>
+					}
+
+					{this.accInfo.accessibleDescription &&
+						<span id="accessibleDescription" class="ui5-hidden-text">{this.accInfo.accessibleDescription}</span>
+					}
+
+					{this.hasValueState &&
+						<span id="valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
+					}
+				</div>
+			</div>
+
+			{ InputPopoverTemplate.call(this, { suggestionsList }) }
+		</>
+	);
+}
+
+function defaultPreContent() {}
+
+function defaultPostContent() {}

package/src/LabelTemplate.tsx

@@ -0,0 +1,20 @@
+import type Label from "./Label.js";
+
+export default function LabelTemplate(this: Label) {
+	return (
+		<label
+			class="ui5-label-root"
+			onClick={this._onclick}
+		>
+			<span class="ui5-label-text-wrapper">
+				<slot></slot>
+			</span>
+			<span
+				aria-hidden="true"
+				class="ui5-label-required-colon"
+				data-ui5-colon={this._colonSymbol}
+			>
+			</span>
+		</label>
+	);
+}

package/src/LinkTemplate.tsx

@@ -0,0 +1,51 @@
+import type Link from "./Link.js";
+import Icon from "./Icon.js";
+
+export default function LinkTemplate(this: Link) {
+	return (
+		<a
+			part="root"
+			class="ui5-link-root"
+			role={this.effectiveAccRole}
+			href={this.parsedRef}
+			target={this.target}
+			rel={this._rel}
+			tabindex={this.effectiveTabIndex}
+			title={this.tooltip}
+			aria-disabled={this.disabled}
+			aria-label={this.ariaLabelText}
+			aria-haspopup={this._hasPopup}
+			aria-expanded={this.accessibilityAttributes.expanded}
+			aria-current={this.accessibilityAttributes.current}
+			aria-description={this.ariaDescriptionText}
+			onClick={this._onclick}
+			onKeyDown={this._onkeydown}
+			onKeyUp={this._onkeyup}
+		>
+			{this.icon &&
+			<Icon
+				class="ui5-link-icon"
+				name={this.icon}
+				mode="Decorative"
+				part="icon">
+			</Icon>
+			}
+
+			<span class="ui5-link-text">
+				<slot></slot>
+			</span>
+
+			{ this.hasLinkType &&
+			<span class="ui5-hidden-text">{this.linkTypeText}</span>
+			}
+
+			{this.endIcon &&
+			<Icon
+				class="ui5-link-end-icon"
+				name={this.endIcon}
+				mode="Decorative"
+				part="endIcon"
+			/>
+			}
+		</a>);
+}

package/src/ListBoxItemGroupTemplate.tsx

@@ -0,0 +1,33 @@
+import type ListItemGroup from "./ListItemGroup.js";
+import ListItemGroupHeader from "./ListItemGroupHeader.js";
+import DropIndicator from "./DropIndicator.js";
+import ListItemAccessibleRole from "./types/ListItemAccessibleRole.js";
+
+export default function ListItemGroupTemplate(this: ListItemGroup, hooks?: { items: () => void }) {
+	const items = hooks?.items || defaultItems;
+
+	return (
+		<ul
+			role="group"
+			class="ui5-group-li-root"
+			onDragEnter={this._ondragenter}
+			onDragOver={this._ondragover}
+			onDrop={this._ondrop}
+			onDragLeave={this._ondragleave}
+		>
+			{this.hasHeader &&
+				<ListItemGroupHeader focused={this.focused} part="header" accessibleRole={ListItemAccessibleRole.Group}>
+					{ this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
+				</ListItemGroupHeader>
+			}
+
+			{ items.call(this) }
+
+			<DropIndicator orientation="Horizontal" ownerReference={this}/>
+		</ul>
+	);
+}
+
+function defaultItems(this: ListItemGroup) {
+	return <slot></slot>;
+}