feat(ui): configure planning horizon alongside leave balances

src/app/components/user-input/user-input.html

@@ -7,6 +7,56 @@
 		>
 	</header>
 
+	<fieldset class="planning-dates">
+		<legend>{{ tr().settings.planningHorizon }}</legend>
+		<p id="planning-dates-help">{{ tr().settings.planningDatesHelp }}</p>
+		<mat-form-field appearance="outline">
+			<mat-label>{{ tr().settings.planningStart }}</mat-label>
+			<input
+				matInput
+				type="date"
+				name="planningStart"
+				required
+				#planningStart
+				[value]="calendarSettings.planningDates().start"
+				[attr.aria-invalid]="!!calendarSettings.planningHorizonError()"
+				[attr.aria-describedby]="
+					calendarSettings.planningHorizonError()
+						? 'planning-dates-help planning-dates-error'
+						: 'planning-dates-help'
+				"
+				(input)="
+					calendarSettings.setPlanningDates(planningStart.value, lastPlanningDate.value)
+				"
+			/>
+		</mat-form-field>
+		<mat-form-field appearance="outline">
+			<mat-label>{{ tr().settings.lastPlanningDate }}</mat-label>
+			<input
+				matInput
+				type="date"
+				name="lastPlanningDate"
+				required
+				#lastPlanningDate
+				[value]="calendarSettings.planningDates().lastPlanningDate"
+				[attr.aria-invalid]="!!calendarSettings.planningHorizonError()"
+				[attr.aria-describedby]="
+					calendarSettings.planningHorizonError()
+						? 'planning-dates-help planning-dates-error'
+						: 'planning-dates-help'
+				"
+				(input)="
+					calendarSettings.setPlanningDates(planningStart.value, lastPlanningDate.value)
+				"
+			/>
+		</mat-form-field>
+		@if (calendarSettings.planningHorizonError(); as error) {
+			<p id="planning-dates-error" class="validation-error" role="alert">
+				{{ tr().settings[error] }}
+			</p>
+		}
+	</fieldset>
+
 	<div class="listOfDays">
 		@for (day of daysOff; track day.id) {
 			<div class="day-input-wrapper" animate.enter="day-enter" animate.leave="day-leave">
@@ -80,7 +130,7 @@
 		[disabled]="!!calendarSettings.planningHorizonError()"
 		[attr.aria-describedby]="
 			calendarSettings.planningHorizonError()
-				? 'invalid-planning-horizon'
+				? 'planning-dates-error'
 				: 'planning-duration-estimate'
 		"
 		(click)="triggerComputation()"
@@ -88,9 +138,6 @@
 		<mat-icon aria-hidden="true">auto_awesome</mat-icon>
 		{{ tr().userInput.calculate }}
 	</button>
-	@if (calendarSettings.planningHorizonError()) {
-		<p id="invalid-planning-horizon" role="alert">{{ tr().settings.invalidHorizon }}</p>
-	}
 
 	@if (hasRemainingDays()) {
 		<mat-card class="warning-card" [class.is-informational]="!hasAtRiskDays()">