Development documentation
  1. Components
  2. UiKioskBoardComponent

File

libs/upp-base/src/modules/kiosk.ts

Description

The UiKioskBoard component represents a virtual keyboard for touch interfaces. It manages multiple keyboard layouts, handles language changes, and processes keyboard interactions. The component supports alphanumeric and numeric layouts and can toggle between special character sets and regular character sets.

Implements

OnInit OnDestroy

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector upp-kiosk-board
styleUrls ./kiosk/ui-kiosk.scss
templateUrl ./kiosk/ui-kiosk.html

Index

Properties
Methods
Accessors

Constructor

constructor(lang: languageService, change: ChangeDetectorRef, http: HttpClient, kiosk: kioskService)

Constructor for UiKioskBoard. Injects required services.

Parameters :
Name Type Optional Description
lang languageService No
  • The language service for handling language changes.
change ChangeDetectorRef No
  • The change detector reference.
http HttpClient No
  • The HTTP client for fetching layouts.
kiosk kioskService No
  • The kiosk service for managing input.

Methods

capsLock
capsLock()

Toggles the Caps Lock state.

Returns : void
clear
clear()

Clears the current input value.

Returns : void
expand
expand()

Expands the keyboard layout.

Returns : void
hide
hide()

Hides the virtual keyboard.

Returns : void
lcompact
lcompact()

Toggles the keyboard layout to the left compact mode.

Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
Async ngOnInit
ngOnInit()
Returns : any
onKeyPress
onKeyPress(key: string)

Simulates a key press on the virtual keyboard.

Parameters :
Name Type Optional Description
key string No
  • The key to be pressed.
Returns : void
OnMouseDown
OnMouseDown(event: MouseEvent)

Prevents input focus loss when a key is pressed on the virtual keyboard.

Parameters :
Name Type Optional Description
event MouseEvent No
  • The mouse event triggered by pressing a key.
Returns : void
OnPropagate
OnPropagate()

Allows input focus loss when the return key is pressed.

Returns : void
rcompact
rcompact()

Toggles the keyboard layout to the right compact mode.

Returns : void
rowkeys
rowkeys(row: KeyboardLayoutRow)

Retrieves the keys for a given row in the layout.

Parameters :
Name Type Optional Description
row KeyboardLayoutRow No
  • The keyboard layout row.
Returns : {}

An array of keys for the row.
show
show(type: string)

Displays the keyboard for the specified type.

Parameters :
Name Type Optional Description
type string No
  • The type of keyboard to display.
Returns : void
specChar
specChar()

Toggles the special character mode.

Returns : void

Properties

Public toL
Default value : false
Public toR
Default value : false

Accessors

type
gettype()

Gets the current keyboard type.

Returns : string | null
settype(value: string | null)

Sets the keyboard type and triggers change detection.

Parameters :
Name Type Optional Description
value string | null No
  • The keyboard type ('num', 'price', or null).
Returns : void
capslock
getcapslock()

Gets the state of the Caps Lock key.

Returns : boolean
setcapslock(value: boolean)

Sets the Caps Lock state and triggers change detection.

Parameters :
Name Type Optional Description
value boolean No
  • The new Caps Lock state.
Returns : void
specchar
getspecchar()

Gets the state of the special character toggle.

Returns : boolean
setspecchar(value: boolean)

Sets the special character state and triggers change detection.

Parameters :
Name Type Optional Description
value boolean No
  • The new special character state.
Returns : void
switch
getswitch()

Gets the keyboard switch label based on the special character state.

Returns : string
keylayout
getkeylayout()

Gets the current keyboard layout based on the type and special character state.

Returns : KeyboardLayout
setkeylayout(value: KeyboardLayout)

Sets a new keyboard layout and adds a break line key to the last row.

Parameters :
Name Type Optional Description
value KeyboardLayout No
  • The new keyboard layout.
Returns : void
keywidth
getkeywidth()

Computes the width of each key based on the layout with the most keys.
inputValue
getinputValue()

Formats the current input value based on the keyboard type.

 
<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>

./kiosk/ui-kiosk.scss 

$keyboard-background: rgba(var(--ion-color-light-rgb), 0.7); 
$border-color: var(--ion-color-dark);
$background-color: var(--ion-color-light-tint);
$background-color-active: var(--ion-color-dark-shade);
$key-shadow: 0 2px 4px rgba(var(--ion-color-light-rgb), 0.2);
$key-font-color: var(--ion-color-dark);
$space-key-width: 20%; 

%circle-button {
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;

    height: 36px;
    width: 36px;

    border-radius: 50%;
    border: 2px solid $border-color;
    background: var(--ion-color-dark-contrast);
    color: var(--ion-color-dark);
  }

.keyboard-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    max-height: 0px;
    pointer-events: none;;
    overflow: hidden;
    transition: max-height ease-out 0.3s;

    &.visible {
        max-height: 100vh;
        pointer-events: auto;
    }  
}

.keyboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: $keyboard-background;

    padding: 10px 0;
    border-top: 2px solid $border-color;
    margin-top: 18px;
    background-color: $keyboard-background;

    transition: all linear 0.2s;
    &.lcompact{
        padding-right: 450px;
    }

    &.rcompact{
        padding-left: 450px;        
    }

    .keyboard-close {
        @extend %circle-button;

        position: absolute;
        top: 0px;
        right: 8px;

        i {
            font-size: 26px;
        }
    }  

    .keyboard-display {
        position: absolute;
        top: 0px;
        right: 70px;
        
        display: flex;
    }

    .keyboard-input {
        position: absolute;
        top: 0px;
        left: 8px;

        min-width: 20vw;
        width: fit-content;
        max-width: calc(100vw - 100px);  

        display: flex;
        padding: 0px 10px;
        height: 36px;

        background: transparent;

        .keyboard-value {
            display: flex;
            flex-grow: 1;
            justify-content: center;
            align-items: center;

            max-width: calc(100% - 50px);            
            text-overflow: ellipsis;
            overflow: hidden;
            border: 2px solid $border-color;
            border-radius: 18px;    

            background: var(--ion-color-dark-contrast);
            color: var(--ion-color-dark);
        }
    }

    .keyboard-compact, .keyboard-clear  {
        @extend %circle-button;
        margin-left: 8px;

        i {
            font-size: 20px;
        }    
    }

    .keyboard-row {
        display: flex;
        width: 100%;
        justify-content: center;
    }
  
    .keyboard-key {
        cursor: pointer;

        position: relative;
        display: flex;
        flex: 0 0 var(--key-width);
        align-items: center;
        justify-content: center;
        text-align: center;

        height: 60px;
        margin: 2px;
        border: 1px solid $border-color;
        background-color: $background-color;
        user-select: none;

        border-radius: 4px;
        box-shadow: $key-shadow;
        font-size: 16px;
        font-weight: bold;
        color: $key-font-color;
        transition: all linear 0.2s;

        &:active {
            background-color: $background-color-active;
            transform: scale(0.95);
        }
    }
  
    .caps-lock {
        i {
            font-size: 30px;
        }
  
        .caps-lock-led {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: grey;
  
            &.active {
                background-color: green;
            }
        }
    }
    
    .space-key {
        flex-grow: 1;
    }
  
    .return {
        color: var(--ion-color-success);        
        border: 1px solid var(--ion-color-success);

        i {
            font-size: 30px;
        }
    }

    .backspace {
        i {
            font-size: 30px;
        }
    }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""