@ui5/webcomponents-fiori 1.2.6 → 1.4.0

package/src/ShellBarPopover.hbs

@@ -1,4 +1,5 @@
 <ui5-popover class="ui5-shellbar-menu-popover"
+	hide-arrow
 	placement-type="Bottom"
 	@ui5-before-open={{_menuPopoverBeforeOpen}}
 	@ui5-after-close={{_menuPopoverAfterClose}}

package/src/SideNavigation.hbs

@@ -4,6 +4,7 @@
 	{{#if items.length}}
 		<ui5-tree
 			id="ui5-sn-items-tree"
+			class="ui5-sn-items-tree"
 			mode="None"
 			?_minimal="{{collapsed}}"
 			_toggle-button-end

package/src/Timeline.hbs

@@ -1,6 +1,5 @@
 <div class="ui5-timeline-root"
 	@focusin={{_onfocusin}}
-	dir="{{effectiveDir}}"
 	@keydown={{_onkeydown}}>
 
 	<div class="ui5-timeline-scroll-container">

package/src/UploadCollectionItem.hbs

@@ -1,5 +1,7 @@
 {{>include "../../main/src/ListItem.hbs"}}
 
+{{#*inline "selectionElement"}}{{/inline}}
+
 {{#*inline "listItemContent"}}
 	<div class="ui5-uci-thumbnail">
 		<slot name="thumbnail"></slot>
@@ -22,7 +24,7 @@
 					{{#if fileNameClickable}}
 						<ui5-link class="ui5-uci-file-name" @click="{{_onFileNameClick}}">{{fileName}}</ui5-link>
 					{{else}}
-						<span class="ui5-uci-file-name">{{fileName}}</span>
+						<span class="ui5-uci-file-name ui5-uci-file-name-text">{{fileName}}</span>
 					{{/if}}
 				{{/if}}
 				<div class="ui5-uci-description">
@@ -90,6 +92,20 @@
 					>
 					</ui5-button>
 				{{/if}}
+
+				{{#if renderDeleteButton}}
+					<ui5-button
+							class="ui5-li-deletebtn"
+							tabindex="-1"
+							data-sap-no-tab-ref
+							id="{{_id}}-deleteSelectionElement"
+							design="Transparent"
+							icon="decline"
+							?disabled="{{disableDeleteButton}}"
+							@click="{{onDelete}}"
+							tooltip="{{deleteText}}"
+					></ui5-button>
+				{{/if}}
 			{{/if}}
 		</div>
 	</div>

package/src/ViewSettingsDialog.hbs

@@ -6,8 +6,8 @@
 >
 
 	<div slot="header" class="ui5-vsd-header">
-		<ui5-bar>
-			<div slot="startContent" class="ui5-vsd-start">
+		<div class="ui5-vsd-header-container">
+			<div class="ui5-vsd-header-start">
 				{{#if showBackButton}}
 					<ui5-button
 						design="Transparent"
@@ -15,46 +15,49 @@
 						class="ui5-vsd-back-button"
 						@click="{{_navigateToFilters}}"
 					></ui5-button>
-					<ui5-title>{{_filterByTitle}}</ui5-title>
-				{{else}}
-					<div class="ui5-vsd-bar-title">
-						<ui5-title class="ui5-vsd-title">{{_dialogTitle}}</ui5-title>
-						{{#if hasPagination}}
-							<ui5-segmented-button @ui5-selection-change="{{_handleModeChange}}">
-									<ui5-segmented-button-item
-										?pressed="{{isModeSort}}"
-										?focused="{{isModeSort}}"
-										icon="sort"
-										mode="Sort"
-									></ui5-segmented-button-item>
-									<ui5-segmented-button-item
-										?pressed="{{isModeFilter}}"
-										?focused="{{isModeFilter}}"
-										icon="filter"
-										mode="Filter"
-									></ui5-segmented-button-item>
-							</ui5-segmented-button>
-						{{/if}}
-					</div>
 				{{/if}}
+				<ui5-title class="ui5-vsd-title" id="{{_id}}-label">{{_title}}</ui5-title>
 			</div>
-			<ui5-button
-				slot="endContent"
-				design="Transparent"
-				@click="{{_resetSettings}}"
-				?disabled={{_disableResetButton}}
-				reset-button>{{_resetButtonLabel}}</ui5-button>
-		</ui5-bar>
+			<div class="ui5-vsd-header-end">
+				<ui5-button
+					design="Transparent"
+					@click="{{_resetSettings}}"
+					?disabled={{_disableResetButton}}
+					>
+						{{_resetButtonLabel}}
+				</ui5-button>
+			</div>
+		</div>
+		{{#unless showBackButton}}
+			{{#if hasPagination}}
+				<div class="ui5-vsd-sub-header-container">
+					<div class="ui5-vsd-sub-header">
+						<ui5-segmented-button @ui5-selection-change="{{_handleModeChange}}">
+								<ui5-segmented-button-item
+									?pressed="{{isModeSort}}"
+									icon="sort"
+									mode="Sort"
+								></ui5-segmented-button-item>
+								<ui5-segmented-button-item
+									?pressed="{{isModeFilter}}"
+									icon="filter"
+									mode="Filter"
+								></ui5-segmented-button-item>
+						</ui5-segmented-button>
+					</div>
+				</div>
+			{{/if}}
+		{{/unless}}
 	</div>
-
-	<div class="ui5-vsd-content">
+	<div class="ui5-vsd-content" ?expand-content="{{expandContent}}">
 		{{#if shouldBuildSort}}
 			{{#if isModeSort}}
 				<div class="ui5-vsd-sort">
 					<ui5-list
 						mode="SingleSelectBegin"
 						@ui5-item-click="{{_onSortOrderChange}}"
-						sort-order>
+						sort-order
+						accessible-name-ref="{{_id}}-label">
 						<ui5-li-groupheader>{{_sortOrderLabel}}</ui5-li-groupheader>
 						{{#each _currentSettings.sortOrder}}
 							<ui5-li
@@ -79,6 +82,7 @@
 			{{#if isModeFilter}}
 				{{#if _filterStepTwo}}
 					<ui5-list
+						accessible-name-ref="{{_id}}-label"
 						mode="MultiSelect"
 						@ui5-item-click="{{_handleFilterValueItemClick}}"
 					>
@@ -91,9 +95,13 @@
 						{{/each}}
 					</ui5-list>
 				{{else}}
-					<ui5-list @ui5-item-click="{{_changeCurrentFilter}}">
+					<ui5-list @ui5-item-click="{{_changeCurrentFilter}}" accessible-name-ref="{{_id}}-label">
 						<ui5-li-groupheader>{{_filterByLabel}}</ui5-li-groupheader>
-						<slot name="filterItems"></slot>
+						{{#each filterItems}}
+							<ui5-li class="ui5-vsd-filterItemList" ?selected={{this.selected}} additional-text={{this.additionalText}}>
+								{{this.text}}
+							</ui5-li>
+						{{/each}}
 					</ui5-list>
 				{{/if}}
 			{{/if}}

package/src/ViewSettingsDialog.js

@@ -112,6 +112,7 @@ const metadata = {
 		 */
 		_filterStepTwo: {
 			type: Boolean,
+			noAttribute: true,
 		},
 	},
 	slots: /** @lends  sap.ui.webcomponents.fiori.ViewSettingsDialog.prototype */ {
@@ -213,6 +214,7 @@ const metadata = {
  * @alias sap.ui.webcomponents.fiori.ViewSettingsDialog
  * @extends UI5Element
  * @tagname ui5-view-settings-dialog
+ * @appenddocs SortItem FilterItem FilterItemOption
  * @since 1.0.0-rc.16
  * @public
  */
@@ -312,8 +314,7 @@ class ViewSettingsDialog extends UI5Element {
 	}
 
 	get _dialogTitle() {
-		const currentModeText = this._currentMode === ViewSettingsDialogMode.Sort ? VSD_DIALOG_TITLE_SORT : VSD_FILTER_BY;
-		return ViewSettingsDialog.i18nBundle.getText(currentModeText);
+		return ViewSettingsDialog.i18nBundle.getText(VSD_DIALOG_TITLE_SORT);
 	}
 
 	get _okButtonLabel() {
@@ -356,6 +357,12 @@ class ViewSettingsDialog extends UI5Element {
 		return !this.sortDescending;
 	}
 
+	get _title() {
+		return this.showBackButton
+			? this._filterByTitle
+			: this._dialogTitle;
+	}
+
 	/**
 	 * Determines disabled state of the <code>Reset</code> button.
 	 */
@@ -434,6 +441,10 @@ class ViewSettingsDialog extends UI5Element {
 		];
 	}
 
+	get expandContent() {
+		return this._filterStepTwo || !this.hasPagination;
+	}
+
 	get isModeSort() {
 		return this._currentMode === ViewSettingsDialogMode.Sort;
 	}
@@ -476,7 +487,10 @@ class ViewSettingsDialog extends UI5Element {
 		} else {
 			this._restoreSettings(this._confirmedSettings);
 		}
-		this._dialog.show();
+
+		this._dialog.show(true);
+
+		this._dialog.querySelector("[ui5-list]").focusFirstItem();
 	}
 
 	_handleModeChange(event) {
@@ -506,8 +520,7 @@ class ViewSettingsDialog extends UI5Element {
 	_changeCurrentFilter(event) {
 		this._filterStepTwo = true;
 		this._currentSettings.filters = this._currentSettings.filters.map(filter => {
-			filter.selected = filter.text === event.detail.item.text;
-
+			filter.selected = filter.text === event.detail.item.innerText;
 			return filter;
 		});
 	}

package/src/Wizard.hbs

@@ -36,7 +36,9 @@
 				aria-label="{{stepContentAriaLabel}}"
 				role="region"
 				data-ui5-content-item-ref-id="{{_id}}">
+				<div class="ui5-wiz-content-item-wrapper">
 					<slot name="{{this._individualSlot}}"></slot>
+				</div>
 			</div>
 		{{/each}}
 	</div>