69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import { Component, Output, EventEmitter, Input } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
|
|
@Component({
|
|
selector: 'app-dvorak-keyboard',
|
|
standalone: true,
|
|
imports: [CommonModule],
|
|
template: `
|
|
<div class="keyboard">
|
|
<div class="keyboard-row">
|
|
<button *ngFor="let key of row1"
|
|
(click)="keyPressed.emit(key)"
|
|
class="key-button">
|
|
{{ shiftActive ? key : key.toLowerCase() }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="keyboard-row">
|
|
<button *ngFor="let key of row2"
|
|
(click)="keyPressed.emit(key)"
|
|
class="key-button">
|
|
{{ shiftActive ? key : key.toLowerCase() }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="keyboard-row">
|
|
<button *ngFor="let key of row3"
|
|
(click)="keyPressed.emit(key)"
|
|
class="key-button">
|
|
{{ shiftActive ? key : key.toLowerCase() }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="keyboard-row special-keys">
|
|
<button (click)="shiftToggled.emit()"
|
|
[class.active]="shiftActive"
|
|
class="key-button shift-key">
|
|
⇧ Shift
|
|
</button>
|
|
|
|
<button (click)="keyPressed.emit('Space')"
|
|
class="key-button space-key">
|
|
Leertaste
|
|
</button>
|
|
|
|
<button (click)="keyPressed.emit('Backspace')"
|
|
class="key-button">
|
|
⌫ Delete
|
|
</button>
|
|
|
|
<button (click)="keyPressed.emit('Enter')"
|
|
class="key-button">
|
|
↵ Enter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`,
|
|
styleUrl: '../app.component.css'
|
|
})
|
|
export class DvorakKeyboardComponent {
|
|
@Input() shiftActive = false;
|
|
@Output() keyPressed = new EventEmitter<string>();
|
|
@Output() shiftToggled = new EventEmitter<void>();
|
|
|
|
row1 = [',', '.', 'P', 'Y', 'F', 'G', 'C', 'R', 'L'];
|
|
row2 = ['A', 'O', 'E', 'U', 'I', 'D', 'H', 'T', 'N', 'S'];
|
|
row3 = ['Q', 'J', 'K', 'X', 'B', 'M', 'W', 'V', 'Z'];
|
|
}
|