#61

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

@@ -21,6 +21,50 @@
 			<mat-icon aria-hidden="true">add</mat-icon>
 			{{ tr().userInput.addVacationDay }}
 		</button>
+		<div class="declaration-controls" [class.is-active]="declarationEntry()">
+			<button
+				mat-button
+				type="button"
+				class="declaration-entry-toggle"
+				[attr.aria-pressed]="declarationEntry()"
+				(click)="declarationEntry.set(!declarationEntry())"
+			>
+				<mat-icon aria-hidden="true">{{
+					declarationEntry() ? 'check_circle' : 'edit_calendar'
+				}}</mat-icon>
+				{{ tr().bookedDays.enter }}
+			</button>
+			@if (declarationEntry()) {
+				<div class="declaration-types" role="group" [attr.aria-label]="tr().userInput.type">
+					@for (type of declaredTypes; track type) {
+						<button
+							mat-stroked-button
+							type="button"
+							[attr.data-declared-type]="type"
+							[attr.aria-pressed]="declaredType() === type"
+							(click)="declaredType.set(type)"
+						>
+							<mat-icon class="declaration-type-check" aria-hidden="true"
+								>check</mat-icon
+							>
+							{{ type === 'cp' ? 'CP' : translationService.getDayTypeLabel(type) }}
+						</button>
+					}
+					<button
+						mat-stroked-button
+						type="button"
+						data-declaration-erase
+						[attr.aria-pressed]="declaredType() === null"
+						(click)="declaredType.set(null)"
+					>
+						<mat-icon aria-hidden="true">{{
+							declaredType() === null ? 'check' : 'backspace'
+						}}</mat-icon>
+						{{ tr().bookedDays.erase }}
+					</button>
+				</div>
+			}
+		</div>
 	</div>
 
 	<app-rules-panel></app-rules-panel>