@ui5/webcomponents-fiori 0.0.0-037d08c67

package/src/UserSettingsAppearanceViewItemTemplate.tsx

@@ -0,0 +1,25 @@
+import type UserSettingsAppearanceViewItem from "./UserSettingsAppearanceViewItem.js";
+import ListItemCustomTemplate from "@ui5/webcomponents/dist/ListItemCustomTemplate.js";
+import Avatar from "@ui5/webcomponents/dist/Avatar.js";
+import AvatarSize from "@ui5/webcomponents/dist/types/AvatarSize.js";
+
+export default function UserSettingsAppearanceViewItemTemplate(this: UserSettingsAppearanceViewItem) {
+	return ListItemCustomTemplate.call(this, {
+		listItemContent: listItemContent.bind(this),
+	});
+}
+
+function listItemContent(this: UserSettingsAppearanceViewItem) {
+	return (
+		<div class="list-item">
+			<div class="item-left">
+				{/* Two avatars are rendered for different content density modes - CSS controls visibility */}
+				<Avatar class="avatar-cozy" shape="Square" icon={this.icon} color-scheme={this.colorScheme} size={AvatarSize.S}></Avatar>
+				<Avatar class="avatar-compact" shape="Square" icon={this.icon} color-scheme={this.colorScheme} size={AvatarSize.XS}></Avatar>
+				<div class="item-texts">
+					<span class="item-title">{this.text}</span>
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/UserSettingsAppearanceViewTemplate.tsx

@@ -0,0 +1,15 @@
+import type UserSettingsAppearanceView from "./UserSettingsAppearanceView.js";
+import List from "@ui5/webcomponents/dist/List.js";
+
+export default function UserSettingsAppearanceViewTemplate(this: UserSettingsAppearanceView) {
+	return (
+		<div class="ui5-user-settings-view-container">
+			<div class="ui5-user-settings-view">
+				<slot name="additionalContent"></slot>
+				<List header-text={this.text} class="user-settings-appearance-view-list" onItemClick={this._handleItemClick} >
+					<slot></slot>
+				</List>
+			</div>
+		</div>
+	);
+}

package/src/UserSettingsDialogTemplate.tsx

@@ -0,0 +1,80 @@
+import type UserSettingsDialog from "./UserSettingsDialog.js";
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
+import Title from "@ui5/webcomponents/dist/Title.js";
+import Input from "@ui5/webcomponents/dist/Input.js";
+import Text from "@ui5/webcomponents/dist/Text.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
+import ToolbarButton from "@ui5/webcomponents/dist/ToolbarButton.js";
+import Toolbar from "@ui5/webcomponents/dist/Toolbar.js";
+import search from "@ui5/webcomponents-icons/dist/search.js";
+import type UserSettingsItem from "./UserSettingsItem.js";
+
+export default function UserSettingsDialogTemplate(this: UserSettingsDialog) {
+	return (
+
+		<Dialog class="ui5-user-settings-dialog"
+			open={this.open}
+			stretch
+			accessibleName={this.accessibleNameText}
+			onui5-_collapse={this._handleCollapseClick}
+			onOpen={this._handleDialogAfterOpen}
+			onBeforeClose={this._handleDialogBeforeClose}
+			onClose={this._handleDialogAfterClose}
+			initialFocus={`setting-${this._selectedSetting?._id}`}
+		>
+			<div class="ui5-user-settings-root">
+				<div class="ui5-user-settings-side" aria-orientation="vertical" aria-roledescription={this.ariaRoleDescList}>
+					<div class="ui5-user-settings-side-header">
+						{this.headerText &&
+							<Title level="H1" size="H4">{this.headerText}</Title>
+						}
+						{this.showSearchField &&
+							<Input placeholder="Search" type="Search" class="ui5-user-settings-side-search"
+								   onInput={this._handleInput}>
+								<Icon id="searchFieldIcon" slot="icon" name={search} showTooltip></Icon>
+							</Input>
+						}
+					</div>
+					{this._showNoSearchResult ?
+						<div class="ui5-user-settings-side-search">
+							<Text>{this.noSearchResultsText}</Text>
+						</div>
+						:
+						renderList.call(this, this._filteredItems, "ui5-user-settings-side-items")}
+
+					{this._filteredFixedItems.length > 0 && renderList.call(this, this._filteredFixedItems, "ui5-user-settings-side-fixedItems")}
+				</div>
+
+				<div class="ui5-user-settings-content">
+					<slot name={this._selectedItemSlotName}></slot>
+				</div>
+			</div>
+
+			<Toolbar slot="footer" design="Transparent">
+				<ToolbarButton design="Transparent" text={this.closeButtonText} tooltip={this.closeButtonText} onClick={this._handleCloseButtonClick} />
+			</Toolbar>
+		</Dialog>
+	);
+}
+
+function renderList(this: UserSettingsDialog, items: Array<UserSettingsItem> = [], classes: string) {
+	return <List accessibleRole="Menu" onItemClick={this._handleItemClick} class={classes} separators="None">
+		{items.map(item => (
+			<ListItemStandard
+				class={!item._icon && item._siblingsWithIcon ? "ui5-user-settings-item-no-icon" : ""}
+				id={`setting-${item._id}`}
+				icon={!item._icon && item._siblingsWithIcon ? undefined : item._icon}
+				tooltip={item._tooltip}
+				ref={this.captureRef.bind(item)}
+				selected={item.selected}
+				disabled={item.disabled}
+				accessibleName={item.ariaLabelledByText}
+				type={this._showSettingWithNavigation ? "Navigation" : "Active"}
+			>
+				{item.text}
+			</ListItemStandard>
+		))}
+	</List>;
+}

package/src/UserSettingsItemTemplate.tsx

@@ -0,0 +1,52 @@
+import type UserSettingsItem from "./UserSettingsItem.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import TabContainer from "@ui5/webcomponents/dist/TabContainer.js";
+import Tab from "@ui5/webcomponents/dist/Tab.js";
+import Title from "@ui5/webcomponents/dist/Title.js";
+import "@ui5/webcomponents-icons/dist/globe.js";
+import "@ui5/webcomponents-icons/dist/nav-back.js";
+
+export default function UserSettingsItemTemplate(this: UserSettingsItem) {
+	const content = this.tabs.length > 0 && !this._hasSelectedPageView ?
+		<TabContainer contentBackgroundDesign="Transparent" class="ui5-user-settings-item-tabs" onTabSelect={this._handleTabSelect}>
+			{this.tabs.map(view =>
+				<Tab text={view.text} selected={view.selected} ref={this.captureRef.bind(view)}>
+					<slot name={view._individualSlot} />
+				</Tab>
+			)}
+		</TabContainer>
+		:
+		<>
+			{this._selectedPageView ?
+				<div class="ui5-user-settings-item-view-container">
+					<slot name={this._selectedPageView._individualSlot} />
+				</div>
+				:
+				null
+			}
+		</>;
+
+	const loadingState = <div class="ui5-user-settings-item-loading-container">
+		<BusyIndicator
+			active={this.loading}
+			class="ui5-user-settings-item-busy"
+			delay={0}
+			aria-description={this.loadingReason}>
+		</BusyIndicator>
+	</div>;
+
+	return (
+		<div class="ui5-user-settings-item">
+			<header class="ui5-user-settings-item-header-container">
+				<div class="ui5-user-settings-item-header">
+					<Button icon="nav-back" design="Transparent" onClick={this._handleBackButtonClick} class="ui5-user-settings-item-collapse-btn" style={{ display: this._shouldShowBackButton ? "block" : "" }}></Button>
+
+					<Title level="H2" size="H4">{this._hasSelectedPageView ? this._selectedPageView.text : this.headerText}</Title>
+				</div>
+			</header>
+
+			{this.loading ? loadingState : content}
+		</div>
+	);
+}

package/src/UserSettingsViewTemplate.tsx

@@ -0,0 +1,11 @@
+import type UserSettingsView from "./UserSettingsView.js";
+
+export default function UserSettingsViewTemplate(this: UserSettingsView) {
+	return (
+		<div class="ui5-user-settings-view-container">
+			<div class="ui5-user-settings-view">
+				<slot></slot>
+			</div>
+		</div>
+	);
+}

package/src/ViewSettingsDialogTemplate.tsx

@@ -0,0 +1,230 @@
+import Dialog from "@ui5/webcomponents/dist/Dialog.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import Title from "@ui5/webcomponents/dist/Title.js";
+import SegmentedButton from "@ui5/webcomponents/dist/SegmentedButton.js";
+import SegmentedButtonItem from "@ui5/webcomponents/dist/SegmentedButtonItem.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import ListItemGroup from "@ui5/webcomponents/dist/ListItemGroup.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
+import navBackIcon from "@ui5/webcomponents-icons/dist/nav-back.js";
+import sortIcon from "@ui5/webcomponents-icons/dist/sort.js";
+import filterIcon from "@ui5/webcomponents-icons/dist/filter.js";
+import groupIcon from "@ui5/webcomponents-icons/dist/group-2.js";
+
+import type ViewSettingsDialog from "./ViewSettingsDialog.js";
+
+function ViewSettingsDialogTemplateHeader(this: ViewSettingsDialog) {
+	return (
+		<div slot="header" class="ui5-vsd-header">
+			<div class="ui5-vsd-header-container" part="header">
+				<div class="ui5-vsd-header-start">
+					{this.showBackButton && (
+						<Button
+							design="Transparent"
+							icon={navBackIcon}
+							class="ui5-vsd-back-button"
+							onClick={this._navigateToFilters}
+						/>
+					)}
+					<Title
+						wrappingType="None"
+						level="H1"
+						class="ui5-vsd-title"
+						id={`${this._id}-label`}
+					>{this._title}</Title>
+				</div>
+				<div class="ui5-vsd-header-end">
+					<Button
+						design="Transparent"
+						onClick={this._resetSettings}
+						disabled={this._disableResetButton}
+					>{this._resetButtonLabel}</Button>
+				</div>
+			</div>
+			{!this.showBackButton && this.hasPagination && (
+				<div class="ui5-vsd-sub-header-container">
+					<div class="ui5-vsd-sub-header">
+						<SegmentedButton
+							onSelectionChange={this._handleModeChange}
+						>
+							{_getSplitButtonItems.call(this)}
+						</SegmentedButton>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+function _getSplitButtonItems(this: ViewSettingsDialog) {
+	const buttonItems = [];
+
+	if (this.shouldBuildSort) {
+		buttonItems.push(
+			<SegmentedButtonItem
+				selected={this.isModeSort}
+				icon={sortIcon}
+				data-mode="Sort"
+				tooltip={this._sortButtonTooltip}
+			/>
+		);
+	}
+
+	if (this.shouldBuildFilter) {
+		buttonItems.push(
+			<SegmentedButtonItem
+				selected={this.isModeFilter}
+				icon={filterIcon}
+				data-mode="Filter"
+				tooltip={this._filterButtonTooltip}
+			/>
+		);
+	}
+
+	if (this.shouldBuildGroup) {
+		buttonItems.push(
+			<SegmentedButtonItem
+				selected={this.isModeGroup}
+				icon={groupIcon}
+				data-mode="Group"
+				tooltip={this._groupButtonTooltip}
+			/>
+		);
+	}
+
+	return buttonItems;
+}
+
+function ViewSettingsDialogTemplateContent(this: ViewSettingsDialog) {
+	return (
+		<div
+			class={{
+				"ui5-vsd-content": true,
+				"ui5-vsd-content-expand": this.expandContent,
+			}}
+		>
+			{this.shouldBuildSort && this.isModeSort && (
+				ViewSettingsDialogSortAndGroupTemplate.call(this, true)
+			)}
+
+			{this.shouldBuildFilter && this.isModeFilter && (
+				ViewSettingsDialogFilterTemplate.call(this)
+			)}
+
+			{this.shouldBuildGroup && this.isModeGroup && (
+				ViewSettingsDialogSortAndGroupTemplate.call(this, false)
+			)}
+
+		</div>
+	);
+}
+
+function ViewSettingsDialogSortAndGroupTemplate(this: ViewSettingsDialog, isSortTemplate: boolean) {
+	const currentSettingsOrder = isSortTemplate ? this._currentSettings.sortOrder : this._currentSettings.groupOrder;
+	const currentSettingsBy = isSortTemplate ? this._currentSettings.sortBy : this._currentSettings.groupBy;
+
+	return (
+		<div class={isSortTemplate ? "ui5-vsd-sort" : "ui5-vsd-group"}>
+			<List
+				selectionMode="SingleStart"
+				onSelectionChange={isSortTemplate ? this._onSortOrderChange : this._onGroupOrderChange} // radio button - use selectionChange
+				{...(isSortTemplate ? { "sort-order": "" } : { "group-order": "" })}
+				accessibleNameRef={`${this._id}-label`}
+			>
+				<ListItemGroup headerText={isSortTemplate ? this._sortOrderLabel : this._groupOrderLabel}>
+					{currentSettingsOrder.map(item => (
+						<ListItemStandard
+							selected={item.selected}
+						>{item.text}</ListItemStandard>
+					))}
+				</ListItemGroup>
+			</List>
+			<List
+				selectionMode="SingleStart"
+				onSelectionChange={isSortTemplate ? this._onSortByChange : this._onGroupByChange} // radio button - use selectionChange
+				{...(isSortTemplate ? { "sort-by": "" } : { "group-by": "" })}
+			>
+				<ListItemGroup headerText={ isSortTemplate ? this._sortByLabel : this._groupByLabel}>
+					{currentSettingsBy.map((item, index) => (
+						<ListItemStandard
+							data-ui5-external-action-item-index={index}
+							selected={item.selected}
+						>{item.text}</ListItemStandard>
+					))}
+				</ListItemGroup>
+			</List>
+		</div>
+	);
+}
+
+function ViewSettingsDialogFilterTemplate(this: ViewSettingsDialog) {
+	return (
+		<>
+			{this._filterStepTwo ? (
+				<List
+					selectionMode="Multiple"
+					onSelectionChange={this._handleFilterValueItemClick} // checkboxes to select/deselect - use selectionChange
+					accessibleNameRef={`${this._id}-label`}
+				>
+					{this._currentSettings.filters.filter(item => item.selected).map(item => (<>
+						{item.filterOptions.map(option => (
+							<ListItemStandard
+								selected={option.selected}
+							>{option.text}</ListItemStandard>
+						))}
+					</>))}
+				</List>
+			) : ( // else
+				<List
+					onItemClick={this._changeCurrentFilter} // list item to drill down into the second-level menu - use click
+					accessibleNameRef={`${this._id}-label`}
+				>
+					<ListItemGroup headerText={this._filterByLabel}>
+						{this.filterItems.map(item => (
+							<ListItemStandard
+								class="ui5-vsd-filterItemList"
+								// selected={item.selected} TODO
+								additionalText={item.additionalText}
+								accessibleName={this._selectedFiltersLabel(item)}
+							>{item.text}</ListItemStandard>
+						))}
+					</ListItemGroup>
+				</List>
+			)}
+		</>
+	);
+}
+
+function ViewSettingsDialogTemplateFooter(this: ViewSettingsDialog) {
+	return (
+		<div slot="footer" class="ui5-vsd-footer">
+			<Button
+				design="Emphasized"
+				onClick={this._confirmSettings}
+			>{this._okButtonLabel}</Button>
+			<Button
+				design="Transparent"
+				onClick={this._cancelSettings}
+			>{this._cancelButtonLabel}</Button>
+		</div>
+	);
+}
+
+export default function ViewSettingsDialogTemplate(this: ViewSettingsDialog) {
+	return (
+		<Dialog
+			preventInitialFocus={true}
+			accessibleName={this._dialogTitle}
+			onBeforeClose={this._restoreConfirmedOnEscape}
+			stretch={this._isPhone}
+			open={this.open}
+			onBeforeOpen={this.beforeDialogOpen}
+			onOpen={this.afterDialogOpen}
+			onClose={this.afterDialogClose}
+		>
+			{ViewSettingsDialogTemplateHeader.call(this)}
+			{ViewSettingsDialogTemplateContent.call(this)}
+			{ViewSettingsDialogTemplateFooter.call(this)}
+		</Dialog>
+	);
+}

package/src/WizardPopoverTemplate.tsx

@@ -0,0 +1,42 @@
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import type Wizard from "./Wizard.js";
+
+export default function WizardPopoverTemplate(this: Wizard) {
+	return (
+		<ResponsivePopover
+			horizontalAlign="Center"
+			placement="Bottom"
+			aria-label={this.actionSheetStepsText}
+			class={{
+				"ui5-wizard-responsive-popover": true,
+				"ui5-wizard-popover": !isPhone(),
+				"ui5-wizard-dialog": isPhone(),
+			}}
+			contentOnlyOnDesktop={true}
+			preventFocusRestore={true}
+			_hideHeader={true}
+		>
+			<ul class="ui5-wizard-responsive-popover-list">
+				{this._groupedTabs.map(tab =>
+					<li>
+						<Button
+							icon={tab.icon}
+							disabled={tab.disabled}
+							design="Transparent"
+							data-ui5-header-tab-ref-id={tab.accInfo.ariaPosinset}
+							onClick={this._onOverflowStepButtonClick}
+						>{tab.titleText}</Button>
+					</li>
+				)}
+			</ul>
+			<div slot="footer" class="ui5-responsive-popover-footer">
+				<Button
+					design="Transparent"
+					onClick={this._closeRespPopover}
+				>{this._dialogCancelButtonText}</Button>
+			</div>
+		</ResponsivePopover>
+	);
+}

package/src/WizardTabTemplate.tsx

@@ -0,0 +1,39 @@
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import type WizardTab from "./WizardTab.js";
+
+export default function WizardTabTemplate(this: WizardTab) {
+	return (
+		<div class="ui5-wiz-step-root"
+			role="listitem"
+			tabIndex={this.effectiveTabIndex}
+			aria-current={this.accInfo.ariaCurrent}
+			aria-setsize={this.accInfo.ariaSetsize}
+			aria-posinset={this.accInfo.ariaPosinset}
+			aria-label={this.accInfo.ariaLabel}
+			onClick={this._onclick}
+			onKeyUp={this._onkeyup}
+			onFocusIn={this._onfocusin}
+		>
+			<div class="ui5-wiz-step-main">
+				<div class="ui5-wiz-step-icon-circle">
+					{this.icon ? (
+						<Icon class="ui5-wiz-step-icon" mode="Decorative" name={this.icon}/>
+					) : (
+						<span class="ui5-wiz-step-number">{this.number}</span>
+					)}
+				</div>
+				{this.hasTexts && (
+					<div class="ui5-wiz-step-texts">
+						<div class="ui5-wiz-step-title-text">{this.titleText}</div>
+						{ this.subtitleText &&
+							<div class="ui5-wiz-step-subtitle-text">{this.subtitleText}</div>
+						}
+					</div>
+				)}
+			</div>
+			{!this.hideSeparator && (
+				<div class="ui5-wiz-step-hr"></div>
+			)}
+		</div>
+	);
+}

package/src/WizardTemplate.tsx

@@ -0,0 +1,75 @@
+import type Wizard from "./Wizard.js";
+import WizardTab from "./WizardTab.js";
+import WizardPopoverTemplate from "./WizardPopoverTemplate.js";
+
+export default function WizardTemplate(this: Wizard) {
+	return (<>
+		<div class="ui5-wiz-root"
+			 aria-label={this.ariaLabelText}
+			 role="region"
+		>
+			<nav class="ui5-wiz-nav"
+				 part="navigator"
+				 aria-label={this.navAriaLabelText}
+				 tabIndex={-1}
+			>
+				<div class="ui5-wiz-nav-list"
+					 role="list"
+					 aria-label={this.listAriaLabelText}
+					 aria-describedby="wiz-nav-descr"
+					 aria-controls={`${this._id}-wiz-content`}
+				>
+					{this._stepsInHeader.map(step =>
+						<WizardTab
+							titleText={step.titleText}
+							subtitleText={step.subtitleText}
+							icon={step.icon}
+							number={String(step.number)}
+							disabled={step.disabled}
+							selected={step.selected}
+							hideSeparator={step.hideSeparator}
+							activeSeparator={step.activeSeparator}
+							branchingSeparator={step.branchingSeparator}
+							_wizardTabAccInfo={step.accInfo}
+							data-ui5-content-ref-id={step.refStepId}
+							data-ui5-index={step.pos}
+							onSelectionChangeRequested={this.onSelectionChangeRequested}
+							onFocused={this.onStepInHeaderFocused}
+							onClick={this._onGroupedTabClick}
+							style={step.styles}
+						/>
+					)}
+				</div>
+			</nav>
+
+			<span id="wiz-nav-descr"
+				  class="ui5-hidden-text"
+				  aria-hidden="true"
+			>{this.navAriaDescribedbyText}</span>
+
+			<div id={`${this._id}-wiz-content`}
+				 class="ui5-wiz-content"
+				 onScroll={this.onScroll}
+			>
+				{this._steps.map(step =>
+					<div class={{
+						"ui5-wiz-content-item": true,
+						"ui5-wiz-content-item-stretch": step.stretch,
+						"ui5-wiz-content-item-selected": step.selected,
+					}}
+					hidden={step.disabled}
+					part="step-content"
+					aria-label={step.stepContentAriaLabel}
+					role="region"
+					data-ui5-content-item-ref-id={step._id}
+					>
+						<div class="ui5-wiz-content-item-wrapper">
+							<slot name={step._individualSlot}></slot>
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+		{WizardPopoverTemplate.call(this)}
+	</>);
+}