@ui5/webcomponents 0.0.0-f42e7c18c → 0.0.0-f589d25f5

package/src/ColorPickerTemplate.tsx

@@ -2,6 +2,7 @@ import type ColorPicker from "./ColorPicker.js";
 import Label from "./Label.js";
 import Slider from "./Slider.js";
 import Input from "./Input.js";
+import Button from "./Button.js";
 
 export default function ColorPickerTemplate(this: ColorPicker) {
 	return (
@@ -46,7 +47,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 						value={this._alpha}
 						accessibleName={this.alphaSliderLabel}
 						showTooltip={true}
-						onInput={this._handleAlphaInputFromSlider}
+						onInput={this._handleAlphaInput}
 					/>
 				}
 			</div>
@@ -57,7 +58,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 					<span class="ui5-color-picker-color">
 						<div
 							class="ui5-color-picker-color-inner"
-							style={{ "background-color": `rgba(${this._value.r}, ${this._value.g}, ${this._value.b}, ${this._alpha})` }}
+							style={{ "background-color": this._colorValue.toRGBString() }}
 						></div>
 					</span>
 				</div>
@@ -66,7 +67,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 					<Label>Hex</Label>
 					<Input
 						class="ui5-color-picker-hex-input"
-						value={this.hex}
+						value={this.HEX}
 						onKeyDown={this._onkeydown}
 						accessibleName={this.hexInputLabel}
 						onChange={this._handleHEXChange}
@@ -77,50 +78,49 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 
 			{this._isDefaultPickerMode &&
 				<div
-					class="ui5-color-picker-rgb-wrapper"
-					onui5-change={this._handleRGBInputsChange}
+					class="ui5-color-channel-inputs-wrapper"
+					onui5-change={this._handleColorInputChange}
 				>
-					<div class="ui5-color-picker-rgb">
-						<Input
-							id="red"
-							class="ui5-color-picker-rgb-input"
-							disabled={this.inputsDisabled}
-							accessibleName={this.redInputLabel}
-							value={String(this._value.r)}
-						/>
-						<Label>R</Label>
-					</div>
-					<div class="ui5-color-picker-rgb">
-						<Input
-							id="green"
-							class="ui5-color-picker-rgb-input"
-							disabled={this.inputsDisabled}
-							accessibleName={this.greenInputLabel}
-							value={String(this._value.g)}
-						/>
-						<Label>G</Label>
-					</div>
-					<div class="ui5-color-picker-rgb">
-						<Input
-							id="blue"
-							class="ui5-color-picker-rgb-input"
-							disabled={this.inputsDisabled}
-							accessibleName={this.blueInputLabel}
-							value={String(this._value.b)}
-						/>
-						<Label>B</Label>
-					</div>
-					<div class="ui5-color-picker-rgb">
+					{this.colorChannelInputs.map(input =>
+						<><div class="ui5-color-channel">
+							<Input
+								id={input.id}
+								class="ui5-color-channel-input"
+								disabled={this.inputsDisabled}
+								accessibleName={input.accessibleName}
+								value={String(input.value)} />
+							<Label>{input.label}</Label>
+						</div>
+						<div class="ui5-color-channel-percentage-label">
+							{input.showPercentSymbol &&
+								<Label>%</Label>
+							}
+						</div></>
+					)}
+
+					<div class="ui5-color-channel">
 						<Input
 							id="alpha"
 							disabled={this.inputsDisabled}
-							class="ui5-color-picker-rgb-input"
+							class="ui5-color-channel-input"
 							value={String(this._alpha)}
 							accessibleName={this.alphaInputLabel}
 							onChange={this._handleAlphaChange}
+							onInput={this._handleAlphaInput}
 						/>
 						<Label>A</Label>
 					</div>
+
+					<div>
+						<Button
+							class="ui5-color-channel-toggle"
+							id="toggle-picker-mode"
+							icon="expand"
+							design="Transparent"
+							tooltip={this.toggleModeTooltip}
+							onClick={this._togglePickerMode}
+						/>
+					</div>
 				</div>
 			}
 		</section>

package/src/ComboBoxItemGroupTemplate.tsx

@@ -1,8 +1,8 @@
-import ListItemGroupTemplate from "./ListItemGroupTemplate.js";
+import ListBoxItemGroupTemplate from "./ListBoxItemGroupTemplate.js";
 import type ComboBoxItemGroup from "./ComboBoxItemGroup.js";
 
 export default function ComboBoxItemGroupTemplate(this: ComboBoxItemGroup) {
-	return [ListItemGroupTemplate.call(this, { items })];
+	return [ListBoxItemGroupTemplate.call(this, { items })];
 }
 
 function items(this: ComboBoxItemGroup) {

package/src/ComboBoxItemTemplate.tsx

@@ -9,7 +9,7 @@ function listItemContent(this: ComboBoxItem) {
 	return (
 		<div part="content" id="content" class="ui5-li-content">
 			<div class="ui5-li-text-wrapper">
-				{ this.text && <span part="title" className="ui5-li-title" dangerouslySetInnerHTML={{ __html: this.text }}></span> }
+				{ this.text && <span part="title" className="ui5-li-title">{this.text}</span> }
 				{ this.additionalText && <span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span> }
 			</div>
 		</div>

package/src/ComboBoxPopoverTemplate.tsx

@@ -2,12 +2,12 @@ import Icon from "./Icon.js";
 import Button from "./Button.js";
 import List from "./List.js";
 import Input from "./Input.js";
+import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import BusyIndicator from "./BusyIndicator.js";
 import SuggestionItem from "./SuggestionItem.js";
 import type ComboBox from "./ComboBox.js";
-import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
 
 export default function ComboBoxPopoverTemplate(this: ComboBox) {
 	return (
@@ -38,13 +38,6 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 					<div slot="header" class="ui5-responsive-popover-header">
 						<div class="row">
 							<span>{this._headerTitleText}</span>
-							<Button
-								class="ui5-responsive-popover-close-btn"
-								icon={declineIcon}
-								design="Transparent"
-								onClick={this._closeRespPopover}
-							>
-							</Button>
 						</div>
 
 						<div class="row">
@@ -77,7 +70,6 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 					slot="header"
 					class={{
 						"ui5-responsive-popover-header": true,
-						"ui5-responsive-popover-header--focused": this._isValueStateFocused,
 						...this.classes.popoverValueState,
 					}}
 					style={this.styles.suggestionPopoverHeader}
@@ -87,6 +79,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				</div>
 				}
 
+				{!!this._filteredItems.length &&
 				<List
 					class="ui5-combobox-items-list"
 					separators="None"
@@ -98,13 +91,21 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				>
 					{ this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
 				</List>
+				}
 
 				{this._isPhone &&
 			<div slot="footer" class="ui5-responsive-popover-footer">
 				<Button
+					design="Emphasized"
+					onClick={this._closeRespPopover}
+				>{this._dialogOkButtonText}</Button>
+				<Button
+					class="ui5-responsive-popover-close-btn"
 					design="Transparent"
 					onClick={this._closeRespPopover}
-				>OK</Button>
+				>
+					{this._dialogCancelButtonText}
+				</Button>
 			</div>
 				}
 			</ResponsivePopover>
@@ -116,14 +117,14 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 			hideArrow={true}
 			tabindex={-1}
 			class="ui5-valuestatemessage-popover"
-			horizontalAlign={this._valueStatePopoverHorizontalAlign}
+			horizontalAlign={PopoverHorizontalAlign.Start}
 			placement="Bottom"
 			opener={this}
 			open={this.valueStateOpen}
 			onClose={this._handleValueStatePopoverAfterClose}
 			onFocusOut={this._handleValueStatePopoverFocusout}
 		>
-			<div slot="header" class={this.classes.popoverValueState} style={this.styles.popoverHeader}>
+			<div slot="header" class={this.classes.popoverValueState}>
 				<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}/>
 				{ valueStateMessage.call(this) }
 			</div>
@@ -135,6 +136,8 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 
 function valueStateMessage(this: ComboBox) {
 	return (
-		<> { this.shouldDisplayDefaultValueStateMessage ? <>{this.valueStateDefaultText}</> : <slot name="valueStateMessage"></slot> } </>
+		<>
+			{ this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot> }
+		</>
 	);
 }

package/src/ComboBoxTemplate.tsx

@@ -11,6 +11,9 @@ export default function ComboBoxTemplate(this: ComboBox) {
 				{this.hasValueState &&
 				<span id="value-state-description" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
 				}
+				{this.linksInAriaValueStateHiddenText.length > 0 &&
+						<span id="hiddenText-value-state-link-shortcut" class="ui5-hidden-text">{this.valueStateLinksShortcutsTextAcc}</span>
+				}
 
 				<input id="ui5-combobox-input"
 					value={this.value}
@@ -31,7 +34,7 @@ export default function ComboBoxTemplate(this: ComboBox) {
 					role="combobox"
 					aria-haspopup="dialog"
 					aria-autocomplete="both"
-					aria-describedby="value-state-description"
+					aria-describedby={this.ariaDescribedByText}
 					aria-label={this.ariaLabelText}
 					aria-required={this.required}
 					aria-controls={this.responsivePopoverId}

package/src/DatePickerInputTemplate.tsx

@@ -1,6 +1,6 @@
 import type DatePicker from "./DatePicker.js";
+import DateTimeInput from "./DateTimeInput.js";
 import Icon from "./Icon.js";
-import Input from "./Input.js";
 
 export default function DatePickerInputTemplate(this: DatePicker) {
 	return (
@@ -10,25 +10,26 @@ export default function DatePickerInputTemplate(this: DatePicker) {
 				width: "100%",
 			}}
 		>
-			<Input
+			<DateTimeInput
 				data-sap-focus-ref
 				id={`${this._id}-inner`}
 				class="ui5-date-picker-input"
 				placeholder={this._placeholder}
 				type={this.type}
-				value={this.value}
+				value={this.displayValue}
 				disabled={this.disabled}
 				required={this.required}
 				readonly={this.readonly}
 				valueState={this.valueState}
 				_inputAccInfo={this.accInfo}
+				_shouldOpenValueStatePopover={!this.open}
 				onChange={this._onInputChange}
 				onInput={this._onInputInput}
 				onSubmit={this._onInputSubmit}
 				onKeyDown={this._onkeydown}
 			>
 
-				{this.valueStateMessage.length > 0 &&
+				{!this.open && this.valueStateMessage.length > 0 &&
 					<slot name="valueStateMessage" slot="valueStateMessage"></slot>
 				}
 
@@ -48,7 +49,7 @@ export default function DatePickerInputTemplate(this: DatePicker) {
 						onClick={this._togglePicker}
 					/>
 				}
-			</Input>
+			</DateTimeInput>
 		</div>
 	);
 }

package/src/DatePickerPopoverTemplate.tsx

@@ -1,9 +1,16 @@
 import type DatePicker from "./DatePicker.js";
 import Button from "./Button.js";
 import Calendar from "./Calendar.js";
+import Icon from "./Icon.js";
 import CalendarDate from "./CalendarDate.js";
 import ResponsivePopover from "./ResponsivePopover.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import error from "@ui5/webcomponents-icons/dist/error.js";
+import alert from "@ui5/webcomponents-icons/dist/alert.js";
+import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import information from "@ui5/webcomponents-icons/dist/information.js";
 
 type TemplateHook = () => void;
 
@@ -15,6 +22,7 @@ export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { he
 	return (
 		<ResponsivePopover
 			id={`${this._id}-responsive-popover`}
+			class="ui5-date-picker-popover"
 			opener={this}
 			open={this.open}
 			allowTargetOverlap
@@ -30,6 +38,8 @@ export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { he
 		>
 			{ this.showHeader && header.call(this) }
 
+			{ valueStateTextHeader.call(this) }
+
 			{ content.call(this) }
 
 			{ this.showFooter && footer.call(this) }
@@ -77,4 +87,45 @@ function defaultContent(this: DatePicker) {
 	);
 }
 
+function valueStateMessage(this: DatePicker) {
+	return (
+		this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot>
+	);
+}
+
+function valueStateTextHeader(this: DatePicker) {
+	if (!this.hasValueStateText) {
+		return;
+	}
+
+	return (
+		<div
+			slot={!isPhone() ? "header" : undefined}
+			class={{
+				"ui5-popover-header": true,
+				"ui5-valuestatemessage-header": true,
+				"ui5-valuestatemessage-root": true,
+				"ui5-valuestatemessage--success": this.valueState === ValueState.Positive,
+				"ui5-valuestatemessage--error": this.valueState === ValueState.Negative,
+				"ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
+				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
+			}}
+		>
+			<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)}/>
+			{ valueStateMessage.call(this) }
+		</div>
+	);
+}
+
+function valueStateMessageInputIcon(this: DatePicker) {
+	const iconPerValueState = {
+		Negative: error,
+		Critical: alert,
+		Positive: sysEnter2,
+		Information: information,
+	};
+
+	return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+}
+
 function defaultFooter() {}

package/src/DateTimePickerTemplate.tsx

@@ -12,14 +12,14 @@ import TimeSelectionClocks from "./TimeSelectionClocks.js";
 export default function DateTimePickerTemplate(this: DateTimePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this, { header, content, footer }),
+		DatePickerPopoverTemplate.call(this, { content, footer }),
 	];
 }
 
-function header(this: DateTimePicker) {
+function content(this: DateTimePicker) {
 	return (
 		<>
-			{ this.phone &&
+			{ this._phoneView &&
 				<div class="ui5-dt-picker-header">
 					<SegmentedButton class="ui5-dt-picker-toggle-button" onSelectionChange={this._dateTimeSwitchChange}>
 						<SegmentedButtonItem data-ui5-key="Date" selected={this.showDateView}>{this.btnDateLabel}</SegmentedButtonItem>
@@ -27,57 +27,54 @@ function header(this: DateTimePicker) {
 					</SegmentedButton>
 				</div>
 			}
-		</>
-	);
-}
-
-function content(this: DateTimePicker) {
-	return (
-		<div class={{
-			"ui5-dt-picker-content": true,
-			"ui5-dt-picker-content--phone": this.phone,
-		}}>
-			<Calendar
-				class={{
-					"ui5-dt-cal": true,
-					"ui5-dt-cal--hidden": this.phone && this.showTimeView,
-					"ui5-dt-time--hidden": this.phone && this.showDateView,
-				}}
-				id={`${this._id}-calendar`}
-				primaryCalendarType={this._primaryCalendarType}
-				secondaryCalendarType={this.secondaryCalendarType}
-				formatPattern={this._formatPattern}
-				selectionMode={this._calendarSelectionMode}
-				minDate={this.minDate}
-				maxDate={this.maxDate}
-				calendarWeekNumbering={this.calendarWeekNumbering}
-				onSelectionChange={this.onSelectedDatesChange}
-				onShowMonthView={this.onHeaderShowMonthPress}
-				onShowYearView={this.onHeaderShowYearPress}
-				hideWeekNumbers={this.hideWeekNumbers}
-				_currentPicker={this._calendarCurrentPicker}
-			>
-				{this._calendarSelectedDates.map(date =>
-					<CalendarDate value={date} />
-				)}
-			</Calendar>
 
-			{ !this.phone && <span class="ui5-dt-picker-separator"></span> }
-
-			{ this.showTimeView &&
-				<TimeSelectionClocks
-					id={`${this._id}-time-sel`}
+			<div class={{
+				"ui5-dt-picker-content": true,
+				"ui5-dt-picker-content--phone": this._phoneView,
+			}}>
+				<Calendar
 					class={{
-						"ui5-dt-time": true,
-						...this.classes.dateTimeView,
+						"ui5-dt-cal": true,
+						"ui5-dt-cal--hidden": this._phoneView && this.showTimeView,
+						"ui5-dt-time--hidden": this._phoneView && this.showDateView,
 					}}
+					id={`${this._id}-calendar`}
+					primaryCalendarType={this._primaryCalendarType}
+					secondaryCalendarType={this.secondaryCalendarType}
 					formatPattern={this._formatPattern}
-					value={this._timeSelectionValue}
-					onChange={this.onTimeSelectionChange}
-					_calendarType={this._primaryCalendarType}
-				/>
-			}
-		</div>
+					selectionMode={this._calendarSelectionMode}
+					minDate={this.minDate}
+					maxDate={this.maxDate}
+					calendarWeekNumbering={this.calendarWeekNumbering}
+					onSelectionChange={this.onSelectedDatesChange}
+					onShowMonthView={this.onHeaderShowMonthPress}
+					onShowYearView={this.onHeaderShowYearPress}
+					hideWeekNumbers={this.hideWeekNumbers}
+					_currentPicker={this._calendarCurrentPicker}
+				>
+					{this._calendarSelectedDates.map(date =>
+						<CalendarDate value={date} />
+					)}
+				</Calendar>
+
+				{ !this._phoneView && <span class="ui5-dt-picker-separator"></span> }
+
+				{ this.showTimeView &&
+					<TimeSelectionClocks
+						id={`${this._id}-time-sel`}
+						class={{
+							"ui5-dt-time": true,
+							"ui5-dt-cal--hidden": this._phoneView && this.showTimeView,
+							"ui5-dt-time--hidden": this._phoneView && this.showDateView,
+						}}
+						formatPattern={this._formatPattern}
+						value={this._timeSelectionValue}
+						onChange={this.onTimeSelectionChange}
+						_calendarType={this._primaryCalendarType}
+					/>
+				}
+			</div>
+		</>
 	);
 }
 
@@ -87,7 +84,7 @@ function footer(this: DateTimePicker) {
 			slot="footer"
 			class={{
 				"ui5-dt-picker-footer": true,
-				"ui5-dt-picker-footer-time-hidden": (this.phone && this.showTimeView) || (this.phone && this.showDateView)
+				"ui5-dt-picker-footer-time-hidden": (this._phoneView && this.showTimeView) || (this._phoneView && this.showDateView)
 			}}>
 			<Button
 				id="ok"

package/src/DayPickerTemplate.tsx

@@ -15,8 +15,6 @@ export default function DayPickerTemplate(this: DayPicker) {
 			onKeyUp={this._onkeyup}
 			onClick={this._onclick}
 			onMouseOver={this._onmouseover}
-			onFocusIn={this._onfocusin}
-			onFocusOut={this._onfocusout}
 		>
 			<div id={`${this._id}-content`} class="ui5-dp-content" role="grid" aria-roledescription={this.ariaRoledescription}>
 				<div role="row" class="ui5-dp-days-names-container">
@@ -42,6 +40,7 @@ export default function DayPickerTemplate(this: DayPicker) {
 										data-sap-focus-ref={day.focusRef ? "true" : undefined}
 										data-sap-timestamp={day.timestamp}
 										role="gridcell"
+										title={day.tooltip}
 										aria-selected={day.ariaSelected}
 										aria-label={day.ariaLabel}
 										aria-disabled={day.ariaDisabled}

package/src/DialogTemplate.tsx

@@ -13,7 +13,7 @@ export default function DialogTemplate(this: Dialog) {
 
 function beforeContent(this: Dialog) {
 	return (<>
-		{this._displayHeader &&
+		{!!this._displayHeader &&
 			<header>
 				<div
 					class="ui5-popup-header-root"
@@ -36,17 +36,15 @@ function beforeContent(this: Dialog) {
 						<Title level="H1" id="ui5-popup-header-text" class="ui5-popup-header-text">{this.headerText}</Title>
 					}
 
-					{this.resizable ? <>
-						{this.draggable ?
+					{this.resizable ?
+						this.draggable ?
 							<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHeaderTextDraggableAndResizable}</span>
 							:
 							<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHeaderTextResizable}</span>
-						}
-					</> : <>
-						{this.draggable &&
+						:
+						this.draggable &&
 							<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHeaderTextDraggable}</span>
-						}
-					</>}
+					}
 				</div>
 			</header>
 		}

package/src/DynamicDateRangeInputTemplate.tsx

@@ -0,0 +1,33 @@
+import type DynamicDateRange from "./DynamicDateRange.js";
+import Icon from "./Icon.js";
+import Input from "./Input.js";
+import appointment from "@ui5/webcomponents-icons/dist/appointment-2.js";
+
+export default function DynamicDateRangeInputTemplate(this: DynamicDateRange) {
+	return (
+		<div class="ui5-dynamic-date-range-root">
+			<Input
+				data-sap-focus-ref
+				id={`${this._id}-inner`}
+				class="ui5-dynamic-date-range-input"
+				value={this.value && this.getOption(this.value?.operator)?.format(this.value)}
+				onChange={this.onInputChange}
+				onKeyDown={this.onInputKeyDown}
+			>
+				<Icon
+					id={`${this._id}-value-help`}
+					slot="icon"
+					name={appointment}
+					tabindex={-1}
+					mode={this._iconMode}
+					onClick={this._togglePicker}
+					class={{
+						"inputIcon": true,
+						"inputIcon--pressed": this.open,
+					}}
+				/>
+
+			</Input>
+		</div>
+	);
+}

package/src/DynamicDateRangePopoverTemplate.tsx

@@ -0,0 +1,77 @@
+import type DynamicDateRange from "./DynamicDateRange.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import List from "./List.js";
+import ListItemStandard from "./ListItemStandard.js";
+import Button from "./Button.js";
+import Title from "./Title.js";
+import slimArrowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import ListItemType from "./types/ListItemType.js";
+
+export default function DynamicDateRangePopoverTemplate(this: DynamicDateRange) {
+	return (
+		<ResponsivePopover
+			id={`${this._id}-responsive-popover`}
+			opener={this}
+			open={this.open}
+			allowTargetOverlap
+			placement="Bottom"
+			horizontalAlign="Start"
+			hideArrow={true}
+			_hideHeader={true}
+			onClose={this.onPopoverClose}
+			onOpen={this.onPopoverOpen}
+			onKeyDown={this.onKeyDownPopover}
+		>
+			{this._hasCurrentOptionTemplate &&
+				<div slot="header" class="ui5-ddr-header">
+					<Button
+						iconOnly={true}
+						icon={slimArrowLeft}
+						design="Transparent"
+						onClick={this.onButtonBackClick}
+						tooltip={this.tooltipNavigationIcon}>
+					</Button>
+					<Title>{this._currentOption?.text}</Title>
+				</div>
+			}
+			{!this._hasCurrentOptionTemplate ? <div class="ui5-dynamic-date-range-options">
+				<List
+					class="ui5-dynamic-date-range-options-list"
+					separators="None"
+					selectionMode="Single"
+					onItemClick={this._selectOption}
+				>
+					{this.optionsObjects.map(option => (
+						<ListItemStandard
+							selected={option.operator === this.value?.operator}
+							iconEnd={true}
+							icon={option.icon}
+							wrappingType="Normal"
+							type={option.template ? ListItemType.Navigation : ListItemType.Active}
+						>
+							{option.text}
+						</ListItemStandard>
+					))}
+				</List>
+			</div>
+				:
+				<div class="ui5-dynamic-date-range-option-container">
+					{this._currentOption?.template?.call(this)}
+					<div class="ui5-ddr-current-value">{this.currentValueText}</div>
+				</div>
+			}
+			{this._hasCurrentOptionTemplate &&
+				<div slot="footer">
+					<Button
+						design="Emphasized"
+						onClick={this._submitValue}
+					>Submit</Button>
+					<Button
+						design="Transparent"
+						onClick={this._close}
+					>Close</Button>
+				</div>
+			}
+		</ResponsivePopover>
+	);
+}