@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/src/InputTemplate.tsx

@@ -6,8 +6,9 @@ import InputPopoverTemplate from "./InputPopoverTemplate.js";
 
 type TemplateHook = () => JsxTemplateResult;
 
-export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook, suggestionsList?: TemplateHook }) {
+export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook, suggestionsList?: TemplateHook, mobileHeader?: TemplateHook }) {
 	const suggestionsList = hooks?.suggestionsList;
+	const mobileHeader = hooks?.mobileHeader;
 	const preContent = hooks?.preContent || defaultPreContent;
 	const postContent = hooks?.postContent || defaultPostContent;
 
@@ -29,10 +30,11 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						style={this.styles.innerInput}
 						type={this.inputNativeType}
 						inner-input
-						inner-input-with-icon={!!this.icon.length}
+						inner-input-with-icon={this.iconsCount > 0}
 						disabled={this.disabled}
 						readonly={this._readonly}
-						value={this._innerValue}
+						value={this.value}
+						required={this.required}
 						placeholder={this._placeholder}
 						maxlength={this.maxlength}
 						role={this.accInfo.role}
@@ -118,7 +120,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 				</div>
 			</div>
 
-			{ InputPopoverTemplate.call(this, { suggestionsList }) }
+			{ InputPopoverTemplate.call(this, { suggestionsList, mobileHeader }) }
 		</>
 	);
 }

package/src/ListBoxItemGroupTemplate.tsx

@@ -16,7 +16,7 @@ export default function ListItemGroupTemplate(this: ListItemGroup, hooks?: { ite
 			onDragLeave={this._ondragleave}
 		>
 			{this.hasHeader &&
-				<ListItemGroupHeader focused={this.focused} part="header" accessibleRole={ListItemAccessibleRole.Group}>
+				<ListItemGroupHeader focused={this.focused} part="header" accessibleRole={ListItemAccessibleRole.Group} wrappingType={this.getGroupHeaderWrapping()} >
 					{ this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
 				</ListItemGroupHeader>
 			}

package/src/ListItemBaseTemplate.tsx

@@ -1,7 +1,7 @@
 import type ListItemBase from "./ListItemBase.js";
-import type { AriaRole } from "@ui5/webcomponents-base/";
+import type { AriaRole, JsxTemplate } from "@ui5/webcomponents-base/";
 
-export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listItemContent: () => void }, injectedProps?: {
+export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listItemContent: JsxTemplate }, injectedProps?: {
 	role?: AriaRole,
 	title?: string,
 }) {
@@ -21,7 +21,7 @@ export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listI
 			onKeyDown={this._onkeydown}
 			onClick={this._onclick}
 		>
-			{ listItemContent.call(this) }
+			{ listItemContent.call(this) as JSX.Element }
 		</li>
 	);
 }

package/src/ListItemGroupTemplate.tsx

@@ -7,8 +7,14 @@ export default function ListItemGroupTemplate(this: ListItemGroup) {
 	return (
 		<>
 			{this.hasHeader &&
-				<ListItemGroupHeader wrappingType={this.wrappingType} focused={this.focused} part="header" accessibleRole={ListItemAccessibleRole.ListItem}>
-					{ this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
+				<ListItemGroupHeader
+					wrappingType={this.wrappingType}
+					focused={this.focused}
+					part="header"
+					exportparts="title"
+					accessibleRole={ListItemAccessibleRole.ListItem}
+				>
+					{this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText}
 					<div
 						role="list"
 						slot="subItems"
@@ -26,7 +32,7 @@ export default function ListItemGroupTemplate(this: ListItemGroup) {
 
 				<slot></slot>
 
-				<DropIndicator orientation="Horizontal" ownerReference={this}/>
+				<DropIndicator orientation="Horizontal" ownerReference={this} />
 			</div>
 		</>
 

package/src/ListItemTemplate.tsx

@@ -53,7 +53,7 @@ export default function ListItemTemplate(this: ListItem, hooks?: Partial<ListIte
 		aria-haspopup={this._accInfo.ariaHaspopup}
 		aria-posinset={this._accInfo.posinset}
 		aria-setsize={this._accInfo.setsize}
-		aria-describedby={`${this._id}-invisibleText-describedby`}
+		aria-describedby={this._accInfo.ariaDescribedBy}
 		aria-labelledby={this._accessibleNameRef}
 		aria-disabled={this._ariaDisabled}
 		aria-selected={this._accInfo.ariaSelected}
@@ -154,8 +154,6 @@ function selectionElement(this: ListItem) {
 						) : (
 							<Button
 								part="delete-button"
-								tabindex={-1}
-								data-sap-no-tab-ref
 								id={`${this._id}-deleteSelectionElement`}
 								design="Transparent"
 								icon={declineIcon}

package/src/ListTemplate.tsx

@@ -29,9 +29,7 @@ export default function ListTemplate(this: List) {
 				active={this.showBusyIndicatorOverlay}
 				class="ui5-list-busy-indicator"
 			>
-
-				<div class="ui5-list-scroll-container">
-					<span tabindex={-1} aria-hidden="true" class="ui5-list-start-marker"></span>
+				<div class="ui5-list-container">
 
 					{this.header.length > 0 && <slot name="header" />}
 
@@ -41,41 +39,44 @@ export default function ListTemplate(this: List) {
 						</header>
 					}
 
-					{this.hasData &&
-						<div id={`${this._id}-before`} tabindex={0} role="none" class="ui5-list-focusarea"></div>
-					}
+					<div class="ui5-list-scroll-container">
+						<span tabindex={-1} aria-hidden="true" class="ui5-list-start-marker"></span>
 
-					<span id={`${this._id}-modeLabel`} class="ui5-hidden-text">{this.ariaLabelModeText}</span>
+						{this.hasData &&
+							<div id={`${this._id}-before`} tabindex={0} role="none" class="ui5-list-focusarea"></div>
+						}
 
-					<ul id={`${this._id}-listUl`}
-						class="ui5-list-ul"
-						role={this.listAccessibleRole}
-						aria-label={this.ariaLabelTxt}
-						aria-labelledby={this.ariaLabelledBy}
-						aria-description={this.ariaDescriptionText}
-					>
-						<slot></slot>
+						<span id={`${this._id}-modeLabel`} class="ui5-hidden-text">{this.ariaLabelModeText}</span>
 
-						{this.showNoDataText &&
-							<li tabindex={0} id={`${this._id}-nodata`} class="ui5-list-nodata" role="listitem">
-								<div id={`${this._id}-nodata-text`} class="ui5-list-nodata-text">
-									{this.noDataText}
-								</div>
-							</li>
-						}
-					</ul>
+						<ul id={`${this._id}-listUl`}
+							class="ui5-list-ul"
+							role={this.listAccessibleRole}
+							aria-label={this.ariaLabelTxt}
+							aria-labelledby={this.ariaLabelledBy}
+							aria-description={this.ariaDescriptionText || undefined}
+						>
+							<slot></slot>
 
-					{ this.growsWithButton && moreRow.call(this) }
+							{this.showNoDataText &&
+								<li tabindex={0} id={`${this._id}-nodata`} class="ui5-list-nodata" role="listitem">
+									<div id={`${this._id}-nodata-text`} class="ui5-list-nodata-text">
+										{this.noDataText}
+									</div>
+								</li>
+							}
+						</ul>
 
-					{this.footerText &&
-						<footer id={`${this._id}-footer`} class="ui5-list-footer">{this.footerText}</footer>
-					}
+						{ this.growsWithButton && moreRow.call(this) }
 
-					{this.hasData &&
-						<div id={`${this._id}-after`} tabindex={0} role="none" class="ui5-list-focusarea"></div>
-					}
+						{this.footerText &&
+							<footer id={`${this._id}-footer`} class="ui5-list-footer">{this.footerText}</footer>
+						}
 
-					<span tabindex={-1} aria-hidden="true" class="ui5-list-end-marker"></span>
+						{this.hasData &&
+							<div id={`${this._id}-after`} tabindex={0} role="none" class="ui5-list-focusarea"></div>
+						}
+						<span tabindex={-1} aria-hidden="true" class="ui5-list-end-marker"></span>
+					</div>
 				</div>
 				<DropIndicator orientation="Horizontal" ownerReference={this}/>
 			</BusyIndicator>

package/src/MenuItemTemplate.tsx

@@ -1,24 +1,40 @@
+import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
 import type MenuItem from "./MenuItem.js";
+import PopoverPlacement from "./types/PopoverPlacement.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Button from "./Button.js";
 import List from "./List.js";
 import BusyIndicator from "./BusyIndicator.js";
 import navBackIcon from "@ui5/webcomponents-icons/dist/nav-back.js";
-import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
 import checkIcon from "@ui5/webcomponents-icons/dist/accept.js";
 import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import Icon from "./Icon.js";
 import ListItemTemplate from "./ListItemTemplate.js";
 import type { ListItemHooks } from "./ListItemTemplate.js";
 
-const predefinedHooks: Partial<ListItemHooks> = {
-	listItemContent,
+export type MenuItemHooks = ListItemHooks & {
+	menuItemTextContent: JsxTemplate;
+}
+
+const predefinedHooks: Partial<MenuItemHooks> = {
 	iconBegin,
+	menuItemTextContent,
 };
 
-export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<ListItemHooks>) {
+export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<MenuItemHooks>) {
 	const currentHooks = { ...predefinedHooks, ...hooks };
 
+	if (!hooks?.listItemContent) {
+		currentHooks.listItemContent = function listItemContent(this: MenuItem) {
+			return (<>
+				{currentHooks.menuItemTextContent!.call(this)}
+
+				{rightContent.call(this)}
+				{checkmarkContent.call(this)}
+			</>);
+		};
+	}
+
 	return <>
 		{ListItemTemplate.call(this, currentHooks)}
 
@@ -26,13 +42,8 @@ export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<ListIte
 	</>;
 }
 
-function listItemContent(this: MenuItem) {
-	return (<>
-		{this.text && <div class="ui5-menu-item-text">{this.text}</div>}
-
-		{rightContent.call(this)}
-		{checkmarkContent.call(this)}
-	</>);
+function menuItemTextContent(this: MenuItem) {
+	return <>{this.text && <div class="ui5-menu-item-text">{this.text}</div>}</>;
 }
 
 function checkmarkContent(this: MenuItem) {
@@ -59,7 +70,15 @@ function rightContent(this: MenuItem) {
 			</div>
 		);
 	case this.hasEndContent:
-		return <slot name="endContent" onKeyDown={this._endContentKeyDown}></slot>;
+		return (
+			<div
+				class="ui5-menu-item-end-content"
+				role="group"
+				aria-label={this.endContentAccessibleName}
+			>
+				<slot name="endContent" onKeyDown={this._endContentKeyDown}></slot>
+			</div>
+		);
 	case !!this.additionalText:
 		return (
 			<span
@@ -91,7 +110,7 @@ function listItemPostContent(this: MenuItem) {
 		preventFocusRestore={true}
 		hideArrow={true}
 		allowTargetOverlap={true}
-		placement={this.placement}
+		placement={PopoverPlacement.End}
 		verticalAlign="Top"
 		accessibleName={this.accessibleNameText}
 		onBeforeOpen={this._beforePopoverOpen}
@@ -115,18 +134,16 @@ function listItemPostContent(this: MenuItem) {
 								{this.text}
 							</div>
 						</div>
-						<Button
-							icon={declineIcon}
-							design="Transparent"
-							aria-label={this.labelClose}
-							onClick={this._closeAll}
-						/>
 					</div >
 				</>
 			)
 		}
 
-		<div id={`${this._id}-menu-main`}>
+		<div
+			id={`${this._id}-menu-main`}
+			class={this.loading ? "menu-busy-indicator-main" : ""}
+			aria-busy={this.loading}
+		>
 			{
 				this.items.length ? (
 					<List
@@ -153,5 +170,18 @@ function listItemPostContent(this: MenuItem) {
 				/>
 			}
 		</div >
+
+		{
+			this.isPhone && (
+				<div slot="footer" class="ui5-menu-dialog-footer">
+					<Button
+						design="Transparent"
+						onClick={this._closeAll}
+					>
+						{this.labelCancel}
+					</Button>
+				</div>
+			)
+		}
 	</ResponsivePopover>;
 }

package/src/MenuTemplate.tsx

@@ -3,7 +3,6 @@ import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
 import BusyIndicator from "./BusyIndicator.js";
 import Button from "./Button.js";
-import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
 
 export default function MenuTemplate(this: Menu) {
 	return (
@@ -31,16 +30,11 @@ export default function MenuTemplate(this: Menu) {
 							{this.headerText}
 						</h1>
 					</div>
-					<Button
-						icon={declineIcon}
-						design="Transparent"
-						aria-label={this.labelClose}
-						onClick={this._close}
-					/>
 				</div>
 			}
 			<div
 				id={`${this._id}-menu-main`}
+				class={this.loading ? "ui5-menu-busy-indicator-main" : ""}
 			>
 				{this.items.length ?
 					(<List
@@ -68,6 +62,16 @@ export default function MenuTemplate(this: Menu) {
 					)
 				}
 			</div>
+			{this.isPhone &&
+				<div slot="footer" class="ui5-menu-dialog-footer">
+					<Button
+						design="Transparent"
+						onClick={this._close}
+					>
+						{this.labelCancel}
+					</Button>
+				</div>
+			}
 		</ResponsivePopover >
 	);
 }

package/src/MultiComboBoxPopoverTemplate.tsx

@@ -7,8 +7,11 @@ import ToggleButton from "./ToggleButton.js";
 import SuggestionItem from "./SuggestionItem.js";
 import Icon from "./Icon.js";
 import List from "./List.js";
+import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import Popover from "./Popover.js";
 import CheckBox from "./CheckBox.js";
+import Title from "./Title.js";
+import BusyIndicator from "./BusyIndicator.js";
 
 export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 	return (<>
@@ -30,10 +33,20 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 			open={this.open}
 			opener={this}
 		>
-			{this._isPhone && <>
+			{this.loading &&
+				<BusyIndicator active={true} class="ui5-multi-combobox-busy"/>
+			}
+
+			{!this.loading && this._isPhone && <>
 				<div slot="header" class="ui5-responsive-popover-header" style={this.styles.popoverHeader}>
 					<div class="row">
-						<span>{this._headerTitleText}</span>
+						<Title
+							level="H1"
+							wrappingType="None"
+							class="ui5-responsive-popover-header-text"
+						>
+							{this._headerTitleText}
+						</Title>
 					</div>
 					<div class="row">
 						<Input
@@ -54,6 +67,7 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 							icon={multiSelectAll}
 							design="Transparent"
 							pressed={this._showAllItemsButtonPressed}
+							disabled={this._getSelectedItems().length === 0}
 							onClick={this.filterSelectedItems}
 							accessibleName={this._showSelectedButtonAccessibleNameText}
 						></ToggleButton>
@@ -68,7 +82,7 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 				{selectAllWrapper.call(this)}
 			</>}
 
-			{!this._isPhone && <>
+			{!this.loading && !this._isPhone && <>
 				{this.hasValueStateMessage &&
 					<div slot="header" onKeyDown={this._onListHeaderKeydown} class={this.classes.responsivePopoverHeaderValueState} style={this.styles.popoverValueStateMessage}>
 						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
@@ -79,11 +93,11 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 				{selectAllWrapper.call(this)}
 			</>}
 
-			{this.filterSelected ?
+			{!this.loading && this.filterSelected ?
 				<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox">
 					{this.selectedItems.map(item => <slot name={item._individualSlot}></slot>)}
 				</List>
-				:
+				: !this.loading &&
 				<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox" onKeyDown={this._onItemKeydown}>
 					{this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
 				</List>
@@ -114,7 +128,7 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 				hideArrow={true}
 				class="ui5-valuestatemessage-popover"
 				placement="Bottom"
-				horizontalAlign={this._valueStatePopoverHorizontalAlign}
+				horizontalAlign={PopoverHorizontalAlign.Start}
 				tabIndex={-1}
 				open={this.valueStateOpen}
 				opener={this}

package/src/MultiComboBoxTemplate.tsx

@@ -65,6 +65,7 @@ export default function MultiComboBoxTemplate(this: MultiComboBox) {
 				id="ui5-multi-combobox-input"
 				value={this.value}
 				inner-input
+				inner-input-with-icon={this._effectiveShowClearIcon || !!this.icon || !this.readonly}
 				placeholder={this._getPlaceholder}
 				disabled={this.disabled}
 				readonly={this.readonly}

package/src/MultiInputTemplate.tsx

@@ -1,12 +1,23 @@
 import Icon from "./Icon.js";
+import multiSelectAll from "@ui5/webcomponents-icons/dist/multiselect-all.js";
 import InputTemplate from "./InputTemplate.js";
 import type MultiInput from "./MultiInput.js";
+import type { MultiInputTokenDeleteEventDetail } from "./MultiInput.js";
 import Tokenizer from "./Tokenizer.js";
+import ToggleButton from "./ToggleButton.js";
+import List from "./List.js";
+import ListItemStandard from "./ListItemStandard.js";
+import ListAccessibleRole from "./types/ListAccessibleRole.js";
 import valueHelp from "@ui5/webcomponents-icons/dist/value-help.js";
 
 export default function MultiInputTemplate(this: MultiInput) {
 	return [
-		InputTemplate.call(this, { preContent, postContent }),
+		InputTemplate.call(this, {
+			preContent,
+			postContent,
+			suggestionsList: multiInputSuggestionsList,
+			mobileHeader: multiInputMobileHeader,
+		}),
 	];
 }
 
@@ -22,6 +33,7 @@ function preContent(this: MultiInput) {
 				class="ui5-multi-input-tokenizer"
 				opener={this.morePopoverOpener}
 				popoverMinWidth={this._inputWidth}
+				popoverTitle={this._headerTitleText}
 				hidePopoverArrow={true}
 				expanded={this.tokenizerExpanded}
 				onKeyDown={this._onTokenizerKeydown}
@@ -51,3 +63,68 @@ function postContent(this: MultiInput) {
 		</>
 	);
 }
+
+function multiInputSuggestionsList(this: MultiInput) {
+	if (this._effectiveShowTokensInSuggestions) {
+		return (
+			<List
+				class="ui5-tokenizer-list"
+				accessibleRole={ListAccessibleRole.ListBox}
+				separators={this.suggestionSeparators}
+				selectionMode="Delete"
+				onMouseDown={this.onItemMouseDown}
+				onItemClick={this._handleSuggestionItemPress}
+				onSelectionChange={this._handleSelectionChange}
+				onItemDelete={(e: any) => {
+					const listItem = e.detail.item;
+					const tokenId = listItem.getAttribute("data-ui5-token-ref-id");
+					const token = this.tokens.find((t: any) => t._id === tokenId);
+
+					if (token) {
+						this.tokenDelete({ detail: { tokens: [token] } } as CustomEvent<MultiInputTokenDeleteEventDetail>);
+					}
+				}}
+			>
+				{this.tokens?.map((token: any, index: number) => (
+					<ListItemStandard
+						key={index}
+						class="ui5-suggestion-token-item"
+						data-ui5-token-ref-id={token._id}
+						wrappingType="Normal"
+						text={token.text}
+					/>
+				))}
+			</List>
+		);
+	}
+
+	return (
+		<List
+			accessibleRole={ListAccessibleRole.ListBox}
+			separators={this.suggestionSeparators}
+			selectionMode="Single"
+			onMouseDown={this.onItemMouseDown}
+			onItemClick={this._handleSuggestionItemPress}
+			onSelectionChange={this._handleSelectionChange}
+		>
+			<slot></slot>
+		</List>
+	);
+}
+
+function multiInputMobileHeader(this: MultiInput) {
+	return (
+		<ToggleButton
+			class="ui5-multi-input-mobile-dialog-button"
+			design="Transparent"
+			icon={multiSelectAll}
+			accessibleName={this._filterButtonAccessibleName}
+			disabled={!this.tokens?.length}
+			pressed={this._effectiveShowTokensInSuggestions}
+			onClick={() => {
+				this._userToggledShowTokens = true;
+				this._showTokensInSuggestions = !this._effectiveShowTokensInSuggestions;
+			}}
+		/>
+	);
+}

package/src/PanelTemplate.tsx

@@ -21,11 +21,14 @@ export default function PanelTemplate(this: Panel) {
 					}}
 					role={this.headingWrapperRole}
 					aria-level={this.headingWrapperAriaLevel}
+					part="header-wrapper"
 				>
 					<div
 						onClick={this._headerClick}
 						onKeyDown={this._headerKeyDown}
 						onKeyUp={this._headerKeyUp}
+						onTouchStart={this._isMobile}
+						onFocusOut={this._headerFocusOut}
 						class="ui5-panel-header"
 						tabindex={this.headerTabIndex}
 						role={this.accInfo.role}

package/src/PopoverTemplate.tsx

@@ -1,3 +1,5 @@
+import Icon from "./Icon.js";
+import resizeCorner from "@ui5/webcomponents-icons/dist/resize-corner.js";
 import type Popover from "./Popover.js";
 import PopupTemplate from "./PopupTemplate.js";
 import Title from "./Title.js";
@@ -32,5 +34,13 @@ function afterContent(this: Popover) {
 				<slot name="footer"></slot>
 			</footer>
 		}
+
+		{this._showResizeHandle &&
+			<div class="ui5-popover-resize-handle"
+				 onMouseDown={this._onResizeMouseDown}
+			>
+				<Icon name={resizeCorner} />
+			</div>
+		}
 	</>);
 }

package/src/RadioButtonTemplate.tsx

@@ -7,6 +7,7 @@ export default function RadioButtonTemplate(this: RadioButton) {
 		<div
 			role="radio"
 			class="ui5-radio-root"
+			part="root"
 			aria-checked={this.checked}
 			aria-disabled={this.effectiveAriaDisabled}
 			aria-describedby={this.effectiveAriaDescribedBy}