@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/src/MultiComboBoxTemplate.tsx

@@ -0,0 +1,121 @@
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import MultiComboboxPopoverTemplate from "./MultiComboBoxPopoverTemplate.js";
+import type MultiComboBox from "./MultiComboBox.js";
+import Tokenizer from "./Tokenizer.js";
+import Token from "./Token.js";
+import Icon from "./Icon.js";
+
+export default function MultiComboBoxTemplate(this: MultiComboBox) {
+	return (<>
+		<div class="ui5-multi-combobox-root ui5-input-focusable-element">
+			<span id="ui5-multi-combobox-hiddenText-nMore" class="ui5-hidden-text">{this._tokensCountText}</span>
+
+			{this.hasValueState &&
+				<span id="ui5-multi-combobox-valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
+			}
+
+			<Tokenizer
+				slot="_beginContent"
+				preventPopoverOpen={true}
+				hidePopoverArrow={true}
+				readonly={this.readonly}
+				class="ui5-multi-combobox-tokenizer"
+				disabled={this.disabled}
+				onShowMoreItemsPress={this._showFilteredItems}
+				opener={this.morePopoverOpener}
+				popoverMinWidth={this._inputWidth}
+				onTokenDelete={this._tokenDelete}
+				onBeforeMorePopoverOpen={this.handleBeforeTokenizerPopoverOpen}
+				onFocusOut={this._tokenizerFocusOut}
+				onFocusIn={this._tokenizerFocusIn}
+				onClick={this._click}
+				onPaste={this._handlePaste}
+				onKeyDown={this._onTokenizerKeydown}
+				expanded={this._tokenizerExpanded}
+				open={this.tokenizerOpen}
+			>
+				{this.items.map((item, index) => {
+					if (item.isGroupItem) {
+						return item.items?.map((groupItem, groupItemIndex) => {
+							return groupItem.selected && <Token
+								readonly={this.readonly}
+								class="ui5-multi-combobox-token"
+								data-ui5-id={groupItem._id}
+								part={`token-${groupItemIndex}`}
+								text={groupItem.text}
+							/>;
+						});
+					}
+
+					return item.selected && <Token
+						readonly={this.readonly}
+						class="ui5-multi-combobox-token"
+						data-ui5-id={item._id}
+						part={`token-${index}`}
+						text={item.text}
+					/>;
+				})}
+			</Tokenizer>
+
+			<input
+				id="ui5-multi-combobox-input"
+				value={this.value}
+				inner-input
+				placeholder={this._getPlaceholder}
+				disabled={this.disabled}
+				readonly={this.readonly}
+				value-state={this.valueState}
+				onInput={this._inputLiveChange}
+				onChange={this._inputChange}
+				onKeyDown={this._onkeydown}
+				onClick={this._click}
+				onFocusIn={this.inputFocusIn}
+				onFocusOut={this.inputFocusOut}
+				onPaste={this._handlePaste}
+				role="combobox"
+				aria-haspopup="dialog"
+				aria-expanded={this.open}
+				aria-autocomplete="both"
+				aria-describedby={this.ariaDescribedByText}
+				aria-required={this.required}
+				aria-label={this.ariaLabelText}
+				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}
+					onMouseDown={this._iconMouseDown}
+				>
+					<Icon tabIndex={-1} class="ui5-input-clear-icon" name={decline} accessible-name={this.clearIconAccessibleName}></Icon>
+				</div>
+			}
+
+			{this.icon &&
+				<slot name="icon"></slot>
+			}
+
+			{!this.readonly &&
+				<Icon name="slim-arrow-down"
+					class={{
+						"inputIcon": true,
+						"inputIcon--pressed": this._iconPressed,
+					}}
+					slot="icon"
+					tabIndex={-1}
+					onClick={this.togglePopoverByDropdownIcon}
+					onMouseDown={this._onIconMousedown}
+					onFocusIn={this._forwardFocusToInner}
+					// pressed={this.open}
+					accessibleName={this._iconAccessibleNameText}
+				></Icon>
+			}
+		</div>
+
+		{MultiComboboxPopoverTemplate.call(this)}
+	</>);
+}

package/src/MultiInputTemplate.tsx

@@ -14,6 +14,10 @@ function preContent(this: MultiInput) {
 	return (
 		<>
 			<span id="hiddenText-nMore" class="ui5-hidden-text">{this._tokensCountText}</span>
+
+			{this.showValueHelpIcon &&
+				<span id="hiddenText-value-help" class="ui5-hidden-text">{this._valueHelpText}</span>
+			}
 			<Tokenizer
 				class="ui5-multi-input-tokenizer"
 				opener={this.morePopoverOpener}

package/src/RangeSliderTemplate.tsx

@@ -37,7 +37,7 @@ export function progressBar(this: RangeSlider) {
 				aria-valuemax={this.max}
 				aria-valuenow={this._ariaValueNow}
 				aria-valuetext={`From ${this.startValue} to ${this.endValue}`}
-				aria-labelledby="ui5-slider-sliderDesc"
+				aria-label={this._ariaLabel}
 				aria-disabled={this._ariaDisabled}
 			></div>
 		</div>
@@ -60,7 +60,7 @@ export function handles(this: RangeSlider) {
 				aria-labelledby={this._ariaLabelledByStartHandleText}
 				aria-disabled={this._ariaDisabled}
 				aria-describedby={this._ariaDescribedByHandleText}
-				aria-keyshortcuts="F2"
+				aria-keyshortcuts={this._ariaKeyshortcuts}
 			>
 				<Icon name={directionArrows}
 					mode="Decorative"

package/src/ResponsivePopoverTemplate.tsx

@@ -18,6 +18,7 @@ export default function ResponsivePopoverTemplate(this: ResponsivePopover) {
 			accessibleRole={this.accessibleRole}
 			stretch={true}
 			preventInitialFocus={this.preventInitialFocus}
+			preventFocusRestore={this.preventFocusRestore}
 			initialFocus={this.initialFocus}
 			onBeforeOpen={this._beforeDialogOpen}
 			onOpen={this._afterDialogOpen}

package/src/SelectPopoverTemplate.tsx

@@ -0,0 +1,107 @@
+import type Select from "./Select.js";
+import List from "./List.js";
+import Button from "./Button.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import Popover from "./Popover.js";
+import Icon from "./Icon.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+
+export default function SelectPopoverTemplate(this: Select) {
+	return (
+		<>
+			{this.options.length > 0 &&
+				<ResponsivePopover
+					class={{
+						"ui5-select-popover": true,
+						...this.classes.popover
+					}}
+					part="popover"
+					style={this.styles.responsivePopover}
+					placement="Bottom"
+					horizontalAlign="Start"
+					hideArrow={true}
+					preventInitialFocus={true}
+					onOpen={this._afterOpen}
+					onBeforeOpen={this._beforeOpen}
+					onClose={this._afterClose}
+					onKeyDown={this._onkeydown}
+				>
+					{this._isPhone &&
+						<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._toggleRespPopover} />
+							</div>
+
+							{this.hasValueStateText &&
+								<div class={{
+									"row": true,
+									"ui5-select-value-state-dialog-header": true,
+									...this.classes.popoverValueState
+								}}>
+									{this._isPickerOpen && valueStateMessage.call(this)}
+								</div>
+							}
+						</div>
+					}
+
+					{!this._isPhone && this.hasValueStateText &&
+						<div
+							class={this.classes.popoverValueState}
+							style={this.styles.responsivePopoverHeader}>
+							<Icon
+								class="ui5-input-value-state-message-icon"
+								name={this._valueStateMessageInputIcon} />
+							{this._isPickerOpen && valueStateMessage.call(this)}
+						</div>
+					}
+
+					<List
+						separators="None"
+						onMouseDown={this._itemMousedown}
+						onItemClick={this._handleItemPress}
+						accessibleRole="ListBox"
+					>
+						<slot></slot>
+					</List>
+				</ResponsivePopover>
+			}
+
+			{this.shouldOpenValueStateMessagePopover &&
+				<Popover
+					part="popover"
+					class="ui5-valuestatemessage-popover"
+					preventInitialFocus={true}
+					preventFocusRestore={true}
+					hideArrow={true}
+					placement="Bottom"
+					horizontalAlign="Start"
+				>
+					<div
+						class={this.classes.popoverValueState}
+						style={this.styles.popoverHeader}>
+						<Icon
+							class="ui5-input-value-state-message-icon"
+							name={this._valueStateMessageInputIcon} />
+						{valueStateMessage.call(this)}
+					</div>
+				</Popover>
+			}
+		</>
+	);
+}
+
+function valueStateMessage(this: Select) {
+	return (
+		<>
+			{this.shouldDisplayDefaultValueStateMessage
+				? this.valueStateText
+				: <slot onClick={this._applyFocus} name="valueStateMessage"></slot>
+			}
+		</>
+	);
+}

package/src/SelectTemplate.tsx

@@ -0,0 +1,78 @@
+import type Select from "./Select.js";
+import Icon from "./Icon.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import SelectPopoverTemplate from "./SelectPopoverTemplate.js";
+
+export default function SelectTemplate(this: Select) {
+	return (
+		<>
+			<div
+				class={{
+					"ui5-select-root": true,
+					"ui5-input-focusable-element": true,
+				}}
+				id={`${this._id}-select`}
+				onClick={this._onclick}
+				title={this.tooltip}
+			>
+				{!this.icon && this.selectedOptionIcon &&
+					<Icon
+						mode="Decorative"
+						class="ui5-select-option-icon"
+						name={this.selectedOptionIcon} />
+				}
+
+				<div
+					class="ui5-select-label-root"
+					data-sap-focus-ref
+					tabindex={this._effectiveTabIndex}
+					role="combobox"
+					aria-haspopup="listbox"
+					aria-label={this.ariaLabelText}
+					aria-describedby={this.valueStateTextId}
+					aria-disabled={this.isDisabled}
+					aria-required={this.required}
+					aria-readonly={this.readonly}
+					aria-expanded={this._isPickerOpen}
+					aria-roledescription={this._ariaRoleDescription}
+					onKeyDown={this._onkeydown}
+					onKeyPress={this._handleKeyboardNavigation}
+					onKeyUp={this._onkeyup}
+					onFocusIn={this._onfocusin}
+					onFocusOut={this._onfocusout}
+				>
+					{this.hasCustomLabel
+						? <slot name="label"></slot>
+						: this.text
+					}
+				</div>
+
+				{this.icon &&
+					<Icon
+						name={this.icon}
+						class={{
+							"inputIcon": true,
+							"inputIcon--pressed": this._iconPressed,
+						}} />
+				}
+
+				{!this.icon && !this.readonly &&
+					<Icon
+						part="icon"
+						name={slimArrowDown}
+						class={{
+							"inputIcon": true,
+							"inputIcon--pressed": this._iconPressed,
+						}} />
+				}
+
+				{this.hasValueState &&
+					<span id={`${this._id}-valueStateDesc`} class="ui5-hidden-text">
+						{this.valueStateText}
+					</span>
+				}
+			</div>
+			{SelectPopoverTemplate.call(this)}
+		</>
+	);
+}

package/src/SliderBaseTemplate.tsx

@@ -24,7 +24,7 @@ export default function SliderBaseTemplate(this: SliderBase, hooks?: {
 			{(hooks?.handlesAriaText || handlesAriaText).call(this)}
 
 			<div class="ui5-slider-inner">
-				{this.step && this.showTickmarks && <>
+				{!!this.step && this.showTickmarks && <>
 					<ul class="ui5-slider-tickmarks">
 						{this.tickmarksObject.map(tm => <>
 							{tm ?
@@ -34,7 +34,7 @@ export default function SliderBaseTemplate(this: SliderBase, hooks?: {
 							}
 						</>)}
 					</ul>
-					{this.labelInterval &&
+					{!!this.labelInterval &&
 							<ul class={{
 								"ui5-slider-labels": true,
 								"ui5-slider-hidden-labels": this._labelsOverlapping,
@@ -52,13 +52,6 @@ export default function SliderBaseTemplate(this: SliderBase, hooks?: {
 
 				{(hooks?.handles || handles).call(this)}
 			</div>
-
-			{this.accessibleName &&
-				<span id="ui5-slider-accName" class="ui5-hidden-text">{this.accessibleName}</span>
-			}
-
-			<span id="ui5-slider-sliderDesc" class="ui5-hidden-text">{this._ariaLabelledByText}</span>
-
 			{this.editableTooltip && <>
 				<span id="ui5-slider-InputDesc" class="ui5-hidden-text">{this._ariaDescribedByInputText}</span>
 				<span id="ui5-slider-InputLabel" class="ui5-hidden-text">{this._ariaLabelledByInputText}</span>

package/src/SliderTemplate.tsx

@@ -35,15 +35,16 @@ export function handles(this: Slider) {
 			<div class="ui5-slider-handle"
 				onFocusOut={this._onfocusout}
 				onFocusIn={this._onfocusin}
+				onKeyUp={this._onkeyup}
 				role="slider"
 				tabIndex={this._tabIndex}
 				aria-orientation="horizontal"
 				aria-valuemin={this.min}
 				aria-valuemax={this.max}
 				aria-valuenow={this.value}
-				aria-labelledby={this._ariaLabelledByHandleText}
+				aria-label={this._ariaLabel}
 				aria-disabled={this._ariaDisabled}
-				aria-keyshortcuts="F2"
+				aria-keyshortcuts={this._ariaKeyshortcuts}
 				aria-describedby={this._ariaDescribedByHandleText}
 				data-sap-focus-ref
 				part="handle"

package/src/SplitButtonTemplate.tsx

@@ -10,7 +10,6 @@ export default function SplitButtonTemplate(this: SplitButton) {
 			tabindex={this._tabIndex}
 			aria-labelledby={`${this._id}-invisibleTextDefault ${this._id}}-invisibleText`}
 			onFocusOut={this._onFocusOut}
-			onFocusIn={this._onFocusIn}
 			onKeyDown={this._onKeyDown}
 			onKeyUp={this._onKeyUp}
 		>

package/src/SwitchTemplate.tsx

@@ -59,13 +59,7 @@ export default function SwitchTemplate(this: Switch) {
 							</>
 						}
 
-						<span class="ui5-switch-handle" part="handle">
-							{/*  this icon is used in the sap_horizon_exp theme */}
-							<Icon
-								name={this.sapNextIcon}
-								class="ui5-switch-handle-icon"
-							/>
-						</span>
+						<span class="ui5-switch-handle" part="handle"></span>
 					</div>
 				</div>
 			</div>

package/src/TabContainerTemplate.tsx

@@ -45,6 +45,7 @@ export default function TabContainerTemplate(this: TabContainer, injectedPartial
 				"ui5-tc--textOnly": this.textOnly,
 				"ui5-tc--withAdditionalText": this.withAdditionalText,
 				"ui5-tc--standardTabLayout": this.standardTabLayout,
+				"ui5-tc--noTabSelected": !this._selectedTab,
 			}}
 		>
 			{this.tabsAtTheBottom && partials.contentArea.call(this)}

package/src/TableCellTemplate.tsx

@@ -0,0 +1,15 @@
+import type TableCell from "./TableCell.js";
+
+export default function TableCellTemplate(this: TableCell) {
+	return (
+		<>
+			{ this._popin &&
+				<>
+					<div class="popin-header" ref={this.injectHeaderNodes.bind(this)}></div>
+					<span class="popin-colon">{this._i18nPopinColon}</span>
+				</>
+			}
+			<slot></slot>
+		</>
+	);
+}

package/src/TableGrowingTemplate.tsx

@@ -0,0 +1,23 @@
+import type TableGrowing from "./TableGrowing.js";
+
+export default function TableGrowingTemplate(this: TableGrowing) {
+	return (
+		<div
+			id="button"
+			tabindex={-1}
+			data-ui5-growing-active={this._activeState}
+			onClick={this.loadMore}
+			onKeyDown={this._onKeydown}
+			onKeyUp={this._onKeyup}
+			onFocusOut={this._onFocusout}
+			role="button"
+			aria-labelledby="text subtext"
+			aria-describedby="description">
+			<span id="text">{this._buttonText}</span>
+			{ this.subtext &&
+				<span id="subtext">{this.subtext}</span>
+			}
+			<span id="description" class="ui5-hidden-text" aria-hidden="true">{this._buttonDescription}</span>
+		</div>
+	);
+}

package/src/TableHeaderCellActionBaseTemplate.tsx

@@ -0,0 +1,14 @@
+import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
+import type TableHeaderCellActionBase from "./TableHeaderCellActionBase.js";
+
+export default function TableHeaderCellActionBaseTemplate(this: TableHeaderCellActionBase) {
+	return (
+		<Button
+			icon={this._icon}
+			tooltip={this._tooltip}
+			onClick={this._onClick}
+			design={ButtonDesign.Transparent}
+		></Button>
+	);
+}

package/src/TableHeaderCellTemplate.tsx

@@ -0,0 +1,26 @@
+import Icon from "./Icon.js";
+import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.js";
+import SortAscending from "@ui5/webcomponents-icons/dist/sort-ascending.js";
+import SortDescending from "@ui5/webcomponents-icons/dist/sort-descending.js";
+import type TableHeaderCell from "./TableHeaderCell.js";
+
+export default function TableHeaderCellTemplate(this: TableHeaderCell) {
+	return (
+		<>
+			<slot name="action"></slot>
+			<slot></slot>
+			{ sortIcon.call(this) }
+		</>
+	);
+}
+
+function sortIcon(this: TableHeaderCell) {
+	switch (this.sortIndicator) {
+	case SortOrder.Ascending:
+		return <Icon name={SortAscending}></Icon>;
+	case SortOrder.Descending:
+		return <Icon name={SortDescending}></Icon>;
+	default:
+		return <></>;
+	}
+}

package/src/TableHeaderRowTemplate.tsx

@@ -0,0 +1,44 @@
+import CheckBox from "./CheckBox.js";
+import TableHeaderCell from "./TableHeaderCell.js";
+import type TableHeaderRow from "./TableHeaderRow.js";
+
+export default function TableHeaderRowTemplate(this: TableHeaderRow) {
+	return (
+		<>
+			{ this._hasRowSelector &&
+				<TableHeaderCell id="selection-cell"
+					aria-selected={this._isSelected}
+					aria-label={this._i18nSelection}
+					data-ui5-table-cell-fixed
+					data-ui5-table-selection-component
+				>
+					{ this._isMultiSelect &&
+						<CheckBox id="selection-component"
+							tabindex={-1}
+							checked={this._isSelected}
+							onChange={this._onSelectionChange}
+							accessibleName={this._i18nRowSelector}
+						></CheckBox>
+					}
+				</TableHeaderCell>
+			}
+
+			{ this._visibleCells.map(cell => (
+				<slot name={cell._individualSlot} key={cell._individualSlot}></slot>
+			))}
+
+			{ this._rowActionCount > 0 &&
+				<TableHeaderCell id="actions-cell"
+					aria-label={this._i18nRowActions}
+				></TableHeaderCell>
+			}
+
+			{ this._popinCells.length > 0 &&
+				<TableHeaderCell id="popin-cell"
+					aria-label={this._i18nRowPopin}
+					data-excluded-from-navigation
+				></TableHeaderCell>
+			}
+		</>
+	);
+}

package/src/TableRowActionBaseTemplate.tsx

@@ -0,0 +1,30 @@
+import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
+import Icon from "./Icon.js";
+import IconDesign from "./types/IconDesign.js";
+import type TableRowActionBase from "./TableRowActionBase.js";
+
+export default function TableRowActionBaseTemplate(this: TableRowActionBase) {
+	return (
+		<>
+			{ this.invisible ?
+				<div></div>
+				:
+				this._isInteractive ?
+					<Button
+						icon={this._icon}
+						tooltip={this._text}
+						onClick={this._onActionClick}
+						design={ButtonDesign.Transparent}
+					></Button>
+					:
+					<Icon
+						name={this._icon}
+						accessibleName={this._text}
+						showTooltip={true}
+						design={IconDesign.NonInteractive}
+					></Icon>
+			}
+		</>
+	);
+}

package/src/TableRowTemplate.tsx

@@ -0,0 +1,77 @@
+import TableCell from "./TableCell.js";
+import CheckBox from "./CheckBox.js";
+import RadioButton from "./RadioButton.js";
+import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
+import type TableRow from "./TableRow.js";
+
+export default function TableRowTemplate(this: TableRow) {
+	return (
+		<>
+			{ this._hasRowSelector &&
+				<TableCell
+					id="selection-cell"
+					aria-selected={this._isSelected}
+					data-ui5-table-cell-fixed
+					data-ui5-table-selection-component
+				>
+					{ this._isMultiSelect ?
+						<CheckBox id="selection-component"
+							tabindex={-1}
+							checked={this._isSelected}
+							onChange={this._onSelectionChange}
+							accessibleName={this._i18nRowSelector}
+						></CheckBox>
+						:
+						<RadioButton id="selection-component"
+							tabindex={-1}
+							name={this._tableId}
+							checked={this._isSelected}
+							onChange={this._onSelectionChange}
+							accessibleName={this._i18nRowSelector}
+						></RadioButton>
+					}
+				</TableCell>
+			}
+
+			{ this._visibleCells.map(cell => (
+				<slot name={cell._individualSlot}></slot>
+			))}
+
+			{ this._rowActionCount > 0 &&
+				<TableCell id="actions-cell">
+					{ this._flexibleActions.map(action => (
+						<slot name={action._individualSlot}></slot>
+					))}
+
+					{ this._hasOverflowActions &&
+						<Button
+							id="overflow"
+							icon="overflow"
+							design={ButtonDesign.Transparent}
+							onClick={this._onOverflowButtonClick}
+						></Button>
+					}
+
+					{ this._fixedActions.map(action => (
+						<slot name={action._individualSlot}></slot>
+					))}
+				</TableCell>
+			}
+
+			{ this._renderNavigated &&
+				<TableCell id="navigated-cell" data-excluded-from-navigation={true}>
+					<div id="navigated"></div>
+				</TableCell>
+			}
+
+			{ this._popinCells.length > 0 &&
+				<TableCell id="popin-cell">
+					{ this._popinCells.map(cell => (
+						<slot name={cell._individualSlot}></slot>
+					))}
+				</TableCell>
+			}
+		</>
+	);
+}