Input by Halo-Digital

This package contains an input field element with the following features:

• Auto complete

• Checkbox

• Checkboxes list

• Chips

• Date

• Date range

• Sub-forms list

• Hidden

• Image uploader

• Number

• Number range

• Password

• Radio button

• radio buttons list

• Select

• Multi select

• Text

• Textarea

• Based on Angular Material components

• All the fields that gets an options list as parameter (i.e: autocomplete, select etc.), supports getting the options from API endpoint

Enjoy!

Attributes of All Input Types

id

The field unique id
Type: string Default: null

type

Declare the field input type
Type: 'checkbox' | 'checkboxList' | 'chips' | 'date' | 'list' | 'hidden' | 'image' | 'number' | 'password' | 'radio' | 'radioList' | 'select' | 'text' | 'textarea'
Default: 'text'

placeholder

The field placeholder
Type: string Default: null

hint

An help text that appear below the field
Type: string
Default: null

disabled

Declare if the field is disabled
Type: boolean
Default: false

readonly

Declare if the field is read only
Type: boolean
Default: false

required

Declare if the field is required (for template driven forms)
Type: boolean
Default: false

hostControl

A reference to the FormControl that the field represent (inside the FormGroup or FormArray)
Type: FormControl
Default: null

formSubmitted

Declare if the form that contains the field was submitted (to display an error message etc.)
Type: boolean
Default: false

errorMessages

Custom messages for various error states
Type: { required?: string; min?: string; max?: string; minlength?: string; maxlength?: string; pattern?: string; }
Default: Each error state has a default message if nothing declared

noValidate

Set the field to not display any error message
Type: boolean
Default: false

Attributes of 'checkboxList' Input Type

options

Declare the options
Type: string[] | {label: string; value: any}[]
Default: []

optionsEndpoint

Declare the API endpoint for fetching the options (in case of fetching the options from an API)
Type: string
Default: null

optionsCaching

Declare if caching the options (in case of fetching the options from an API)
Type: boolean
Default: true

optionsExcludeValues

Declare a options that should not appear (in case of fetching the options from an API)
Type: any[] (array of options value)
Default: []

readonlyOptions

Declare which of the checkboxes is read only
Type: any[] (array of options value)
Default: []

direction

Declare the iteration direction
Type: 'horizontal' | 'vertical'
Default: 'vertical'

emptyLabel

Declare a text that appear when there are no checkboxes
Type: string
Default: null

Attributes of 'chips' Input Type

options

Declare the options (for 'autocomplete' mode)
Type: string[] | {label: string; value: any}[]
Default: []

optionsEndpoint

Declare the API endpoint for fetching the options (for 'autocomplete' mode, in case of fetching the options from an API)
Type: string
Default: null

optionsEndpointParam

Declare the API endpoint param for fetching the options (for 'autocomplete' mode, in case of fetching the options from an API)
Type: string
Default: null

forceValueInOptions

Declare if the value must appear in the options list (for 'autocomplete' mode)
Type: boolean
Default: false

initLabels

The initial chips (for 'autocomplete' mode)
Type: string[]
Default: []

Attributes of 'date' Input Type

range

Declare if the input will contain a range of dates or a single date
Type: boolean
Default: false

Attributes of 'formList' Input Type

fields

Declare if sub-forms can be added to the list
Type: HaloInputFormListField[] (Declared below)

creatable

Declare if sub-forms can be added to the list
Type: boolean
Default: false

deletable

Declare if sub-forms can be removed from the list
Type: boolean
Default: false

selectable

Declare if to display a checkbox in each sub-form. If 'disabled' the checkbox will apear but won't be checkable. If true, every object in the value will contain 'isSelected': boolean.
Type: boolean | 'disabled'
Default: false

titleFieldId

Declare which field's value will be used as the sub-form title
Type: string
Default: null

focusGroupIndex

Declare which sub-form to be focus on
Type: number
Default: null

emptyLabel

Declare a text that appear when there are no sub-forms
Type: string
Default: null

Attributes of 'image' Input Type

uploadEndpoint

Declare the API endpoint for uploading the image
Type: string

Attributes of 'number' Input Type

range

Declare if the input will contain a range of numbers or a single number
Type: boolean
Default: false

min

Declare minimum number that the field can contain
Type: number
Default: null

max

Declare maximum number that the field can contain
Type: number
Default: null

step

Declare the interval between legal numbers
Type: number
Default: null

Attributes of 'password' Input Type

pattern

Declare a regular expression that the field's value is checked against
Type: string
Default: null

minlength

Declare the minimum number of characters required in the field
Type: number
Default: null

maxlength

Declare the maximum number of characters required in the field
Type: number
Default: null

Attributes of 'radio' Input Type

outputValue

Declare for which value the field will return true
Type: any
Default: null

groupName

Declare the group of the radio buttons that the field associated with
Type: string
Default: null

Attributes of 'radioList' Input Type

options

Declare the options
Type: string[] | {label: string; value: any}[]
Default: []

optionsEndpoint

Declare the API endpoint for fetching the options (in case of fetching the options from an API)
Type: string
Default: null

optionsCaching

Declare if caching the options (in case of fetching the options from an API)
Type: boolean
Default: true

optionsExcludeValues

Declare a options that should not appear (in case of fetching the options from an API)
Type: any[] (array of options value)
Default: []

direction

Declare the iteration direction
Type: 'horizontal' | 'vertical'
Default: 'vertical'

emptyLabel

Declare a text that appear when there are no radio buttons
Type: string
Default: null

Attributes of 'select' Input Type

options

Declare the options
Type: string[] | {label: string; value: any}[]
Default: []

optionsEndpoint

Declare the API endpoint for fetching the options (in case of fetching the options from an API)
Type: string
Default: null

optionsCaching

Declare if caching the options (in case of fetching the options from an API)
Type: boolean
Default: true

optionsExcludeValues

Declare a options that should not appear (in case of fetching the options from an API)
Type: any[] (array of options value)
Default: []

multiple

Declare if the field is a multi select field
Type: boolean
Default: false

tooltipPosition

Declare if to display a tooltip when the options are too long (and where to place it)
Type: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right' | 'top-center' | 'top-left' | 'top-right'
Default: 'middle-left'

Attributes of 'text' Input Type

pattern

Declare a regular expression that the field's value is checked against
Type: string
Default: null

minlength

Declare the minimum number of characters required in the field
Type: number
Default: null

maxlength

Declare the maximum number of characters required in the field
Type: number
Default: null

options

Declare the options (for 'autocomplete' mode)
Type: string[] | {label: string; value: any}[]
Default: []

optionsEndpoint

Declare the API endpoint for fetching the options (for 'autocomplete' mode, in case of fetching the options from an API)
Type: string
Default: null

optionsEndpointParam

Declare the API endpoint param for fetching the options (for 'autocomplete' mode, in case of fetching the options from an API)
Type: string
Default: null

forceValueInOptions

Declare if the value must appear in the options list (for 'autocomplete' mode)
Type: boolean
Default: false

Attributes of 'textarea' Input Type

disableExpand

Declare if disable the option to open the textarea as a dialog
Type: boolean
Default: false

Events of all Input Types

valueBlured

Triggers on field lost focus
Event Parameter Type: any

valueChanged

Triggers on field's value change
Event Parameter Type: void

Event of 'checkboxList', 'radioList' and 'select' Input Types

optionsEndpointLoaded

Triggers when options were fetched from an API endpoint
Event Parameter Type: {label: string; value: any;}[]

Few More Things

HaloInputModule forRoot Parameters

DATE_FORMAT
String that represent the date format. i.e: 'DD/MM/YYYY', 'DD/MM/YYYY HH:mm:ss' etc.

DATE_TIMEZONE
String that represent the timezone. i.e: 'UTC', 'Europe/Athens', 'US/Hawaii' etc.

HaloInputFormListField Declaration

{
    id: string;
    type: 'checkbox' | 'checkboxList' | 'chips' | 'date' | 'list' | 'hidden' | 'image' | 'number' | 'password' | 'radio' | 'radioList' | 'select' | 'text' | 'textarea';
    noValidate?: boolean;
    placeholder?: string;
    hint?: string;
    required?: boolean;
    disabled?: boolean;
    readonly?: boolean;
    range?: boolean;
    multiple?: boolean;
    direction?: 'horizontal' | 'vertical';
    initLabels?: string[][];
    options?: any[];
    optionsEndpoint?: string;
    optionsEndpointParam?: string;
    optionsCaching?: boolean;
    optionsExcludeValues?: any[];
    optionsPerGroup?: any[][];
    forceValueInOptions?: boolean;
    uploadEndpoint?: string;
    min?: number;
    max?: number;
    pattern?: string;
    groupName?: string;
    tooltipPosition?: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right' | 'top-center' | 'top-left' | 'top-right';
    hideFromFirstGroup?: boolean;
    typePerGroup?: ('checkbox' | 'checkboxList' | 'chips' | 'date' | 'list' | 'hidden' | 'image' | 'number' | 'password' | 'radio' | 'radioList' | 'select' | 'text' | 'textarea')[];
    onChange?: (fieldValue: any, fieldId: string, fieldIndex: number, form: FormArray, entireListValue: object[]) => void;
}

Examples

<halo-input type="checkbox" formControlName="status_is_active" (valueChanged)="checkboxChanged($event)">
    <div checkboxContent>
        <div class="caption">Is Active</div>
        <div class="help-text">(some help text)</div>
    </div>
</halo-input>

<!------------->

<halo-input type="radio" formControlName="status_is_active" groupName="group" outputValue="yes" (valueChanged)="checkboxChanged($event)">
    <div radioContent>
        <div class="caption">Is Active</div>
        <div class="help-text">(some help text)</div>
    </div>
</halo-input>

<halo-input type="radio" formControlName="status_is_not_active" groupName="group" outputValue="no" (valueChanged)="checkboxChanged($event)">
    <div radioContent>
        <div class="caption">Is Not Active</div>
        <div class="help-text">(some help text)</div>
    </div>
</halo-input>

<!------------->

<halo-input
    formControlName="selectControl"
    type="select"
    placeholder="Select an option..."
    [hostControl]="form.controls.selectControl"
    [formSubmitted]="isFormSubmitted"
    optionsEndpoint="http://url.com/endpoint/options">
</halo-input>

<!------------->

<halo-input
    [(ngModel)]="searchPhrase"
    placeholder="Search..."
    (valueChanged)="searchPhraseChanged()">
</halo-input>