ViewSettingsDialog.hbs

<ui5-dialog
	aria-label="{{_dialogTitle}}"
	@ui5-after-open={{_focusRecentlyUsedControl}}
	@ui5-before-close={{_restoreConfirmedOnEscape}}
	?stretch={{_isPhone}}
>

	<div slot="header" class="ui5-vsd-header">
		<div class="ui5-vsd-header-container">
			<div class="ui5-vsd-header-start">
				{{#if showBackButton}}
					<ui5-button
						design="Transparent"
						icon="nav-back"
						class="ui5-vsd-back-button"
						@click="{{_navigateToFilters}}"
					></ui5-button>
				{{/if}}
				<ui5-title class="ui5-vsd-title" id="{{_id}}-label">{{_title}}</ui5-title>
			</div>
			<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
									?selected="{{isModeSort}}"
									icon="sort"
									mode="Sort"
								></ui5-segmented-button-item>
								<ui5-segmented-button-item
									?selected="{{isModeFilter}}"
									icon="filter"
									mode="Filter"
								></ui5-segmented-button-item>
						</ui5-segmented-button>
					</div>
				</div>
			{{/if}}
		{{/unless}}
	</div>
	<div class="ui5-vsd-content" ?expand-content="{{expandContent}}">
		{{#if shouldBuildSort}}
			{{#if isModeSort}}
				<div class="ui5-vsd-sort">
					<ui5-list
						selection-mode="SingleStart"
						@ui5-item-click="{{_onSortOrderChange}}"
						sort-order
						accessible-name-ref="{{_id}}-label">
						<ui5-li-group header-text="{{_sortOrderLabel}}">
						{{#each _currentSettings.sortOrder}}
							<ui5-li
								?selected="{{this.selected}}"
							>{{this.text}}</ui5-li>
						{{/each}}
						</ui5-li-group>
					</ui5-list>
					<ui5-list
						selection-mode="SingleStart"
						@ui5-item-click={{_onSortByChange}}
						sort-by>
						<ui5-li-group header-text="{{_sortByLabel}}">
						{{#each _currentSettings.sortBy}}
							<ui5-li data-ui5-external-action-item-index="{{@index}}" ?selected="{{this.selected}}">{{this.text}}</ui5-li>
						{{/each}}
						</ui5-li-group>
					</ui5-list>
				</div>
			{{/if}}
		{{/if}}

		{{#if shouldBuildFilter}}
			{{#if isModeFilter}}
				{{#if _filterStepTwo}}
					<ui5-list
						accessible-name-ref="{{_id}}-label"
						selection-mode="Multiple"
						@ui5-item-click="{{_handleFilterValueItemClick}}"
					>
						{{#each _currentSettings.filters}}
							{{#if this.selected}}
								{{#each this.filterOptions}}
									<ui5-li ?selected={{this.selected}}>{{this.text}}</ui5-li>
								{{/each}}
							{{/if}}
						{{/each}}
					</ui5-list>
				{{else}}
					<ui5-list @ui5-item-click="{{_changeCurrentFilter}}" accessible-name-ref="{{_id}}-label">
						<ui5-li-group header-text="{{_filterByLabel}}">
						{{#each filterItems}}
							<ui5-li class="ui5-vsd-filterItemList" ?selected={{this.selected}} additional-text={{this.additionalText}}>
								{{this.text}}
							</ui5-li>
						{{/each}}
						</ui5-li-group>
					</ui5-list>
				{{/if}}
			{{/if}}
		{{/if}}
	</div>

	<div slot="footer" class="ui5-vsd-footer">
		<ui5-button
			design="Emphasized"
			@click="{{_confirmSettings}}"
		>{{_okButtonLabel}}</ui5-button>
		<ui5-button
			design="Transparent"
			@click="{{_cancelSettings}}"
		>{{_cancelButtonLabel}}</ui5-button>
	</div>

</ui5-dialog>