TimeSelectionClocks.hbs

<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
				?selected={{this.selected}}
			>
			{{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>