Development documentation
  1. Components
  2. UppKbInputComponent

File

libs/upp-wdgt/src/components/upp-input/upp-input.ts

Description

A custom Angular component for keyboard-based input. Supports integration with Angular Forms through ControlValueAccessor. Provides custom behavior for price and number types, and supports kiosk mode.

Implements

ControlValueAccessor AfterViewInit OnChanges OnDestroy

Metadata

changeDetection ChangeDetectionStrategy.OnPush
providers { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UppKbInputComponent), multi: true }
selector upp-kb-input
styleUrls ./kb/upp-input.scss
templateUrl ./kb/upp-input.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(change: ChangeDetectorRef, platform: platformService)

Constructs an instance of UppKbInputComponent.

Parameters :
Name Type Optional Description
change ChangeDetectorRef No
  • A service to trigger manual change detection, ensuring the component reflects updates to its state.
platform platformService No
  • A service to provide platform-specific functionality, such as kiosk detection.

Inputs

autocomplete
Type : string
Default value : 'on'

Configures autocomplete behavior for the input.
disabled
Type : boolean
Default value : false

Disables the input when set to true.
kiosk
Type : boolean
Default value : true

Enables or disables kiosk mode for the input.
name
Type : string
Default value : 'none'

Name of the input control.
placeholder
Type : string
Default value : ''

Placeholder text for the input.
readonly
Type : boolean
Default value : false

Indicates if the input should be readonly.
type
Type : string
Default value : ''

Type of the input (e.g., text, number, price).
value
Type : string | null

/

Outputs

Changed
Type : EventEmitter

Emits the current value when it changes.
Focused
Type : EventEmitter

Emits an event when the input gains focus.

Methods

ngAfterViewInit
ngAfterViewInit()

Lifecycle hook. Called after the view is initialized. Configures kiosk mode and subscribes to platform changes.

Returns : void
ngOnChanges
ngOnChanges()

Lifecycle hook. Updates the component when inputs change.

Returns : void
ngOnDestroy
ngOnDestroy()

Lifecycle hook. Cleans up subscriptions on destroy.

Returns : void
onChange
onChange(event: Event)

Handles the change event for input fields, specifically designed to capture browser autocomplete changes. Unlike onInput and onKeyUp, this method will trigger when the browser's autocomplete feature populates the input field, ensuring that autocompleted values are properly processed.

The method processes the input value according to the component's type:

  • For regular text inputs, it simply updates the value
  • For price inputs, it converts the input to the correct price format
  • For number inputs, it handles decimal separators appropriately
Parameters :
Name Type Optional Description
event Event No
  • The DOM change event from the input element
Returns : void
onFocus
onFocus(value: boolean)

Handles focus events and emits uppFocus.

Parameters :
Name Type Optional Description
value boolean No

Whether the input has focus.
Returns : void
onInput
onInput(event: Event)

Handles the input event for text-like input fields (excluding price and number types). Updates the internal value (this.value) when the user modifies the input field.

Parameters :
Name Type Optional Description
event Event No
  • The input event triggered by the user.
Returns : void
OnKeyPress
OnKeyPress(key: string)

Simulates a key press for the input element.

Parameters :
Name Type Optional Description
key string No

The key to simulate.
Returns : void
onKeyUp
onKeyUp(event: KeyboardEvent)

Handles the keyup event and updates the input value based on the type.

Parameters :
Name Type Optional Description
event KeyboardEvent No

The keyboard event.
Returns : void
onKiosk
onKiosk(event: Event)

Handles changes when in kiosk mode.

Parameters :
Name Type Optional Description
event Event No

The input event.
Returns : void
OnShowPassword
OnShowPassword()

Toggles the visibility of the password input field. Changes the input type between text and password. Triggers Angular's change detection to update the UI state.

Returns : void
registerOnChange
registerOnChange(fn: any)

Registers a callback function to be called when the value changes.

Parameters :
Name Type Optional Description
fn any No

The callback function.
Returns : void
registerOnTouched
registerOnTouched(fn: any)

Registers a callback function to be called when the input is touched.

Parameters :
Name Type Optional Description
fn any No

The callback function.
Returns : void
setDisabledState
setDisabledState(isDisabled: boolean)

Sets the disabled state of the input.

Parameters :
Name Type Optional Description
isDisabled boolean No

Whether the input should be disabled.
Returns : void
SetFocus
SetFocus()

Sets focus on the input element.

Returns : void
writeValue
writeValue(value: any)

Writes a value to the component. Required by ControlValueAccessor.

Parameters :
Name Type Optional
value any No
Returns : void

Properties

Public _focus
Default value : false

Tracks if the input currently has focus.
_input
Type : any
Decorators :
@ViewChild('input', {static: false})

Reference to the native input element.
Public _kiosk
Default value : false

Indicates if the component is in kiosk mode.
Public _price
Type : string
Default value : ''
Public isDisabled
Default value : false

Internal flag indicating if the input is disabled.

Accessors

nativeElement
getnativeElement()

Native element reference for the input.

Returns : any
Price
getPrice()

Gets the formatted price value.

Returns : string
_text
get_text()

Determines the type of the input field. Returns text if the input type is password and the password visibility is toggled on. Otherwise, it returns the original input type.

Returns : string
ShowPassword
getShowPassword()

Indicates whether the password input is visible (true) or hidden (false).
value
getvalue()

/

Returns : string | null
setvalue(v: string | null)

Sets a new value for the input. This updates the internal state, triggers the onChange and onTouch callbacks, and emits the uppChanged event.

Parameters :
Name Type Optional Description
v string | null No
  • The new value to set.
Returns : void 
<div class="input-container">
    <ng-container *ngIf="type === 'price'">
        <span class="price">
            <ng-container *ngIf="_kiosk !== true">
                <input #input
                    class="form-control" 
                    type="number" 
                    [name]="name" 
                    [placeholder]="placeholder" 
                    [value]="value" 
                    [readonly]="readonly" 
                    [disabled]="disabled" 
                    [ngClass]="{ 'disabled': disabled }"
                    (input)="onInput($event)" 
                    (change)="onChange($event)"
                    (keyup)="onKeyUp($event)" 
                    (focus)="onFocus(true)" 
                    (blur)="onFocus(false)" 
                    role="presentation" 
                    [autocomplete]="autocomplete">
                <div class="label-box">
                    <div class="label" [ngClass]="{ 'placeholder': (!value && !_focus), 'focus': _focus, 'disabled': disabled }">
                        {{Price}}
                    </div>                        
                </div>
            </ng-container>
            <ng-container *ngIf="_kiosk === true">  
                <input #input 
                    uppNgkiosk 
                    class="form-control" 
                    data-kioskboard-type="price" 
                    type="text" 
                    [name]="name" 
                    [placeholder]="placeholder" 
                    [value]="_price" 
                    [readonly]="readonly" 
                    [disabled]="disabled" 
                    [ngClass]="{ 'disabled': disabled }"
                    (change)="onKiosk($event)" 
                    (focus)="onFocus(true)" 
                    (blur)="onFocus(false)" 
                    role="presentation" 
                    [autocomplete]="autocomplete">
                <div class="label-box">
                    <div class="label" [ngClass]="{ 'placeholder': (!value && !_focus), 'focus': _focus, 'disabled': disabled  }">
                        {{Price}}
                    </div>    
                </div>
            </ng-container>    
        </span>    
    </ng-container>
    <ng-container *ngIf="type !== 'price'">
        <ng-container *ngIf="_kiosk !== true">
            <input #input 
                class="form-control" 
                [type]="_text" 
                [name]="name" 
                [placeholder]="placeholder" 
                [value]="value" 
                [readonly]="readonly" 
                [disabled]="disabled" 
                [ngClass]="{ 'disabled': disabled }"
                (input)="onInput($event)"    
                (change)="onChange($event)"
                (keyup)="onKeyUp($event)" 
                (focus)="onFocus(true)" 
                (blur)="onFocus(false)" 
                role="presentation" 
                [autocomplete]="autocomplete">
        </ng-container>
        <ng-container *ngIf="_kiosk === true">
            <input *ngIf="type === 'number'" #input 
                uppNgkiosk
                class="form-control" 
                data-kioskboard-type="num" 
                type="text" 
                [name]="name" 
                [value]="value" 
                [placeholder]="placeholder" 
                [readonly]="readonly" 
                [disabled]="disabled" 
                [ngClass]="{ 'disabled': disabled }"
                (change)="onKiosk($event)" 
                (focus)="onFocus(true)" 
                (blur)="onFocus(false)" 
                role="presentation" 
                [autocomplete]="autocomplete">
            <input *ngIf="type !== 'number'" #input 
                uppNgkiosk
                class="form-control" 
                data-kioskboard-type="all" 
                data-kioskboard-specialcharacters="true" 
                [type]="_text" 
                [name]="name" 
                [value]="value" 
                [placeholder]="placeholder" 
                [readonly]="readonly" 
                [disabled]="disabled" 
                [ngClass]="{ 'disabled': disabled }"
                (change)="onKiosk($event)" 
                (focus)="onFocus(true)" 
                (blur)="onFocus(false)" 
                role="presentation" 
                [autocomplete]="autocomplete">
        </ng-container>  
    </ng-container>    
    
    <div *ngIf="type === 'password'" class="password-toggle" tabindex="0" (click)="OnShowPassword()" (keydown.enter)="OnShowPassword()" (keydown.space)="OnShowPassword()" role="button" aria-label="Toggle password visibility">
        <ion-icon [hidden]="ShowPassword === true" color="medium" name="eye-outline"></ion-icon>
        <ion-icon [hidden]="ShowPassword !== true" color="medium" name="eye-off-outline" x></ion-icon>
    </div>    
</div>

./kb/upp-input.scss 

/* The animation code */
@keyframes inputcursor {
    0%    { border-right: 1px solid white; }
    50%   { border-right: 1px solid transparent; }
    100%  { border-right: 1px solid white; }
}

[hidden] {
    display: none !important;
}

:host {
    width: 100%;
    display: inline-block;

    ::placeholder {
        color: var(--upp-input-placeholder, grey);
        opacity: 0.75;
    }

    input, input:focus, input:active {
        width: 100%;
        background: var(--upp-input-background, rgba(var(--ion-color-dark-rgb), .1));
        border: none;
        outline: none;
        text-align: inherit;

        padding: 6px 10px;
        border-radius: 5px;

        &:disabled{
            opacity: .6;
        }
    }
           
    input[type=number], 
    input::-webkit-inner-spin-button,
    input::-webkit-outer-spin-button {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        margin: 0;
    }
      
    .price {
        position: relative;
        flex-grow: 1;

        input {
            opacity: 0 !important;
            z-index: 2;
        }

        .label-box {
            position: absolute;
            height: 100%;
            top: 0px;
            left: 0px;
            right: 0px;
            text-align: inherit;
            padding: 5px 10px;
            background: var(--upp-input-background, rgba(var(--ion-color-dark-rgb), .1));
            border-radius: 8px;
            pointer-events: none;
            z-index: 1;

            .label {
                width: fit-content;
                padding-right: 1px;
    
                animation-name: none;
                &.focus {
                    animation-name: inputcursor;
                    animation-duration: 1.5s;            
                    animation-iteration-count: infinite;
                }
    
                &.placeholder {
                    color: var(--ion-color-dark);
                    opacity: .4;
                }
    
                &.disabled {
                    opacity: .6;
                }
            }    
        }
    }

    .input-container {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;

        .password-toggle {
            position: absolute;
            margin-top: 2px;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }    
    }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""