All files / modules/kiosk ui-kiosk.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="keyboard-box" [ngClass]="{ 'visible': (type !== null) }" (mousedown)="OnMouseDown($event)">
    <div class="keyboard" [style.--key-width]="keywidth" [ngClass]="{'lcompact': toL, 'rcompact': toR}">
        <div class="keyboard-close" (mousedown)="OnPropagate()" (click)="hide()" (keydown.enter)="hide()" tabindex="0" aria-label="Close keyboard">
            <i class="fa-solid fa-xmark"></i>
        </div>
        <div class="keyboard-display">
            <div class="keyboard-compact" (click)="lcompact()" (keydown.enter)="lcompact()" tabindex="0" aria-label="Compact Left">
                <i class="fa-solid fa-angles-left"></i>
            </div>
            <div class="keyboard-compact" (click)="expand()" (keydown.enter)="expand()" tabindex="0" aria-label="Expand">
                <i class="fa-solid fa-arrows-left-right"></i>
            </div>
            <div class="keyboard-compact" (click)="rcompact()" (keydown.enter)="rcompact()" tabindex="0" aria-label="Compact Right">
                <i class="fa-solid fa-angles-right"></i> 
            </div>
        </div>
 
        <div class="keyboard-input" [hidden]="!inputValue || (inputValue.length === 0) || (type === 'password')">
            <div class="keyboard-value">
                {{inputValue}}
            </div>
 
            <div class="keyboard-clear" (click)="clear()" (keydown.enter)="clear()" tabindex="0" aria-label="Clear input">
                <i class="fa-regular fa-trash-can"></i>
            </div>
        </div>
 
        <ng-container *ngIf="(type === 'all') || (type === 'password')">
            <div style="clear:both; height: 15px;"></div>
            <div class="keyboard-row" [hidden]="specchar">
                <span *ngFor="let key of [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '0' ]" class="keyboard-key" (click)="onKeyPress(key)" (keydown.enter)="onKeyPress(key)" tabindex="0" [attr.aria-label]="'Key ' + key">
                    {{ key }}
                </span>
            </div>
    
            <!-- DEFINED KEYS -->
            <div style="clear:both; height: 10px;"></div>
            <div *ngFor="let row of keylayout" class="keyboard-row">
                <ng-container *ngFor="let key of rowkeys(row)">
                    <span *ngIf="key !== 'BR'" class="keyboard-key" (click)="onKeyPress(key)" (keydown.enter)="onKeyPress(key)" tabindex="0" [attr.aria-label]="'Key ' + key">
                        {{ key }}
                    </span>    
                    <span *ngIf="key === 'BR'" class="keyboard-key" (click)="onKeyPress('breakline')" (keydown.enter)="onKeyPress('breakline')" tabindex="0" aria-label="Break line">
                        <i class="fa-regular fa-circle-left"></i>
                    </span>    
                </ng-container>
            </div>
        
            <!-- CONTROL KEYS -->
            <div style="clear:both; height: 10px;"></div>
            <div class="keyboard-row">
                <div class="keyboard-key caps-lock" (click)="capsLock()" (keydown.enter)="capsLock()" tabindex="0" aria-label="Caps Lock">
                    <i class="fa-regular fa-circle-up"></i>
                    <span class="caps-lock-led" [ngClass]="{ 'active': capslock }"></span>
                </div>
                <div class="keyboard-key special-characters" (click)="specChar()" (keydown.enter)="specChar()" tabindex="0" aria-label="Toggle special characters">
                    {{ switch }}
                </div>
                <div class="keyboard-key space-key" (click)="onKeyPress(' ')" (keydown.enter)="onKeyPress(' ')" tabindex="0" aria-label="Space">
                    <!-- this is the space key -->
                </div>
                <div class="keyboard-key return" (mousedown)="OnPropagate()" (click)="hide()" (keydown.enter)="hide()" tabindex="0" aria-label="Return">
                    <i class="fa-regular fa-circle-check"></i>
                </div>
                <div class="keyboard-key backspace" (click)="onKeyPress('backspace')" (keydown.enter)="onKeyPress('backspace')" tabindex="0" aria-label="Backspace">
                    <i class="fas fa-backspace"></i>
                </div>
            </div>
        </ng-container>
 
        <ng-container *ngIf="(type === 'num') || (type === 'price')">
            <!-- DEFINED KEYS -->
            <div style="clear:both; height: 10px;"></div>
            <div *ngFor="let row of keylayout" class="keyboard-row">
                <ng-container *ngFor="let key of rowkeys(row)">
                    <span *ngIf="(key !== 'RT') && (key !== 'BK')" class="keyboard-key" (click)="onKeyPress(key)" (keydown.enter)="onKeyPress(key)" tabindex="0" [attr.aria-label]="'Key ' + key">
                        {{key}}
                    </span>      
                    <div *ngIf="key === 'BK'" class="keyboard-key backspace" (click)="onKeyPress('backspace')" (keydown.enter)="onKeyPress('backspace')" tabindex="0" aria-label="Backspace">
                        <i class="fas fa-backspace"></i>
                    </div>  
                    <div *ngIf="key === 'RT'" class="keyboard-key return" (mousedown)="OnPropagate()" (click)="hide()" (keydown.enter)="hide()" tabindex="0" aria-label="Return">
                        <i class="fa-regular fa-circle-check"></i>
                    </div>    
                </ng-container>      
            </div>      
        </ng-container>
    </div>
</div>