@ui5/webcomponents 0.0.0-037d08c67

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/DynamicDateRangeInputTemplate.tsx

@@ -0,0 +1,33 @@
+import type DynamicDateRange from "./DynamicDateRange.js";
+import Icon from "./Icon.js";
+import Input from "./Input.js";
+import appointment from "@ui5/webcomponents-icons/dist/appointment-2.js";
+
+export default function DynamicDateRangeInputTemplate(this: DynamicDateRange) {
+	return (
+		<div class="ui5-dynamic-date-range-root">
+			<Input
+				data-sap-focus-ref
+				id={`${this._id}-inner`}
+				class="ui5-dynamic-date-range-input"
+				value={this.value && this.getOption(this.value?.operator)?.format(this.value)}
+				onChange={this.onInputChange}
+				onKeyDown={this.onInputKeyDown}
+			>
+				<Icon
+					id={`${this._id}-value-help`}
+					slot="icon"
+					name={appointment}
+					tabindex={-1}
+					mode={this._iconMode}
+					onClick={this._togglePicker}
+					class={{
+						"inputIcon": true,
+						"inputIcon--pressed": this.open,
+					}}
+				/>
+
+			</Input>
+		</div>
+	);
+}

package/src/DynamicDateRangePopoverTemplate.tsx

@@ -0,0 +1,78 @@
+import type DynamicDateRange from "./DynamicDateRange.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import List from "./List.js";
+import ListItemStandard from "./ListItemStandard.js";
+import Button from "./Button.js";
+import Title from "./Title.js";
+import slimArrowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import ListItemType from "./types/ListItemType.js";
+
+export default function DynamicDateRangePopoverTemplate(this: DynamicDateRange) {
+	return (
+		<ResponsivePopover
+			id={`${this._id}-responsive-popover`}
+			opener={this}
+			open={this.open}
+			allowTargetOverlap
+			placement="Bottom"
+			horizontalAlign="Start"
+			hideArrow={true}
+			_hideHeader={true}
+			onClose={this.onPopoverClose}
+			onBeforeOpen={this.onPopoverBeforeOpen}
+			onKeyDown={this.onKeyDownPopover}
+			accessibleName={this.popoverAccessibleName}
+		>
+			{this._hasCurrentOptionTemplate &&
+				<div slot="header" class="ui5-ddr-header">
+					<Button
+						iconOnly={true}
+						icon={slimArrowLeft}
+						design="Transparent"
+						onClick={this.onButtonBackClick}
+						tooltip={this.tooltipNavigationIcon}>
+					</Button>
+					<Title>{this._currentOption?.text}</Title>
+				</div>
+			}
+			{!this._hasCurrentOptionTemplate ? <div class="ui5-dynamic-date-range-options">
+				<List
+					class="ui5-dynamic-date-range-options-list"
+					separators="None"
+					selectionMode="Single"
+					onItemClick={this._selectOption}
+				>
+					{this.optionsObjects.map(option => (
+						<ListItemStandard
+							selected={option.operator === this.value?.operator}
+							iconEnd={true}
+							icon={option.icon}
+							wrappingType="Normal"
+							type={option.template ? ListItemType.Navigation : ListItemType.Active}
+						>
+							{option.text}
+						</ListItemStandard>
+					))}
+				</List>
+			</div>
+				:
+				<div class="ui5-dynamic-date-range-option-container">
+					{this._currentOption?.template?.call(this)}
+					<div class="ui5-ddr-current-value">{this.currentValueText}</div>
+				</div>
+			}
+			{this._hasCurrentOptionTemplate &&
+				<div slot="footer">
+					<Button
+						design="Emphasized"
+						onClick={this._submitValue}
+					>Submit</Button>
+					<Button
+						design="Transparent"
+						onClick={this._close}
+					>Close</Button>
+				</div>
+			}
+		</ResponsivePopover>
+	);
+}

package/src/DynamicDateRangeTemplate.tsx

@@ -0,0 +1,11 @@
+import DynamicDateRangeInputTemplate from "./DynamicDateRangeInputTemplate.js";
+import DynamicDateRangePopoverTemplate from "./DynamicDateRangePopoverTemplate.js";
+
+import type DynamicDateRange from "./DynamicDateRange.js";
+
+export default function DynamicDateRangeTemplate(this: DynamicDateRange) {
+	return [
+		DynamicDateRangeInputTemplate.call(this),
+		DynamicDateRangePopoverTemplate.call(this),
+	];
+}

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,45 @@
+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._formWidth}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,103 @@
+import Icon from "./Icon.js";
+import browseIcon from "@ui5/webcomponents-icons/dist/browse-folder.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import Tokenizer from "./Tokenizer.js";
+import Token from "./Token.js";
+import type FileUploader from "./FileUploader.js";
+import FileUploaderPopoverTemplate from "./FileUploaderPopoverTemplate.js";
+
+export default function FileUploaderTemplate(this: FileUploader) {
+	return (
+		<>
+			<div
+				class="ui5-file-uploader-root"
+				onFocusIn={this._onfocusin}
+				onFocusOut={this._onfocusout}
+				onKeyDown={this._onkeydown}
+				onKeyUp={this._onkeyup}
+				onClick={this._onclick}
+				onMouseDown={this._onmousedown}
+				onDragOver={this._ondrag}
+				onDrop={this._ondrop}
+			>
+				<div class="ui5-file-uploader-form">
+					<input
+						type="file"
+						class="ui5-file-uploader-native-input"
+						name={this.name}
+						multiple={this.multiple}
+						accept={this.accept}
+						disabled={this.disabled}
+						title={this.inputTitle}
+						aria-roledescription={this.accInfo.ariaRoledescription}
+						aria-haspopup={this.accInfo.ariaHasPopup}
+						aria-label={this.accInfo.ariaLabel}
+						aria-description={this.accInfo.ariaDescription}
+						aria-required={this.accInfo.ariaRequired}
+						aria-invalid={this.accInfo.ariaInvalid}
+						onClick={this._onNativeInputClick}
+						onChange={this._onChange}
+						data-sap-focus-ref
+					/>
+				</div>
+
+				{this.hideInput ? (
+					<slot></slot>
+				) : (
+					<div class="ui5-file-uploader-display-container">
+						<div class="ui5-file-uploader-display-elements">
+							{this._selectedFilesNames.length > 0 ? (
+								<>
+									<Tokenizer
+										class="ui5-file-uploader-tokenizer"
+										expanded={this._tokenizerExpanded}
+										open={this._tokenizerOpen}
+										popoverMinWidth={this._formWidth}
+										onClick={this._onTokenizerClick}
+										onMouseDown={this._onTokenizerMouseDown}
+										onKeyDown={this._onTokenizerKeyDown}
+										onKeyUp={this._onTokenizerKeyUp}
+										preventInitialFocus
+										readonly
+									>
+										{this._selectedFilesNames.map(fileName => (
+											<Token
+												text={fileName}
+											/>
+										))}
+									</Tokenizer>
+									<Icon
+										name={decline}
+										class="ui5-file-uploader-clear-icon inputIcon"
+										onClick={this._onClearIconClick}
+										title={this.clearIconTitle}
+									/>
+								</>
+							) : (
+								<input
+									class="ui5-file-uploader-display-input"
+									tabindex={-1}
+									aria-hidden="true"
+									title={this.inputTitle}
+									placeholder={this.resolvedPlaceholder}
+									inner-input
+									readonly
+								/>
+							)}
+
+							<Icon
+								name={browseIcon}
+								class="ui5-file-uploader-value-help-icon inputIcon"
+								title={this.valueHelpTitle}
+							/>
+						</div>
+
+						<slot></slot>
+					</div>
+				)}
+			</div>
+
+			{ FileUploaderPopoverTemplate.call(this) }
+		</>
+	);
+}

package/src/FormItemTemplate.tsx

@@ -0,0 +1,42 @@
+import type { SlottedChild } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type FormItem from "./FormItem.js";
+
+export default function FormItemTemplate(this: FormItem) {
+	return (
+		<div class="ui5-form-item-root">
+			<div class="ui5-form-item-layout" part="layout">
+				{ this.accessibleMode === "Edit" ? content.call(this) : contentAsDefinitionList.call(this) }
+			</div>
+		</div>
+	);
+}
+
+function content(this: FormItem) {
+	return <>
+		<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>
+	</>;
+}
+
+function contentAsDefinitionList(this: FormItem) {
+	return <>
+		<dt class="ui5-form-item-label" part="label">
+			<slot name="labelContent"></slot>
+		</dt>
+		<dd 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>
+			)}
+		</dd>
+	</>;
+}

package/src/FormTemplate.tsx

@@ -0,0 +1,92 @@
+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>
+			}
+
+			{ this.hasGroupItems ? groupedItemsLayout.call(this) : standaloneItemsLayout.call(this) }
+		</div>
+	);
+}
+
+function groupedItemsLayout(this: Form) {
+	return <div class="ui5-form-layout" part="layout">
+		{ 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={groupItemInfo.role}
+					aria-labelledby={groupItemInfo.accessibleNameRef}
+					aria-label={groupItemInfo.accessibleName}
+				>
+					{ groupItem.headerText &&
+						<div class="ui5-form-group-heading">
+							<Title id={`${groupItem._id}-group-header-text`} level={groupItem.headerLevel} size="H6">{groupItem.headerText}</Title>
+						</div>
+					}
+					{ this.accessibleMode === "Edit" ?
+						<div class="ui5-form-group-layout">
+							<slot name={groupItem._individualSlot}></slot>
+						</div>
+						:
+						<dl class="ui5-form-group-layout" aria-labelledby={groupItemInfo.accessibleNameRefInner} aria-label={groupItemInfo.accessibleNameInner}>
+							<slot name={groupItem._individualSlot}></slot>
+						</dl>
+					}
+				</div>
+			</div>;
+		})}
+	</div>;
+}
+
+function standaloneItemsLayout(this: Form) {
+	return (
+		this.accessibleMode === "Edit" ?
+			<div class="ui5-form-layout" part="layout">
+				{ standaloneItemsLayoutContent.call(this) }
+			</div>
+			:
+			<dl class="ui5-form-layout" part="layout">
+				{ standaloneItemsLayoutContent.call(this) }
+			</dl>
+	);
+}
+
+function standaloneItemsLayoutContent(this: Form) {
+	return 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>
+		);
+	});
+}

package/src/IconTemplate.tsx

@@ -0,0 +1,43 @@
+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">
+				{ content.call(this) }
+			</g>
+		</svg>
+	);
+}
+
+function content(this: Icon) {
+	if (this.customTemplate) {
+		return this.customTemplate;
+	}
+
+	if (this.customTemplateAsString) {
+		return <g dangerouslySetInnerHTML={{ __html: this.customTemplateAsString }}></g>;
+	}
+
+	return this.pathData.map(path => (
+		<path d={path}></path>
+	));
+}

package/src/InputPopoverTemplate.tsx

@@ -0,0 +1,68 @@
+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 PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.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, mobileHeader?: (this: Input) => JsxTemplateResult }) {
+	const suggestionsList = hooks?.suggestionsList;
+	const mobileHeader = hooks?.mobileHeader;
+
+	return (
+		<>
+			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, {
+				suggestionsList,
+				mobileHeader,
+				valueStateMessage,
+				valueStateMessageInputIcon
+			})}
+
+			{this.hasValueStateMessage && (
+				<Popover
+					preventInitialFocus={true}
+					preventFocusRestore={true}
+					hideArrow={true}
+					class="ui5-valuestatemessage-popover"
+					placement="Bottom"
+					tabindex={-1}
+					horizontalAlign={PopoverHorizontalAlign.Start}
+					opener={this}
+					open={this.valueStateOpen}
+					onClose={this._handleValueStatePopoverAfterClose}
+				>
+					<div slot="header" class={this.classes.popoverValueState}>
+						<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] : "";
+}