File

libs/upp-wdgt/src/components/upp-textarea/upp-textarea.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 OnDestroy

Metadata

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

Index

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 : 'do-not-autofill'

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.

rows

Type : number

Default value : 1

Number of rows for the text area

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

ngOnDestroy

ngOnDestroy()

Lifecycle hook. Cleans up subscriptions on destroy.

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

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 isDisabled

Default value : false

Internal flag indicating if the input is disabled.

Accessors

nativeElement

getnativeElement()

Native element reference for the input.

Returns : any

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="_kiosk !== true">
        <textarea 
            class="form-control" 
            [rows]="rows"
            [name]="name" 
            [placeholder]="placeholder" 
            [value]="value" 
            [readonly]="readonly" 
            [disabled]="disabled" 
            [ngClass]="{ 'disabled': disabled }"
            (input)="onInput($event)"             
            (keyup)="onKeyUp($event)" 
            (focus)="onFocus(true)" 
            (blur)="onFocus(false)" 
            role="presentation" 
            [autocomplete]="autocomplete"
        ></textarea>
    </ng-container>
    <ng-container *ngIf="(_kiosk === true)">  
        <textarea 
            uppNgkiosk
            class="form-control"             
            data-kioskboard-type="all" 
            data-kioskboard-specialcharacters="true" 
            [rows]="rows"
            [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"
        ></textarea>
    </ng-container>
</div>

./kb/upp-textarea.scss

:host {
    textarea, textarea:focus, textarea:active {
        padding: 5px 8px 5px 8px;
        margin: 5px 0px 5px 0px;
        width: 100%;
        border: none;
        background: var(--upp-input-background, rgba(var(--ion-color-dark-rgb), .1));
        border: none;
        border-radius: 5px;
        outline: none;
        resize: none;
        text-align: inherit;
    }
}

Legend

Html element

Component

Html element with directive

File

Description

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Accessors

Constructor

Inputs

Outputs

Methods

Properties

Accessors

results matching ""

No results matching ""