libs/upp-wdgt/src/components/upp-input/upp-input.ts
A reusable input component that supports Angular Forms integration, custom validation, and advanced UI features like kiosk mode.
ControlValueAccessor
OnInit
OnChanges
OnDestroy
| changeDetection | ChangeDetectionStrategy.OnPush |
| providers |
{
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UppInputComponent), multi: true
}
|
| selector | upp-input |
| styleUrls | ./upp-input.scss |
| templateUrl | ./upp-input.html |
Properties |
|
Methods |
Inputs |
Outputs |
Accessors |
constructor(controlContainer: ControlContainer, change: ChangeDetectorRef)
|
||||||||||||
|
Constructor for dependency injection.
Parameters :
|
| autocomplete |
Type : string
|
Default value : 'off'
|
|
Configures autocomplete behavior for the input. |
| disabled |
Type : boolean
|
Default value : false
|
|
Indicates if the input should be disabled. |
| errornfo |
Type : ErrorInfo
|
Default value : {}
|
|
A mapping of error keys to their respective error messages. |
| formControlName |
Type : string
|
Default value : ''
|
|
The name of the form control this input is bound to. |
| kiosk |
Type : boolean
|
Default value : true
|
|
Enables od disabled the kiosk input |
| placeholder |
Type : string
|
Default value : ''
|
|
Placeholder text for the input. |
| readonly |
Type : boolean
|
Default value : false
|
|
Indicates if the input should be readonly. |
| title |
Type : string
|
Default value : ''
|
|
A title to display above the input. |
| type |
Type : string
|
Default value : ''
|
|
The type of the input field (e.g., |
| value |
Type : string | null
|
|
/ |
| Changed |
Type : EventEmitter
|
|
Emits the current value when it changes. |
| Focus |
Type : EventEmitter
|
|
Emits an event when the input gains focus. |
| ngOnChanges |
ngOnChanges()
|
|
Lifecycle hook that detects changes to the input's properties.
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Lifecycle hook that cleans up resources on component destruction. Unsubscribes from form control value changes.
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Lifecycle hook that initializes the component. Sets up form control integration and initializes the value.
Returns :
void
|
| onChange |
onChange()
|
|
Handles value changes and updates the title visibility. Emits a value change event.
Returns :
void
|
| onFocus |
onFocus()
|
|
Emits a focus event when the input gains focus.
Returns :
void
|
| OnKeyPress | ||||||||
OnKeyPress(key: string)
|
||||||||
|
Handles key press events and delegates them to the input element.
Parameters :
Returns :
void
|
| registerOnChange | ||||||||
registerOnChange(fn: any)
|
||||||||
|
Registers a callback function to be called when the input value changes.
Required by
Parameters :
Returns :
void
|
| registerOnTouched | ||||||||
registerOnTouched(fn: any)
|
||||||||
|
Registers a callback function to be called when the input is touched.
Required by
Parameters :
Returns :
void
|
| SetFocus |
SetFocus()
|
|
Sets focus on the input element.
Returns :
void
|
| writeValue | ||||||
writeValue(value: string)
|
||||||
|
Writes a value to the input. Required by
Parameters :
Returns :
void
|
| _input |
Type : any
|
Decorators :
@ViewChild('input', {static: false})
|
| Public formControl |
Type : AbstractControl | null
|
Default value : null
|
| Public formGroup |
Type : FormGroup | null
|
Default value : null
|
|
optional FromGroup |
| showTitle |
getshowTitle()
|
|
Determines whether the input's title should be displayed.
Returns :
boolean
|
| viewTitle |
getviewTitle()
|
|
Returns the processed title value.
Returns :
string
|
| _disabled |
get_disabled()
|
|
Determines whether the input is disabled.
Returns :
boolean
|
| errors |
geterrors()
|
|
Determines whether the input must display error information
Returns :
boolean
|
| value | ||||||||
getvalue()
|
||||||||
|
/
Returns :
string | null
|
||||||||
setvalue(v: string | null)
|
||||||||
|
Sets a new value for the input. Updates the internal value, notifies Angular Forms, and triggers value change events.
Parameters :
Returns :
void
|
<upp-kb-input #input
[ngClass]="{ 'title': (value !== null) }"
[ngStyle]="{ 'margin-bottom': errors ? '15px' : '0px' }"
[type]="type"
[kiosk]="kiosk"
[name]="formControlName"
[placeholder]="placeholder"
[value]="value"
[readonly]="readonly"
[disabled]="_disabled"
(Focused)="onFocus()"
(Changed)="value = $event"
[autocomplete]="autocomplete">
</upp-kb-input>
<ion-label class="input-title" [ngClass]="{ 'hide': !showTitle }">{{viewTitle}}</ion-label>
<upp-er-input *ngIf="formGroup"
[form]="formGroup"
[name]="formControlName"
[value]="value"
[errornfo]="errornfo">
</upp-er-input>
./upp-input.scss
:host {
width: 100%;
upp-kb-input {
width: 100%;
padding-top: var(--upp-input-padding-top, 10px);
padding-bottom: var(--upp-input-padding-bottom, 10px);
padding-left: 0px;
padding-right: 0px;
font-size: var(--upp-input-font-size, 16px);
border: none;
background: inherit;
outline: none; // chrome
&.title {
padding-top: var(--upp-input-padding-top, 20px);
}
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
box-shadow: 0 0 0px 1000px white inset;
}
}
ion-label {
&.input-title {
position: absolute;
top: var(--upp-input-inner-padding-top, 2px);
margin-left: 0px;
font-size: 12px;
transition: all 0.3s;
color: var(--upp-input-placeholder, grey);
--color: var(--upp-input-placeholder, grey);
opacity: .75;
&.hide {
opacity: 0;
pointer-events: none;
position: absolute;
top: 22px;
margin-left: 8px;
font-size: 16px;
}
}
}
}