@halodigital/input NPM

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

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

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>

tslib

@everything-registry/sub-chunk-384 @zalastax/nolb-_hal

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago