Input Component

Overview

The input component offers an extended version of the standard HTML <input> element. The input component offers a variety of preferences to display labels, titles, prefix/suffix icons and buttons as well as other features.

Required Imports

To use the input component , you must import the MpageInputComponent from @clinicaloffice/mpage-developer and the FormsModule from @angular/forms. You must also include them in your component imports array in your component TypeScript file.

e.g. your-component.ts

import {MpageInputComponent} from '@clinicaloffice/mpage-developer';
import {FormsModule} from '@angular/forms';

@Component({
  selector: 'your-component',
    imports: [MpageInputComponent, FormsModule],
  templateUrl: './your-component.component.html',
  styleUrl: './your-component.component.scss',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
}

Usage

The MPage input component HTML selector is called <mpage-input /> and at a minimum requires a bound string variable. The MPage input component will size itself to the full width of its parent container unless CSS styling is applied to the component and unless specified will assume the input is a text data type.

It is recommended that you always add a label to identify your input field as follows.

<mpage-input [(ngModel)]="boundVariable" label="Test Text Input" />

As text is entered into the input field above, a clear button appears allowing for a single click clearing of the input contents.

Options

The MPage input component offers many options for customizations which are listed in the table below. Options are applied directly in your HTML element.

<mpage-input [(ngModel)]="boundDateVariable" label="From Date" type="date" [required]="true" />

Option	Binding	Data Type	Default Value	Description
class	Input	String		CSS Class name
clearButton	Input	boolean	true	Determine if a clear button should be shown.
clearClicked	Output	boolean		Allows interception of the clear button being clicked by a user.
disabled	Input	boolean	false	Allows preventing editing of contents.
jsDate	Input	boolean	false	Set to true if you wish to have date, datetime-local, and time input components input and output JavaScript dates instead of text. We recommend using text on your inputs instead of JavaScript dates as it eliminates localization and UTC issues. When passing your date fields to CCL, perform a cnvtdatetime() on them.
label	Input	string		Identifying label to display inside input component.
max	Input	number		Maximum value for a number or range component.
maxLength	Input	number	0	Set the maximum number of characters that can be typed.
min	Input	number		Minimum value for a number or range component.
name	Input	string		Assign a name to component. If you are adding an [(ngModel)] inside an HTML form, you must assign names to all input components. This is only necessary when mixing [(ngModel)] inside a form and is not needed if just using [(ngModel)] or the Angular FormControl/FormArray objects.
prefix	Input	IIcon		Assign an icon or icon button in front of the input component.
prefixClick	Output	event emitter		Emits a boolean value of true when the prefix button has been clicked.
required	Input	boolean	false	Highlights field that has no value.
rows	Input	number		Height of textarea by row count.
skipUnicodeReplace	Input	boolean	false	If true, Unicode character replacement is prevented allowing for any international characters. Be careful not to send data to Cerner without first replacing the Unicode characters.
style	Input	CSS Style Object		Any valid CSS styling.
suffix	Input	IIcon		Assign an icon or icon button to the right of the input component.
suffixClick	Output	event emitter		Emits a boolean value of true when the suffix button has been clicked.
title	Input	string		For most data types (e.g. text), title will be displayed as hover text. For a checkbox data type, the title is used as text displayed next to the checkbox.
type	Input	string	'text'	Type of input field. Valid values are: color checkbox text property required to print text next to checkbox date datetime-local number password range text textarea time

Styling

The table below describes the styles specific to the MPage input component that you can customize. These changes are global to your MPage. If you are building a component to be used in the Cerner MPage Component Framework, these styles are specific to your component and changes will have no impact on other Clinical Office components displayed on the same page.

Interfaces

IIcon {
  icon: string;
  button: any;
  title: string;
  className: string;
}