Chatterbox

Chatterbox is a simple material formcontrol component text area that expands and indicates the number of chars entered or remaining.

Inputs

The following Inputs are available

| Input | Type | Defaut | Description | | ----- | ---- | ------ | ----------- | | maxLength | NUMBER | INF | maximum amount of chars accepted for input | | minLength | NUMBER | 0 | minimum amount of chars accepted for input | | required | BOOLEAN | FALSE | Text entry is required | | label | STRING | NULL | label for TextArea | | placeholder | STRING | NULL | placeholder text in TextArea input | | counterLabel| STRING | NULL | label for Counter | | type | NUMBER | 1 | 1 is Total Count and -1 is Count Remaining | | minRows | NUMBER | NULL | Min Rows (Height) for TextArea | | maxRows | NUMBER | NULL | Max Rows (Height) for TextArea | | appearence | STRING | NULL | input style | | readonly | BOOLEAN | false | makes text for disabled state black NOT 50% |

FormControl

formControlName="comments"

 countrySelection = this.fb.group({
    comments: [null],
  })

Options

Here is the minimum setup required

  <wave-chatter-box
    [maxLength]="255"
    [minLength]="0"
    [label]="'Please enter your message'"
    [placeholder]="'I need some assisstance...'"
    [counterLabel]="'Total Remaining'"
    [type]="-1"
    formControlName="chatter"
  ></wave-chatter-box>

Here is the maximum setup

<div [formGroup]="form">

  <wave-chatter-box
    [maxLength]="100"
    [minLength]="10"
    [label]="'Please enter your message'"
    [placeholder]="'I need some assisstance...'"
    [counterLabel]="'Total Characters Remaining'"
    [type]="-1"
    [minRows]="15"
    [maxRows]="15"
    appearance="outline"
    required="true"
    [readOnly]="true"
    formControlName="chatter"
  ></wave-chatter-box>

</div>