@ui5/webcomponents 0.0.0-32b659ddc → 0.0.0-33e059bcd

package/src/TimePickerClock.hbs

@@ -0,0 +1,51 @@
+<div
+	id="{{_id}}"
+	ondragstart="return false;"
+	ondrop="return false;"
+	aria-hidden="true"
+	class="{{classes.clock}}"
+>
+	<div
+		data-label="{{label}}"
+		class="ui5-tp-clock-dial"
+	>
+	</div>
+
+	<div>
+	{{#each _items}}
+		<div class="ui5-tp-clock-item" style="{{this.outerStyles}}">
+		{{#if this.item}}
+			<span class="ui5-tp-clock-dot"></span>
+			<span id="{{../_id}}-{{this.item}}" class="ui5-tp-clock-number" style="{{this.innerStyles}}">{{this.item}}</span>
+			{{#if this.innerItem}}
+			<span id="{{../_id}}-{{this.innerItem}}" class="ui5-tp-clock-number" style="{{this.innerStyles}}">{{this.innerItem}}</span>
+			{{/if}}
+		{{else unless ../hideFractions}}
+			<span class="ui5-tp-clock-mid-dot"></span>
+		{{/if}}
+		</div>
+	{{/each}}
+
+	{{#if _selectedItem.showMarker}}
+		<div class="ui5-tp-clock-item" style="{{_selectedItem.outerStyles}}" marker>
+			<div class="ui5-tp-clock-marker"></div>
+			<div class="{{_selectedItem.itemClasses}}" style="{{_selectedItem.innerStyles}}">{{_selectedItem.item}}</div>
+			<div id="{{_id}}-selected" class="{{_selectedItem.innerItemClasses}}" style="{{_selectedItem.innerStyles}}">{{_selectedItem.innerItem}}</div>
+		</div>
+	{{/if}}
+
+	</div>
+
+	<div
+		class="ui5-tp-clock-cover"
+		@touchstart="{{_onTouchStart}}"
+		@touchmove="{{_onTouchMove}}"
+		@touchend="{{_onTouchEnd}}"
+		@mousedown="{{_onTouchStart}}"
+		@mousemove="{{_onTouchMove}}"
+		@mouseup="{{_onTouchEnd}}"
+		@mouseout="{{_onMouseOut}}"
+		@mousewheel="{{_onMouseWheel}}"
+		@DOMMouseScroll="{{_onMouseWheel}}"
+	></div>
+</div>

package/src/TimePickerPopover.hbs

@@ -0,0 +1,58 @@
+<ui5-responsive-popover
+	id="{{_id}}-responsive-popover"
+	class="ui5-time-picker-popover"
+	placement-type="Bottom"
+	horizontal-align="Left"
+	allow-target-overlap
+	_hide-header
+	hide-arrow
+	@ui5-after-open="{{onResponsivePopoverAfterOpen}}"
+	@ui5-after-close="{{onResponsivePopoverAfterClose}}"
+	@wheel="{{_handleWheel}}"
+	@keydown="{{_onkeydown}}"
+>
+
+	<ui5-time-selection-clocks
+		id="{{_id}}-time-sel"
+		value="{{_timeSelectionValue}}"
+		format-pattern="{{_formatPattern}}"
+		@ui5-change="{{onTimeSelectionChange}}"
+		@close-picker="{{submitPickers}}"
+	></ui5-time-selection-clocks>
+
+	<div slot="footer" class="ui5-time-picker-footer" @keydown={{_onfooterkeydown}}>
+		<ui5-button id="submit" design="Emphasized" @click="{{submitPickers}}">{{submitButtonLabel}}</ui5-button>
+		<ui5-button id="close" design="Transparent" @click="{{closePicker}}">{{cancelButtonLabel}}</ui5-button>
+	</div>
+</ui5-responsive-popover>
+
+{{#if _isPhone}}
+<ui5-popover
+	id="{{_id}}-popover"
+	class="ui5-time-picker-inputs-popover"
+	placement-type="Bottom"
+	horizontal-align="Left"
+	allow-target-overlap
+	_hide-header
+	hide-arrow
+	@ui5-after-open="{{onInputsPopoverAfterOpen}}"
+	@ui5-after-close="{{onInputsPopoverAfterClose}}"
+	@wheel="{{_handleWheel}}"
+	@keydown="{{_onkeydown}}"
+>
+	<div class="popover-content">
+		<ui5-time-selection-inputs
+			id="{{_id}}-time-sel-inputs"
+			value="{{_timeSelectionValue}}"
+			format-pattern="{{_formatPattern}}"
+			@ui5-change="{{onTimeSelectionChange}}"
+			@close-inputs="{{submitInputsPopover}}"
+		></ui5-time-selection-inputs>
+	</div>
+
+	<div slot="footer" class="ui5-time-picker-footer" @keydown={{_onfooterkeydown}}>
+		<ui5-button id="submitInputs" design="Emphasized" @click="{{submitInputsPopover}}">{{submitButtonLabel}}</ui5-button>
+		<ui5-button id="closeInputs" design="Transparent" @click="{{closeInputsPopover}}">{{cancelButtonLabel}}</ui5-button>
+	</div>
+</ui5-popover>
+{{/if}}

package/src/TimeSelection.hbs

@@ -0,0 +1,64 @@
+<div
+		class="{{classes.root}}"
+		tabindex="-1"
+		@keydown={{_onkeydown}}
+		@focusin="{{_onfocusin}}"
+		@focusout="{{_onfocusout}}"
+>
+	{{#if _hasHoursSlider}}
+		<ui5-wheelslider
+				label = "{{hoursSliderTitle}}"
+				._items="{{hoursArray}}"
+				._density="{{_density}}"
+				data-sap-focus-ref
+				?expanded="{{_hoursSliderFocused}}"
+				value="{{_hours}}"
+				@ui5-select="{{onHoursChange}}"
+				@click="{{selectSlider}}"
+				@focusin="{{selectSlider}}"
+				data-sap-slider="hours"
+				cyclic
+		></ui5-wheelslider>
+	{{/if}}
+	{{#if _hasMinutesSlider}}
+		<ui5-wheelslider
+				label = "{{minutesSliderTitle}}"
+				._items="{{minutesArray}}"
+				._density="{{_density}}"
+				?expanded="{{_minutesSliderFocused}}"
+				value="{{_minutes}}"
+				@ui5-select="{{onMinutesChange}}"
+				@click="{{selectSlider}}"
+				@focusin="{{selectSlider}}"
+				data-sap-slider="minutes"
+				cyclic
+		></ui5-wheelslider>
+	{{/if}}
+	{{#if _hasSecondsSlider}}
+		<ui5-wheelslider
+				label = "{{secondsSliderTitle}}"
+				._items="{{secondsArray}}"
+				._density="{{_density}}"
+				?expanded="{{_secondsSliderFocused}}"
+				value="{{_seconds}}"
+				@ui5-select="{{onSecondsChange}}"
+				@click="{{selectSlider}}"
+				@focusin="{{selectSlider}}"
+				data-sap-slider="seconds"
+				cyclic
+		></ui5-wheelslider>
+	{{/if}}
+	{{#if _hasPeriodsSlider}}
+		<ui5-wheelslider
+				label = "{{periodSliderTitle}}"
+				._items="{{periodsArray}}"
+				._density="{{_density}}"
+				?expanded="{{_periodSliderFocused}}"
+				value="{{_period}}"
+				@ui5-select="{{onPeriodChange}}"
+				@click="{{selectSlider}}"
+				@focusin="{{selectSlider}}"
+				data-sap-slider="periods"
+		></ui5-wheelslider>
+	{{/if}}
+</div>

package/src/TimeSelectionClocks.hbs

@@ -0,0 +1,75 @@
+<div
+	id="{{_id}}"
+	class="ui5-time-picker-tsc-container"
+	tabindex="-1"
+	@keydown={{_onkeydown}}
+	@keyup={{_onkeyup}}
+	@focusin={{_clocksFocusIn}}
+	@focusout={{_clocksFocusOut}}
+	format-pattern="{{formatPattern}}"
+>
+	<div
+		class="ui5-time-picker-tsc-buttons"
+	>
+	{{#each _entities}}
+		{{#if this.hasSeparator}}
+		<span separator>:</span>
+		{{/if}}
+		<ui5-toggle-spin-button
+			id="{{../_id}}_button_{{this.entity}}"
+			data-sap-clock="{{this.entity}}"
+			.valueMin="{{this.attributes.min}}"
+			.valueMax="{{this.attributes.max}}"
+			.valueNow="{{this.value}}"
+			.valueText="{{this.textValue}}"
+			.accessibleName="{{this.label}}"
+			.pressed="{{this.active}}"
+			?focused="{{this.focused}}"
+			@focusin="{{../_buttonFocusIn}}"
+		>{{this.stringValue}}</ui5-toggle-spin-button>
+	{{/each}}
+	{{#if _periods.length}}
+		<span separator> </span>
+		<ui5-segmented-button
+			id="{{_id}}_AmPm"
+			@click={{_periodChange}}
+			@focusin={{_amPmFocusIn}}
+			@focusout={{_amPmFocusOut}}
+		>
+		{{#each _periods}}
+    		<ui5-segmented-button-item
+				?pressed={{this.pressed}}
+			>
+			{{this.label}}
+			</ui5-segmented-button-item>
+		{{/each}}
+		</ui5-segmented-button>
+	{{/if}}
+	</div>
+
+	<div
+		class="ui5-time-picker-tsc-clocks"
+		role="img"
+		aria-label="{{clockDialAriaLabel}}"
+	>
+	{{#each _entities}}
+		<ui5-time-picker-clock
+			id="{{../_id}}_clock_{{this.entity}}"
+			data-sap-clock="{{this.entity}}"
+			.active="{{this.active}}"
+			.label="{{this.label}}"
+			.itemMin="{{this.itemMin}}"
+			.itemMax="{{this.itemMax}}"
+			.selectedValue="{{this.value}}"
+			.displayStep="{{this.displayStep}}"
+			.valueStep="{{this.attributes.step}}"
+			.lastItemReplacement="{{this.lastItemReplacement}}"
+			.showInnerCircle="{{this.showInnerCircle}}"
+			.prependZero="{{this.prependZero}}"
+			@ui5-change={{../_clockChange}}
+		>
+		</ui5-time-picker-clock>
+	{{/each}}
+	</div>
+
+</div>

package/src/TimeSelectionInputs.hbs

@@ -0,0 +1,41 @@
+	<div
+		class="ui5-time-selection-inputs"
+		@keydown="{{_onkeydown}}"
+	>
+	{{#each _entities}}
+		{{#if this.hasSeparator}}
+		<span separator>:</span>
+		{{/if}}
+		<ui5-input
+			id="{{../_id}}_input_{{this.entity}}"
+			data-sap-input="{{this.entity}}"
+			type="{{../_numberType}}"
+			maxlength="2"
+			autocomplete="off"
+			pattern="[0-9]*"
+			inputmode="numeric"
+			class="ui5-time-selection-numeric-input"
+			.value="{{this.stringValue}}"
+			.accessibleName="{{this.label}}"
+			._nativeInputAttributes={{this.attributes}}
+			@focusin={{../_onfocusin}}
+			@focusout={{../_onfocusout}}
+			@ui5-input={{../_oninput}}
+		></ui5-input>
+	{{/each}}
+	{{#if _periods.length}}
+		<span separator> </span>
+		<ui5-segmented-button
+			id="{{_id}}_AmPm"
+			@click={{_periodChange}}
+		>
+		{{#each _periods}}
+    		<ui5-segmented-button-item
+				?pressed={{this.pressed}}
+			>
+			{{this.label}}
+			</ui5-segmented-button-item>
+		{{/each}}
+		</ui5-segmented-button>
+	{{/if}}
+	</div>

package/src/Title.hbs

@@ -0,0 +1,47 @@
+{{#if h1}}
+		<h1
+			class="ui5-title-root">
+				{{> titleInner}}
+		</h1>
+{{/if}}
+		
+{{#if h2}}
+		<h2
+			class="ui5-title-root">
+				{{> titleInner}}
+		</h2>
+{{/if}}
+
+{{#if h3}}
+		<h3
+			class="ui5-title-root">
+				{{> titleInner}}
+		</h3>
+{{/if}}
+
+{{#if h4}}
+		<h4
+			class="ui5-title-root">
+				{{> titleInner}}
+		</h4>
+{{/if}}
+
+{{#if h5}}
+		<h5
+			class="ui5-title-root">
+				{{> titleInner}}
+		</h5>
+{{/if}}
+
+{{#if h6}}
+		<h6
+			class="ui5-title-root">
+				{{> titleInner}}
+		</h6>
+{{/if}}
+
+{{#*inline "titleInner"}}
+	<span id="{{_id}}-inner">
+		<slot></slot>
+	</span>
+{{/inline}}

package/src/Toast.hbs

@@ -0,0 +1,8 @@
+{{#if domRendered}}
+	<div class="ui5-toast-root" role="alert" tabindex="{{_tabindex}}"
+	>
+		<bdi>
+			<slot></slot>
+		</bdi>
+	</div>
+{{/if}}

package/src/ToggleButton.hbs

@@ -0,0 +1,5 @@
+{{>include "./Button.hbs"}}
+
+{{#*inline "ariaPressed"}}
+	aria-pressed="{{pressed}}"
+{{/inline}}

package/src/ToggleSpinButton.hbs

@@ -0,0 +1,10 @@
+{{>include "./Button.hbs"}}
+
+{{#*inline "ariaPressed"}}
+	aria-pressed="{{pressed}}"
+	aria-valuemin="{{valueMin}}"
+	aria-valuemax="{{valueMax}}"
+	aria-valuenow="{{valueNow}}"
+	aria-valuetext="{{valueText}}"
+	role="spinbutton"
+{{/inline}}

package/src/Token.hbs

@@ -0,0 +1,29 @@
+<div
+	tabindex="{{forcedTabIndex}}"
+	@click="{{_handleSelect}}"
+	@focusin="{{_focusin}}"
+	@focusout="{{_focusout}}"
+	@keydown="{{_keydown}}"
+	class="ui5-token--wrapper"
+	role="option"
+	aria-selected="{{selected}}"
+>
+	<span class="ui5-token--text">{{this.text}}</span>
+
+	{{#unless readonly}}
+		<div
+			class="ui5-token--icon"
+		>
+			{{#if closeIcon.length}}
+				<slot name="closeIcon" @click="{{_delete}}"></slot>
+			{{else}}
+				<ui5-icon
+					name="{{iconURI}}"
+					accessible-name="{{tokenDeletableText}}"
+					show-tooltip
+					@click="{{_delete}}"
+				></ui5-icon>
+			{{/if}}
+		</div>
+	{{/unless}}
+</div>

package/src/Tokenizer.hbs

@@ -0,0 +1,26 @@
+<div class="{{classes.wrapper}}">
+	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{tokenizerLabel}}</span>
+
+	<div
+		class="{{classes.content}}"
+		@ui5-delete="{{_delete}}"
+		@click="{{_click}}"
+		@mousedown="{{_onmousedown}}"
+		@keydown="{{_onkeydown}}"
+		@ui5-select="{{onTokenSelect}}"
+		role="listbox"
+		aria-labelledby="{{_id}}-hiddenText"
+	>
+		{{#each tokens}}
+			<slot name="{{this._individualSlot}}"></slot>
+		{{/each}}
+	</div>
+
+	{{#if showNMore}}
+		<span
+			@click="{{_openMorePopoverAndFireEvent}}"
+			class="ui5-tokenizer-more-text"
+			part="n-more-text"
+		>{{_nMoreText}}</span>
+	{{/if}}
+</div>

package/src/TokenizerPopover.hbs

@@ -0,0 +1,70 @@
+<ui5-responsive-popover
+	tokenizer-popover="true"
+	style={{styles.popover}}
+	class={{classes.popover}}
+	?content-only-on-desktop="{{noValueStatePopover}}"
+	hide-arrow
+	placement-type="Bottom"
+	horizontal-align="Left"
+	@before-close={{handleBeforeClose}}
+	@before-open="{{handleBeforeOpen}}"
+>
+	{{#unless _isPhone}}
+		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
+			{{#unless noValueStatePopover}}
+				<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+					{{#each valueStateMessageText}}
+						{{this}}
+					{{/each}}
+				</div>
+			{{/unless}}
+		</div>
+	{{/unless}}
+
+	{{#if _isPhone}}
+		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
+			<div class="row" style="{{styles.popoverHeaderTitle}}">
+				<ui5-title level="H5" class="ui5-responsive-popover-header-text">{{morePopoverTitle}}</ui5-title>
+				<ui5-button
+					class="ui5-responsive-popover-close-btn"
+					icon="decline"
+					design="Transparent"
+					@click="{{closeMorePopover}}"
+				>
+				</ui5-button>
+			</div>
+		</div>
+		{{#unless noValueStatePopover}}
+			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+				{{#each valueStateMessageText}}
+					{{this}}
+				{{/each}}
+			</div>
+		{{/unless}}
+	{{/if}}
+	<ui5-list
+		class="ui5-tokenizer-list"
+		mode="Delete"
+		@ui5-item-delete={{itemDelete}}
+	>
+		{{#each _tokens}}
+			<ui5-li
+				.tokenRef={{this}}
+				wrapping-type="Normal"
+			>
+				{{this.text}}
+			</ui5-li>
+		{{/each}}
+	</ui5-list>
+	{{#if _isPhone}}
+		<div slot="footer" class="ui5-responsive-popover-footer">
+			<ui5-button
+				id="ui5-tokenizer-dialog-confirm-btn"
+				design="Emphasized"
+				@click="{{closeMorePopover}}"
+			>OK</ui5-button>
+		</div>
+	{{/if}}
+</ui5-responsive-popover>

package/src/Toolbar.hbs

@@ -0,0 +1,20 @@
+
+<div 
+	class="{{classes.items}}" 
+	role="{{accInfo.root.role}}"
+	aria-label="{{accInfo.root.accessibleName}}"
+>
+	{{#each standardItems}}
+		{{this.toolbarTemplate}}
+	{{/each}}
+
+	<ui5-button
+		aria-hidden="{{hideOverflowButton}}"
+		icon="overflow"
+		design="Transparent"
+		class="{{classes.overflowButton}}"
+		tooltip="{{accInfo.overflowButton.tooltip}}"
+		accessible-name="{{accInfo.overflowButton.accessibleName}}"
+		.accessibilityAttributes={{accInfo.overflowButton.accessibilityAttributes}}
+	></ui5-button>
+</div>

package/src/ToolbarButton.hbs

@@ -0,0 +1,19 @@
+<ui5-button
+	class="ui5-tb-button ui5-tb-item"
+	id="{{this.id}}"
+	style="{{this.styles}}"
+	icon="{{this.icon}}"
+	?icon-end="{{this.iconEnd}}"
+	tooltip="{{this.tooltip}}"
+	accessible-name="{{this.accessibleName}}"
+	accessible-name-ref="{{this.accessibleNameRef}}"
+	.accessibilityAttributes="{{this.accessibilityAttributes}}"
+	design="{{this.design}}"
+	?disabled="{{this.disabled}}"
+	?hidden="{{this.hidden}}"
+	data-ui5-external-action-item-id="{{this._id}}"
+	data-ui5-stable="{{this.stableDomRef}}"
+	.refItemId="{{this._id}}"
+>
+		{{this.text}}
+</ui5-button>

package/src/ToolbarPopover.hbs

@@ -0,0 +1,14 @@
+<ui5-popover
+	class="ui5-overflow-popover"
+	placement-type="Bottom"
+	horizontal-align="Right"
+	@ui5-after-close="{{onOverflowPopoverClosed}}"
+	@ui5-after-open="{{onOverflowPopoverOpened}}"
+	hide-arrow
+>
+	<div class="ui5-overflow-list {{classes.overflow}}">
+		{{#each overflowItems}}
+			{{this.toolbarPopoverTemplate}}
+		{{/each}}
+	</div>
+</ui5-popover>

package/src/ToolbarPopoverButton.hbs

@@ -0,0 +1,16 @@
+<ui5-button
+	icon="{{this.icon}}"
+	?icon-end="{{this.iconEnd}}"
+	accessible-name="{{this.accessibleName}}"
+	accessible-name-ref="{{this.accessibleNameRef}}"
+	.accessibilityAttributes="{{this.accessibilityAttributes}}"
+	tooltip="{{this.tooltip}}"
+	design="{{this.design}}"
+	?disabled="{{this.disabled}}"
+	?hidden="{{this.hidden}}"
+	class="ui5-tb-popover-button ui5-tb-popover-item"
+	data-ui5-external-action-item-id="{{this._id}}"
+	data-ui5-stable="{{this.stableDomRef}}"
+>
+	{{this.text}}
+</ui5-button>

package/src/ToolbarPopoverSelect.hbs

@@ -0,0 +1,12 @@
+<ui5-select 
+	class="ui5-tb-popover-item"
+	data-ui5-external-action-item-id="{{this._id}}"
+	value-state="{{this.valueState}}"
+	?disabled="{{this.disabled}}"
+	accessible-name="{{this.accessibleName}}"
+	accessible-name-ref="{{this.accessibleNameRef}}"
+>
+	{{#each options}}
+		<ui5-option ?selected="{{this.selected}}" data-ui5-external-action-item-index="{{@index}}">{{this.textContent}}</ui5-option>
+	{{/each}}
+</ui5-select>

package/src/ToolbarPopoverSeparator.hbs

@@ -0,0 +1,5 @@
+<div
+	class="ui5-tb-separator-in-overflow ui5-tb-popover-item"
+	data-ui5-external-action-item-id="{{this._id}}"
+	?visible="{{visible}}"
+></div>

package/src/ToolbarSelect.hbs

@@ -0,0 +1,13 @@
+<ui5-select 
+	class="ui5-tb-item"
+	style="{{this.styles}}"
+	data-ui5-external-action-item-id="{{this._id}}"
+	value-state="{{this.valueState}}"
+	?disabled="{{this.disabled}}"
+	accessible-name="{{this.accessibleName}}"
+	accessible-name-ref="{{this.accessibleNameRef}}"
+>
+	{{#each options}}
+		<ui5-option ?selected="{{this.selected}}" data-ui5-external-action-item-index="{{@index}}">{{this.textContent}}</ui5-option>
+	{{/each}}
+</ui5-select>

package/src/ToolbarSeparator.hbs

@@ -0,0 +1,4 @@
+<div
+	class="ui5-tb-separator ui5-tb-item"
+	data-ui5-external-action-item-id="{{this._id}}"
+></div>

package/src/ToolbarSpacer.hbs

@@ -0,0 +1,6 @@
+<div
+	class="ui5-tb-spacer ui5-tb-item"
+	style="{{this.styles}}"
+	role="separator"
+	data-ui5-external-action-item-id="{{this._id}}"
+></div>

package/src/Tree.hbs

@@ -0,0 +1,24 @@
+<ui5-tree-list
+    .mode="{{mode}}"
+    .headerText="{{headerText}}"
+    .footerText="{{footerText}}"
+    .noDataText="{{noDataText}}"
+    .accessibleRole="{{_role}}"
+    .accessibleName="{{_label}}"
+	.accessibleRoleDescription="{{accessibleRoleDescription}}"
+    @ui5-item-click="{{_onListItemClick}}"
+    @ui5-item-delete="{{_onListItemDelete}}"
+    @ui5-selection-change="{{_onListSelectionChange}}"
+    @ui5-toggle="{{_onListItemToggle}}"
+    @ui5-step-in="{{_onListItemStepIn}}"
+    @ui5-step-out="{{_onListItemStepOut}}"
+    @mouseover="{{_onListItemMouseOver}}"
+    @mouseout="{{_onListItemMouseOut}}"
+    class="ui5-tree-root"
+>
+	{{#if _hasHeader}}
+        <slot name="header" slot="header"></slot>
+	{{/if}}
+
+    <slot></slot>
+</ui5-tree-list>

package/src/TreeItem.hbs

@@ -0,0 +1,12 @@
+{{>include "./TreeItemBase.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<div class="ui5-li-text-wrapper">
+		{{#if _showTitle}}
+			<div part="title" class="ui5-li-title">{{text}}</div>
+		{{/if}}
+	</div>
+	{{#if additionalText}}
+		<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+	{{/if}}
+{{/inline}}