chatter-box-input - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

bundles/chatter-box-input.umd.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
-    typeof define === 'function' && define.amd ? define('chatter-box-input', ['exports', '@angular/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["chatter-box-input"] = {}, global.ng.core));
-})(this, (function (exports, i0) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@angular/material/form-field'), require('@angular/common'), require('@angular/flex-layout/flex'), require('@angular/cdk/text-field'), require('@angular/material/input'), require('@angular/flex-layout')) :
+    typeof define === 'function' && define.amd ? define('chatter-box-input', ['exports', '@angular/core', '@angular/forms', 'rxjs', 'rxjs/operators', '@angular/material/form-field', '@angular/common', '@angular/flex-layout/flex', '@angular/cdk/text-field', '@angular/material/input', '@angular/flex-layout'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["chatter-box-input"] = {}, global.ng.core, global.ng.forms, global.rxjs, global.rxjs.operators, global.ng.material.formField, global.ng.common, global.ng.flexLayout.flex, global.ng.cdk.textField, global.ng.material.input, global.ng.flexLayout));
+})(this, (function (exports, i0, i1$1, rxjs, operators, i2, i1, i4, i5, i6, flexLayout) { 'use strict';
 
@@ -26,34 +26,173 @@ function _interopNamespace(e) {
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
 
-    var ChatterBoxInputService = /** @class */ (function () {
-        function ChatterBoxInputService() {
+    var CounterComponent = /** @class */ (function () {
+        function CounterComponent() {
+            this.label = 'Total';
+            this.type = 1; // FORWARDS +1 and BACKWARDS -1
         }
-        return ChatterBoxInputService;
+        CounterComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.counter = this.charCount.pipe(operators.map(function (data) { return (_this.type > 0) ? data : _this.maxLength - data; }));
+        };
+        return CounterComponent;
     }());
-    ChatterBoxInputService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChatterBoxInputService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ChatterBoxInputService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChatterBoxInputService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChatterBoxInputService, decorators: [{
-                type: i0.Injectable,
+    CounterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CounterComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    CounterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CounterComponent, selector: "app-counter", inputs: { maxLength: "maxLength", minLength: "minLength", label: "label", charCount: "charCount", type: "type" }, ngImport: i0__namespace, template: "<div *ngIf=\"maxLength\" class=\"info\">\n  {{ label }} {{ counter | async }}\n</div>\n\n", styles: [".info{font-weight:400;color:gray;text-align:end}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1__namespace.AsyncPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: CounterComponent, decorators: [{
+                type: i0.Component,
                 args: [{
-                        providedIn: 'root'
+                        selector: 'app-counter',
+                        templateUrl: './counter.component.html',
+                        styleUrls: ['./counter.component.scss']
                     }]
-            }], ctorParameters: function () { return []; } });
+            }], ctorParameters: function () { return []; }, propDecorators: { maxLength: [{
+                    type: i0.Input
+                }], minLength: [{
+                    type: i0.Input
+                }], label: [{
+                    type: i0.Input
+                }], charCount: [{
+                    type: i0.Input
+                }], type: [{
+                    type: i0.Input
+                }] } });
 
+    var INPUT_VALUE_ACCESSOR = {
+        provide: i1$1.NG_VALUE_ACCESSOR,
+        useExisting: i0.forwardRef(function () { return ChatterBoxInputComponent; }),
+        multi: true
+    };
     var ChatterBoxInputComponent = /** @class */ (function () {
-        function ChatterBoxInputComponent() {
+        function ChatterBoxInputComponent(fb) {
+            this.fb = fb;
+            this.maxLength = Infinity;
+            this.minLength = 0;
+            this.isRequired = false;
+            this.counterLabel = 'Total';
+            this.label = 'Leave a comment';
+            this.placeholder = 'Ex. It makes me feel...';
+            this.type = 1;
+            this.minRows = 1;
+            this.maxRows = 1;
+            this.chatter = this.fb.control(null);
+            this.charCount = new rxjs.Observable();
+            this._disabled = false;
+            this._readOnly = false;
+            this.heightAdjust = '0px';
+            this.onChange = function (_) { };
+            this.onTouched = function () { };
         }
+        Object.defineProperty(ChatterBoxInputComponent.prototype, "disabled", {
+            get: function () {
+                return this._disabled;
+            },
+            set: function (value) {
+                this._disabled = value;
+                if (value) {
+                    this.chatter.disable();
+                }
+                else {
+                    this.chatter.enable();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ChatterBoxInputComponent.prototype, "readOnly", {
+            get: function () {
+                return this._readOnly;
+            },
+            set: function (value) {
+                this._readOnly = value;
+                this.disabled = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         ChatterBoxInputComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            if (this.isRequired)
+                this.chatter.addValidators(i1$1.Validators.required);
+            if (this.maxLength)
+                this.chatter.addValidators(i1$1.Validators.maxLength(this.maxLength));
+            if (this.maxLength)
+                this.chatter.addValidators(i1$1.Validators.minLength(this.minLength));
+            this.charCount = this.chatter.valueChanges.pipe(operators.map(function (data) { return (!data) ? 0 : data.toString().length; }));
+            this.chatter.valueChanges.pipe().subscribe(function (data) {
+                _this.onChange(data);
+                _this.calcHeight();
+            });
+            this.calcHeight();
         };
+        ChatterBoxInputComponent.prototype.calcHeight = function () {
+            this.heightAdjust = this.textArea.nativeElement.clientHeight + 44 + "px";
+        };
+        ChatterBoxInputComponent.prototype.writeValue = function (value) {
+            var _this = this;
+            setTimeout(function () {
+                _this.chatter.patchValue(value);
+            }, 0);
+        };
+        ChatterBoxInputComponent.prototype.registerOnChange = function (fn) {
+            this.onChange = fn;
+        };
+        ChatterBoxInputComponent.prototype.registerOnTouched = function (fn) {
+            this.onTouched = fn;
+        };
+        ChatterBoxInputComponent.prototype.setDisabledState = function (isDisabled) {
+            this.disabled = isDisabled;
+        };
+        ChatterBoxInputComponent.prototype.onEnter = function () {
+            this.calcHeight();
+        };
+        ChatterBoxInputComponent.prototype.onBlur = function () {
+            this.onChange(this.chatter.value);
+            this.onTouched();
+        };
         return ChatterBoxInputComponent;
     }());
-    ChatterBoxInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChatterBoxInputComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChatterBoxInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChatterBoxInputComponent, selector: "lib-chatter-box-input", ngImport: i0__namespace, template: "\n    <p>\n      chatter-box-input works!\n    </p>\n  ", isInline: true });
+    ChatterBoxInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChatterBoxInputComponent, deps: [{ token: i1__namespace$1.FormBuilder }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ChatterBoxInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChatterBoxInputComponent, selector: "app-chatter-box", inputs: { maxLength: "maxLength", minLength: "minLength", isRequired: "isRequired", counterLabel: "counterLabel", label: "label", placeholder: "placeholder", type: "type", minRows: "minRows", maxRows: "maxRows", appearance: "appearance", disabled: "disabled", readOnly: "readOnly" }, providers: [INPUT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, static: true }], ngImport: i0__namespace, template: "<div>\n  <mat-form-field\n    fxFill\n    [style.height]=\"heightAdjust\"\n    [appearance]=\"appearance\"\n  >\n    <mat-label>{{ label }}</mat-label>\n\n    <textarea\n      #textArea id=\"testMe\"\n      class=\"message\"\n      cdkTextareaAutosize\n      [cdkAutosizeMinRows]=\"minRows\"\n      [cdkAutosizeMaxRows]=\"maxRows\"\n      [class.enabled]=\"readOnly\"\n      matInput placeholder=\"{{ placeholder }}\"\n      maxlength=\"{{ maxLength }}\"\n      [formControl]=\"chatter\"\n      (blur)=\"onBlur()\"\n      (keyup.enter)=\"onEnter()\"\n    ></textarea>\n  </mat-form-field>\n</div>\n\n<app-counter\n  [minLength]=\"minLength\"\n  [maxLength]=\"maxLength\"\n  [charCount]=\"charCount\"\n  [type]=\"type\"\n  [label]=\"counterLabel\"\n></app-counter>\n\n", styles: [".enabled{color:#000}.message{font-size:11pt;line-height:14pt}\n"], components: [{ type: i2__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: CounterComponent, selector: "app-counter", inputs: ["maxLength", "minLength", "label", "charCount", "type"] }], directives: [{ type: i4__namespace.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i2__namespace.MatLabel, selector: "mat-label" }, { type: i5__namespace.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i6__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i1__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1__namespace$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChatterBoxInputComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'lib-chatter-box-input',
-                        template: "\n    <p>\n      chatter-box-input works!\n    </p>\n  ",
-                        styles: []
+                        selector: 'app-chatter-box',
+                        templateUrl: './chatter-box-input.component.html',
+                        styleUrls: ['./chatter-box-input.component.scss'],
+                        providers: [INPUT_VALUE_ACCESSOR]
                     }]
-            }], ctorParameters: function () { return []; } });
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.FormBuilder }]; }, propDecorators: { textArea: [{
+                    type: i0.ViewChild,
+                    args: ['textArea', { static: true }]
+                }], maxLength: [{
+                    type: i0.Input
+                }], minLength: [{
+                    type: i0.Input
+                }], isRequired: [{
+                    type: i0.Input
+                }], counterLabel: [{
+                    type: i0.Input
+                }], label: [{
+                    type: i0.Input
+                }], placeholder: [{
+                    type: i0.Input
+                }], type: [{
+                    type: i0.Input
+                }], minRows: [{
+                    type: i0.Input
+                }], maxRows: [{
+                    type: i0.Input
+                }], appearance: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], readOnly: [{
+                    type: i0.Input
+                }] } });
 
@@ -66,4 +205,15 @@ var ChatterBoxInputModule = /** @class */ (function () {
     ChatterBoxInputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChatterBoxInputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    ChatterBoxInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChatterBoxInputModule, declarations: [ChatterBoxInputComponent], exports: [ChatterBoxInputComponent] });
-    ChatterBoxInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChatterBoxInputModule, imports: [[]] });
+    ChatterBoxInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChatterBoxInputModule, declarations: [ChatterBoxInputComponent,
+            CounterComponent], imports: [i1.CommonModule,
+            i1$1.ReactiveFormsModule,
+            flexLayout.FlexLayoutModule,
+            i2.MatFormFieldModule,
+            i6.MatInputModule], exports: [ChatterBoxInputComponent] });
+    ChatterBoxInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChatterBoxInputModule, imports: [[
+                i1.CommonModule,
+                i1$1.ReactiveFormsModule,
+                flexLayout.FlexLayoutModule,
+                i2.MatFormFieldModule,
+                i6.MatInputModule,
+            ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ChatterBoxInputModule, decorators: [{
@@ -73,5 +223,12 @@ type: i0.NgModule,
                         declarations: [
-                            ChatterBoxInputComponent
+                            ChatterBoxInputComponent,
+                            CounterComponent,
                         ],
-                        imports: [],
+                        imports: [
+                            i1.CommonModule,
+                            i1$1.ReactiveFormsModule,
+                            flexLayout.FlexLayoutModule,
+                            i2.MatFormFieldModule,
+                            i6.MatInputModule,
+                        ],
                         exports: [
@@ -93,3 +250,3 @@ ChatterBoxInputComponent
     exports.ChatterBoxInputModule = ChatterBoxInputModule;
-    exports.ChatterBoxInputService = ChatterBoxInputService;
+    exports.INPUT_VALUE_ACCESSOR = INPUT_VALUE_ACCESSOR;
 
@@ -96,0 +253,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

esm2015/lib/chatter-box-input.component.js

@@ -1,26 +0,133 @@
-import { Component } from '@angular/core';
+import { Component, forwardRef, Input, ViewChild } from '@angular/core';
+import { NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@angular/material/form-field";
+import * as i3 from "./counter/counter.component";
+import * as i4 from "@angular/flex-layout/flex";
+import * as i5 from "@angular/cdk/text-field";
+import * as i6 from "@angular/material/input";
+export const INPUT_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => ChatterBoxInputComponent),
+    multi: true
+};
 export class ChatterBoxInputComponent {
-    constructor() { }
+    constructor(fb) {
+        this.fb = fb;
+        this.maxLength = Infinity;
+        this.minLength = 0;
+        this.isRequired = false;
+        this.counterLabel = 'Total';
+        this.label = 'Leave a comment';
+        this.placeholder = 'Ex. It makes me feel...';
+        this.type = 1;
+        this.minRows = 1;
+        this.maxRows = 1;
+        this.chatter = this.fb.control(null);
+        this.charCount = new Observable();
+        this._disabled = false;
+        this._readOnly = false;
+        this.heightAdjust = '0px';
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+    }
+    set disabled(value) {
+        this._disabled = value;
+        if (value) {
+            this.chatter.disable();
+        }
+        else {
+            this.chatter.enable();
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set readOnly(value) {
+        this._readOnly = value;
+        this.disabled = value;
+    }
+    get readOnly() {
+        return this._readOnly;
+    }
     ngOnInit() {
+        if (this.isRequired)
+            this.chatter.addValidators(Validators.required);
+        if (this.maxLength)
+            this.chatter.addValidators(Validators.maxLength(this.maxLength));
+        if (this.maxLength)
+            this.chatter.addValidators(Validators.minLength(this.minLength));
+        this.charCount = this.chatter.valueChanges.pipe(map(data => (!data) ? 0 : data.toString().length));
+        this.chatter.valueChanges.pipe().subscribe(data => {
+            this.onChange(data);
+            this.calcHeight();
+        });
+        this.calcHeight();
     }
+    calcHeight() {
+        this.heightAdjust = `${this.textArea.nativeElement.clientHeight + 44}px`;
+    }
+    writeValue(value) {
+        setTimeout(() => {
+            this.chatter.patchValue(value);
+        }, 0);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onEnter() {
+        this.calcHeight();
+    }
+    onBlur() {
+        this.onChange(this.chatter.value);
+        this.onTouched();
+    }
 }
-ChatterBoxInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChatterBoxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChatterBoxInputComponent, selector: "lib-chatter-box-input", ngImport: i0, template: `
-    <p>
-      chatter-box-input works!
-    </p>
-  `, isInline: true });
+ChatterBoxInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+ChatterBoxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChatterBoxInputComponent, selector: "app-chatter-box", inputs: { maxLength: "maxLength", minLength: "minLength", isRequired: "isRequired", counterLabel: "counterLabel", label: "label", placeholder: "placeholder", type: "type", minRows: "minRows", maxRows: "maxRows", appearance: "appearance", disabled: "disabled", readOnly: "readOnly" }, providers: [INPUT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, static: true }], ngImport: i0, template: "<div>\n  <mat-form-field\n    fxFill\n    [style.height]=\"heightAdjust\"\n    [appearance]=\"appearance\"\n  >\n    <mat-label>{{ label }}</mat-label>\n\n    <textarea\n      #textArea id=\"testMe\"\n      class=\"message\"\n      cdkTextareaAutosize\n      [cdkAutosizeMinRows]=\"minRows\"\n      [cdkAutosizeMaxRows]=\"maxRows\"\n      [class.enabled]=\"readOnly\"\n      matInput placeholder=\"{{ placeholder }}\"\n      maxlength=\"{{ maxLength }}\"\n      [formControl]=\"chatter\"\n      (blur)=\"onBlur()\"\n      (keyup.enter)=\"onEnter()\"\n    ></textarea>\n  </mat-form-field>\n</div>\n\n<app-counter\n  [minLength]=\"minLength\"\n  [maxLength]=\"maxLength\"\n  [charCount]=\"charCount\"\n  [type]=\"type\"\n  [label]=\"counterLabel\"\n></app-counter>\n\n", styles: [".enabled{color:#000}.message{font-size:11pt;line-height:14pt}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3.CounterComponent, selector: "app-counter", inputs: ["maxLength", "minLength", "label", "charCount", "type"] }], directives: [{ type: i4.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i2.MatLabel, selector: "mat-label" }, { type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'lib-chatter-box-input',
-                    template: `
-    <p>
-      chatter-box-input works!
-    </p>
-  `,
-                    styles: []
+                    selector: 'app-chatter-box',
+                    templateUrl: './chatter-box-input.component.html',
+                    styleUrls: ['./chatter-box-input.component.scss'],
+                    providers: [INPUT_VALUE_ACCESSOR]
                 }]
-        }], ctorParameters: function () { return []; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdHRlci1ib3gtaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY2hhdHRlci1ib3gtaW5wdXQvc3JjL2xpYi9jaGF0dGVyLWJveC1pbnB1dC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxNQUFNLGVBQWUsQ0FBQzs7QUFZbEQsTUFBTSxPQUFPLHdCQUF3QjtJQUVuQyxnQkFBZ0IsQ0FBQztJQUVqQixRQUFRO0lBQ1IsQ0FBQzs7c0hBTFUsd0JBQXdCOzBHQUF4Qix3QkFBd0IsNkRBUnpCOzs7O0dBSVQ7NEZBSVUsd0JBQXdCO2tCQVZwQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx1QkFBdUI7b0JBQ2pDLFFBQVEsRUFBRTs7OztHQUlUO29CQUNELE1BQU0sRUFBRSxFQUNQO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLWNoYXR0ZXItYm94LWlucHV0JyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8cD5cbiAgICAgIGNoYXR0ZXItYm94LWlucHV0IHdvcmtzIVxuICAgIDwvcD5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgQ2hhdHRlckJveElucHV0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICB9XG5cbn1cbiJdfQ==
+        }], ctorParameters: function () { return [{ type: i1.FormBuilder }]; }, propDecorators: { textArea: [{
+                type: ViewChild,
+                args: ['textArea', { static: true }]
+            }], maxLength: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], isRequired: [{
+                type: Input
+            }], counterLabel: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], minRows: [{
+                type: Input
+            }], maxRows: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdHRlci1ib3gtaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY2hhdHRlci1ib3gtaW5wdXQvc3JjL2xpYi9jaGF0dGVyLWJveC1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jaGF0dGVyLWJveC1pbnB1dC9zcmMvbGliL2NoYXR0ZXItYm94LWlucHV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBVSxTQUFTLEVBQWMsTUFBTSxlQUFlLENBQUM7QUFDNUYsT0FBTyxFQUFFLGlCQUFpQixFQUFlLFVBQVUsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTVFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDbEMsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7Ozs7OztBQUVyQyxNQUFNLENBQUMsTUFBTSxvQkFBb0IsR0FBUTtJQUN2QyxPQUFPLEVBQUUsaUJBQWlCO0lBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsd0JBQXdCLENBQUM7SUFDdkQsS0FBSyxFQUFFLElBQUk7Q0FDWixDQUFBO0FBUUQsTUFBTSxPQUFPLHdCQUF3QjtJQW1EbkMsWUFDVSxFQUFlO1FBQWYsT0FBRSxHQUFGLEVBQUUsQ0FBYTtRQWhEaEIsY0FBUyxHQUFHLFFBQVEsQ0FBQTtRQUNwQixjQUFTLEdBQUcsQ0FBQyxDQUFBO1FBQ2IsZUFBVSxHQUFHLEtBQUssQ0FBQTtRQUVsQixpQkFBWSxHQUFHLE9BQU8sQ0FBQTtRQUN0QixVQUFLLEdBQUcsaUJBQWlCLENBQUE7UUFDekIsZ0JBQVcsR0FBRyx5QkFBeUIsQ0FBQTtRQUN2QyxTQUFJLEdBQUcsQ0FBQyxDQUFBO1FBRVIsWUFBTyxHQUFHLENBQUMsQ0FBQTtR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LCBWaWV3Q2hpbGQsIEVsZW1lbnRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SLCBGb3JtQnVpbGRlciwgVmFsaWRhdG9ycyB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IE1hdEZvcm1GaWVsZEFwcGVhcmFuY2UgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9mb3JtLWZpZWxkJztcbmltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IG1hcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuZXhwb3J0IGNvbnN0IElOUFVUX1ZBTFVFX0FDQ0VTU09SOiBhbnkgPSB7XG4gIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBDaGF0dGVyQm94SW5wdXRDb21wb25lbnQpLFxuICBtdWx0aTogdHJ1ZVxufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtY2hhdHRlci1ib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hhdHRlci1ib3gtaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jaGF0dGVyLWJveC1pbnB1dC5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFtJTlBVVF9WQUxVRV9BQ0NFU1NPUl1cbn0pXG5leHBvcnQgY2xhc3MgQ2hhdHRlckJveElucHV0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBAVmlld0NoaWxkKCd0ZXh0QXJlYScsIHsgc3RhdGljOiB0cnVlIH0pIHRleHRBcmVhOiBFbGVtZW50UmVmXG5cbiAgQElucHV0KCkgbWF4TGVuZ3RoID0gSW5maW5pdHlcbiAgQElucHV0KCkgbWluTGVuZ3RoID0gMFxuICBASW5wdXQoKSBpc1JlcXVpcmVkID0gZmFsc2VcblxuICBASW5wdXQoKSBjb3VudGVyTGFiZWwgPSAnVG90YWwnXG4gIEBJbnB1dCgpIGxhYmVsID0gJ0xlYXZlIGEgY29tbWVudCdcbiAgQElucHV0KCkgcGxhY2Vob2xkZXIgPSAnRXguIEl0IG1ha2VzIG1lIGZlZWwuLi4nXG4gIEBJbnB1dCgpIHR5cGUgPSAxXG5cbiAgQElucHV0KCkgbWluUm93cyA9IDFcbiAgQElucHV0KCkgbWF4Um93cyA9IDFcblxuICBASW5wdXQoKSBhcHBlYXJhbmNlOiBNYXRGb3JtRmllbGRBcHBlYXJhbmNlXG5cbiAgY2hhdHRlciA9IHRoaXMuZmIuY29udHJvbChudWxsKVxuICBjaGFyQ291bnQgPSBuZXcgT2JzZXJ2YWJsZTxudW1iZXI+KClcblxuICBfZGlzYWJsZWQgPSBmYWxzZVxuICBASW5wdXQoKSBzZXQgZGlzYWJsZWQodmFsdWU6IGJvb2xlYW4pIHtcblxuICAgIHRoaXMuX2Rpc2FibGVkID0gdmFsdWVcblxuICAgICAgaWYodmFsdWUpIHtcbiAgICAgICAgdGhpcy5jaGF0dGVyLmRpc2FibGUoKVxuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5jaGF0dGVyLmVuYWJsZSgpXG4gICAgICB9XG4gIH1cblxuICBnZXQgZGlzYWJsZWQoKSB7XG4gICAgcmV0dXJuIHRoaXMuX2Rpc2FibGVkXG4gIH1cblxuICBfcmVhZE9ubHkgPSBmYWxzZVxuICBASW5wdXQoKSBzZXQgcmVhZE9ubHkodmFsdWU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9yZWFkT25seSA9IHZhbHVlXG4gICAgdGhpcy5kaXNhYmxlZCA9IHZhbHVlXG4gIH1cbiAgZ2V0IHJlYWRPbmx5KCkge1xuICAgIHJldHVybiB0aGlzLl9yZWFkT25seVxuICB9XG5cbiAgaGVpZ2h0QWRqdXN0ID0gJzBweCdcblxuICBwcml2YXRlIG9uQ2hhbmdlOiBGdW5jdGlvblxuICBwcml2YXRlIG9uVG91Y2hlZDogRnVuY3Rpb25cblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIGZiOiBGb3JtQnVpbGRlcixcbiAgKSB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IChfOiBhbnkpID0+IHt9XG4gICAgdGhpcy5vblRvdWNoZWQgPSAoKSA9PiB7fVxuICAgfVxuXG4gIG5nT25Jbml0KCkge1xuXG4gICAgaWYodGhpcy5pc1JlcXVpcmVkKSB0aGlzLmNoYXR0ZXIuYWRkVmFsaWRhdG9ycyhWYWxpZGF0b3JzLnJlcXVpcmVkKVxuICAgIGlmKHRoaXMubWF4TGVuZ3RoKSB0aGlzLmNoYXR0ZXIuYWRkVmFsaWRhdG9ycyhWYWxpZGF0b3JzLm1heExlbmd0aCh0aGlzLm1heExlbmd0aCkpXG4gICAgaWYodGhpcy5tYXhMZW5ndGgpIHRoaXMuY2hhdHRlci5hZGRWYWxpZGF0b3JzKFZhbGlkYXRvcnMubWluTGVuZ3RoKHRoaXMubWluTGVuZ3RoKSlcblxuICAgIHRoaXMuY2hhckNvdW50ID0gdGhpcy5jaGF0dGVyLnZhbHVlQ2hhbmdlcy5waXBlKFxuICAgICAgbWFwKGRhdGEgPT4gKCFkYXRhKSA/IDAgOiBkYXRhLnRvU3RyaW5nKCkubGVuZ3RoKVxuICAgIClcblxuICAgIHRoaXMuY2hhdHRlci52YWx1ZUNoYW5nZXMucGlwZShcbiAgICApLnN1YnNjcmliZShkYXRhID0+IHtcbiAgICAgIHRoaXMub25DaGFuZ2UoZGF0YSlcbiAgICAgIHRoaXMuY2FsY0hlaWdodCgpXG4gICAgfSlcblxuICAgIHRoaXMuY2FsY0hlaWdodCgpXG5cbiAgfVxuXG4gIGNhbGNIZWlnaHQoKSB7XG4gICAgdGhpcy5oZWlnaHRBZGp1c3QgPSBgJHt0aGlzLnRleHRBcmVhLm5hdGl2ZUVsZW1lbnQuY2xpZW50SGVpZ2h0ICsgNDR9cHhgXG4gIH1cblxuICB3cml0ZVZhbHVlKHZhbHVlOiBhbnkpIHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuY2hhdHRlci5wYXRjaFZhbHVlKHZhbHVlKVxuICAgIH0sIDApXG4gIH1cblxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiAoXzogYW55KSA9PiB2b2lkKSB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuXG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogKCkgPT4gdm9pZCkge1xuICAgIHRoaXMub25Ub3VjaGVkID0gZm5cbiAgfVxuXG4gIHNldERpc2FibGVkU3RhdGUoaXNEaXNhYmxlZDogYm9vbGVhbikge1xuICAgIHRoaXMuZGlzYWJsZWQgPSBpc0Rpc2FibGVkXG4gIH1cblxuICBvbkVudGVyKCkge1xuICAgIHRoaXMuY2FsY0hlaWdodCgpXG4gIH1cblxuICBvbkJsdXIoKSB7XG4gICAgdGhpcy5vbkNoYW5nZSh0aGlzLmNoYXR0ZXIudmFsdWUpXG4gICAgdGhpcy5vblRvdWNoZWQoKVxuICB9XG5cbn1cbiIsIjxkaXY+XG4gIDxtYXQtZm9ybS1maWVsZFxuICAgIGZ4RmlsbFxuICAgIFtzdHlsZS5oZWlnaHRdPVwiaGVpZ2h0QWRqdXN0XCJcbiAgICBbYXBwZWFyYW5jZV09XCJhcHBlYXJhbmNlXCJcbiAgPlxuICAgIDxtYXQtbGFiZWw+e3sgbGFiZWwgfX08L21hdC1sYWJlbD5cblxuICAgIDx0ZXh0YXJlYVxuICAgICAgI3RleHRBcmVhIGlkPVwidGVzdE1lXCJcbiAgICAgIGNsYXNzPVwibWVzc2FnZVwiXG4gICAgICBjZGtUZXh0YXJlYUF1dG9zaXplXG4gICAgICBbY2RrQXV0b3NpemVNaW5Sb3dzXT1cIm1pblJvd3NcIlxuICAgICAgW2Nka0F1dG9zaXplTWF4Um93c109XCJtYXhSb3dzXCJcbiAgICAgIFtjbGFzcy5lbmFibGVkXT1cInJlYWRPbmx5XCJcbiAgICAgIG1hdElucHV0IHBsYWNlaG9sZGVyPVwie3sgcGxhY2Vob2xkZXIgfX1cIlxuICAgICAgbWF4bGVuZ3RoPVwie3sgbWF4TGVuZ3RoIH19XCJcbiAgICAgIFtmb3JtQ29udHJvbF09XCJjaGF0dGVyXCJcbiAgICAgIChibHVyKT1cIm9uQmx1cigpXCJcbiAgICAgIChrZXl1cC5lbnRlcik9XCJvbkVudGVyKClcIlxuICAgID48L3RleHRhcmVhPlxuICA8L21hdC1mb3JtLWZpZWxkPlxuPC9kaXY+XG5cbjxhcHAtY291bnRlclxuICBbbWluTGVuZ3RoXT1cIm1pbkxlbmd0aFwiXG4gIFttYXhMZW5ndGhdPVwibWF4TGVuZ3RoXCJcbiAgW2NoYXJDb3VudF09XCJjaGFyQ291bnRcIlxuICBbdHlwZV09XCJ0eXBlXCJcbiAgW2xhYmVsXT1cImNvdW50ZXJMYWJlbFwiXG4+PC9hcHAtY291bnRlcj5cblxuIl19

esm2015/lib/chatter-box-input.module.js

 import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { ChatterBoxInputComponent } from './chatter-box-input.component';
+import { CounterComponent } from './counter/counter.component';
 import * as i0 from "@angular/core";
@@ -7,4 +13,15 @@ export class ChatterBoxInputModule {
 ChatterBoxInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ChatterBoxInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputModule, declarations: [ChatterBoxInputComponent], exports: [ChatterBoxInputComponent] });
-ChatterBoxInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputModule, imports: [[]] });
+ChatterBoxInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputModule, declarations: [ChatterBoxInputComponent,
+        CounterComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        FlexLayoutModule,
+        MatFormFieldModule,
+        MatInputModule], exports: [ChatterBoxInputComponent] });
+ChatterBoxInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputModule, imports: [[
+            CommonModule,
+            ReactiveFormsModule,
+            FlexLayoutModule,
+            MatFormFieldModule,
+            MatInputModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputModule, decorators: [{
@@ -14,5 +31,12 @@ type: NgModule,
                     declarations: [
-                        ChatterBoxInputComponent
+                        ChatterBoxInputComponent,
+                        CounterComponent,
                     ],
-                    imports: [],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FlexLayoutModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                    ],
                     exports: [
@@ -23,2 +47,2 @@ ChatterBoxInputComponent
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdHRlci1ib3gtaW5wdXQubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY2hhdHRlci1ib3gtaW5wdXQvc3JjL2xpYi9jaGF0dGVyLWJveC1pbnB1dC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQzs7QUFjekUsTUFBTSxPQUFPLHFCQUFxQjs7bUhBQXJCLHFCQUFxQjtvSEFBckIscUJBQXFCLGlCQVI5Qix3QkFBd0IsYUFLeEIsd0JBQXdCO29IQUdmLHFCQUFxQixZQU52QixFQUNSOzRGQUtVLHFCQUFxQjtrQkFWakMsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBQ1osd0JBQXdCO3FCQUN6QjtvQkFDRCxPQUFPLEVBQUUsRUFDUjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1Asd0JBQXdCO3FCQUN6QjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDaGF0dGVyQm94SW5wdXRDb21wb25lbnQgfSBmcm9tICcuL2NoYXR0ZXItYm94LWlucHV0LmNvbXBvbmVudCc7XG5cblxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBDaGF0dGVyQm94SW5wdXRDb21wb25lbnRcbiAgXSxcbiAgaW1wb3J0czogW1xuICBdLFxuICBleHBvcnRzOiBbXG4gICAgQ2hhdHRlckJveElucHV0Q29tcG9uZW50XG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgQ2hhdHRlckJveElucHV0TW9kdWxlIHsgfVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdHRlci1ib3gtaW5wdXQubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY2hhdHRlci1ib3gtaW5wdXQvc3JjL2xpYi9jaGF0dGVyLWJveC1pbnB1dC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN4RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDckQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBRXpELE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ3pFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDOztBQW1CL0QsTUFBTSxPQUFPLHFCQUFxQjs7bUhBQXJCLHFCQUFxQjtvSEFBckIscUJBQXFCLGlCQWQ5Qix3QkFBd0I7UUFDeEIsZ0JBQWdCLGFBR2hCLFlBQVk7UUFDWixtQkFBbUI7UUFDbkIsZ0JBQWdCO1FBQ2hCLGtCQUFrQjtRQUNsQixjQUFjLGFBR2Qsd0JBQXdCO29IQUdmLHFCQUFxQixZQVh2QjtZQUNQLFlBQVk7WUFDWixtQkFBbUI7WUFDbkIsZ0JBQWdCO1lBQ2hCLGtCQUFrQjtZQUNsQixjQUFjO1NBQ2Y7NEZBS1UscUJBQXFCO2tCQWhCakMsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBQ1osd0JBQXdCO3dCQUN4QixnQkFBZ0I7cUJBQ2pCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLG1CQUFtQjt3QkFDbkIsZ0JBQWdCO3dCQUNoQixrQkFBa0I7d0JBQ2xCLGNBQWM7cUJBQ2Y7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLHdCQUF3QjtxQkFDekI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmxleExheW91dE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2ZsZXgtbGF5b3V0JztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgTWF0Rm9ybUZpZWxkTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZm9ybS1maWVsZCc7XG5pbXBvcnQgeyBNYXRJbnB1dE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2lucHV0JztcblxuaW1wb3J0IHsgQ2hhdHRlckJveElucHV0Q29tcG9uZW50IH0gZnJvbSAnLi9jaGF0dGVyLWJveC1pbnB1dC5jb21wb25lbnQnO1xuaW1wb3J0IHsgQ291bnRlckNvbXBvbmVudCB9IGZyb20gJy4vY291bnRlci9jb3VudGVyLmNvbXBvbmVudCc7XG5cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbXG4gICAgQ2hhdHRlckJveElucHV0Q29tcG9uZW50LFxuICAgIENvdW50ZXJDb21wb25lbnQsXG4gIF0sXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgUmVhY3RpdmVGb3Jtc01vZHVsZSxcbiAgICBGbGV4TGF5b3V0TW9kdWxlLFxuICAgIE1hdEZvcm1GaWVsZE1vZHVsZSxcbiAgICBNYXRJbnB1dE1vZHVsZSxcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIENoYXR0ZXJCb3hJbnB1dENvbXBvbmVudFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIENoYXR0ZXJCb3hJbnB1dE1vZHVsZSB7IH1cbiJdfQ==

esm2015/public-api.js

 /*
  * Public API Surface of chatter-box-input
  */
-export * from './lib/chatter-box-input.service';
 export * from './lib/chatter-box-input.component';
 export * from './lib/chatter-box-input.module';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2NoYXR0ZXItYm94LWlucHV0L3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxpQ0FBaUMsQ0FBQztBQUNoRCxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsZ0NBQWdDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogUHVibGljIEFQSSBTdXJmYWNlIG9mIGNoYXR0ZXItYm94LWlucHV0XG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvY2hhdHRlci1ib3gtaW5wdXQuc2VydmljZSc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jaGF0dGVyLWJveC1pbnB1dC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY2hhdHRlci1ib3gtaW5wdXQubW9kdWxlJztcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2NoYXR0ZXItYm94LWlucHV0L3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLGdDQUFnQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBjaGF0dGVyLWJveC1pbnB1dFxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL2NoYXR0ZXItYm94LWlucHV0LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jaGF0dGVyLWJveC1pbnB1dC5tb2R1bGUnO1xuIl19

fesm2015/chatter-box-input.js

 import * as i0 from '@angular/core';
-import { Injectable, Component, NgModule } from '@angular/core';
+import { Component, Input, forwardRef, ViewChild, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, Validators, ReactiveFormsModule } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@angular/flex-layout/flex';
+import * as i5 from '@angular/cdk/text-field';
+import * as i6 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
-class ChatterBoxInputService {
-    constructor() { }
+class CounterComponent {
+    constructor() {
+        this.label = 'Total';
+        this.type = 1; // FORWARDS +1 and BACKWARDS -1
+    }
+    ngOnInit() {
+        this.counter = this.charCount.pipe(map(data => (this.type > 0) ? data : this.maxLength - data));
+    }
 }
-ChatterBoxInputService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ChatterBoxInputService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputService, decorators: [{
-            type: Injectable,
+CounterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CounterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CounterComponent, selector: "app-counter", inputs: { maxLength: "maxLength", minLength: "minLength", label: "label", charCount: "charCount", type: "type" }, ngImport: i0, template: "<div *ngIf=\"maxLength\" class=\"info\">\n  {{ label }} {{ counter | async }}\n</div>\n\n", styles: [".info{font-weight:400;color:gray;text-align:end}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CounterComponent, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root'
+                    selector: 'app-counter',
+                    templateUrl: './counter.component.html',
+                    styleUrls: ['./counter.component.scss']
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return []; }, propDecorators: { maxLength: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], charCount: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
 
+const INPUT_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => ChatterBoxInputComponent),
+    multi: true
+};
 class ChatterBoxInputComponent {
-    constructor() { }
+    constructor(fb) {
+        this.fb = fb;
+        this.maxLength = Infinity;
+        this.minLength = 0;
+        this.isRequired = false;
+        this.counterLabel = 'Total';
+        this.label = 'Leave a comment';
+        this.placeholder = 'Ex. It makes me feel...';
+        this.type = 1;
+        this.minRows = 1;
+        this.maxRows = 1;
+        this.chatter = this.fb.control(null);
+        this.charCount = new Observable();
+        this._disabled = false;
+        this._readOnly = false;
+        this.heightAdjust = '0px';
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+    }
+    set disabled(value) {
+        this._disabled = value;
+        if (value) {
+            this.chatter.disable();
+        }
+        else {
+            this.chatter.enable();
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set readOnly(value) {
+        this._readOnly = value;
+        this.disabled = value;
+    }
+    get readOnly() {
+        return this._readOnly;
+    }
     ngOnInit() {
+        if (this.isRequired)
+            this.chatter.addValidators(Validators.required);
+        if (this.maxLength)
+            this.chatter.addValidators(Validators.maxLength(this.maxLength));
+        if (this.maxLength)
+            this.chatter.addValidators(Validators.minLength(this.minLength));
+        this.charCount = this.chatter.valueChanges.pipe(map(data => (!data) ? 0 : data.toString().length));
+        this.chatter.valueChanges.pipe().subscribe(data => {
+            this.onChange(data);
+            this.calcHeight();
+        });
+        this.calcHeight();
     }
+    calcHeight() {
+        this.heightAdjust = `${this.textArea.nativeElement.clientHeight + 44}px`;
+    }
+    writeValue(value) {
+        setTimeout(() => {
+            this.chatter.patchValue(value);
+        }, 0);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onEnter() {
+        this.calcHeight();
+    }
+    onBlur() {
+        this.onChange(this.chatter.value);
+        this.onTouched();
+    }
 }
-ChatterBoxInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChatterBoxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChatterBoxInputComponent, selector: "lib-chatter-box-input", ngImport: i0, template: `
-    <p>
-      chatter-box-input works!
-    </p>
-  `, isInline: true });
+ChatterBoxInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+ChatterBoxInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChatterBoxInputComponent, selector: "app-chatter-box", inputs: { maxLength: "maxLength", minLength: "minLength", isRequired: "isRequired", counterLabel: "counterLabel", label: "label", placeholder: "placeholder", type: "type", minRows: "minRows", maxRows: "maxRows", appearance: "appearance", disabled: "disabled", readOnly: "readOnly" }, providers: [INPUT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, static: true }], ngImport: i0, template: "<div>\n  <mat-form-field\n    fxFill\n    [style.height]=\"heightAdjust\"\n    [appearance]=\"appearance\"\n  >\n    <mat-label>{{ label }}</mat-label>\n\n    <textarea\n      #textArea id=\"testMe\"\n      class=\"message\"\n      cdkTextareaAutosize\n      [cdkAutosizeMinRows]=\"minRows\"\n      [cdkAutosizeMaxRows]=\"maxRows\"\n      [class.enabled]=\"readOnly\"\n      matInput placeholder=\"{{ placeholder }}\"\n      maxlength=\"{{ maxLength }}\"\n      [formControl]=\"chatter\"\n      (blur)=\"onBlur()\"\n      (keyup.enter)=\"onEnter()\"\n    ></textarea>\n  </mat-form-field>\n</div>\n\n<app-counter\n  [minLength]=\"minLength\"\n  [maxLength]=\"maxLength\"\n  [charCount]=\"charCount\"\n  [type]=\"type\"\n  [label]=\"counterLabel\"\n></app-counter>\n\n", styles: [".enabled{color:#000}.message{font-size:11pt;line-height:14pt}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: CounterComponent, selector: "app-counter", inputs: ["maxLength", "minLength", "label", "charCount", "type"] }], directives: [{ type: i4.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i2.MatLabel, selector: "mat-label" }, { type: i5.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'lib-chatter-box-input',
-                    template: `
-    <p>
-      chatter-box-input works!
-    </p>
-  `,
-                    styles: []
+                    selector: 'app-chatter-box',
+                    templateUrl: './chatter-box-input.component.html',
+                    styleUrls: ['./chatter-box-input.component.scss'],
+                    providers: [INPUT_VALUE_ACCESSOR]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { textArea: [{
+                type: ViewChild,
+                args: ['textArea', { static: true }]
+            }], maxLength: [{
+                type: Input
+            }], minLength: [{
+                type: Input
+            }], isRequired: [{
+                type: Input
+            }], counterLabel: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], minRows: [{
+                type: Input
+            }], maxRows: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }] } });
 
@@ -43,4 +172,15 @@ class ChatterBoxInputModule {
 ChatterBoxInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ChatterBoxInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputModule, declarations: [ChatterBoxInputComponent], exports: [ChatterBoxInputComponent] });
-ChatterBoxInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputModule, imports: [[]] });
+ChatterBoxInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputModule, declarations: [ChatterBoxInputComponent,
+        CounterComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        FlexLayoutModule,
+        MatFormFieldModule,
+        MatInputModule], exports: [ChatterBoxInputComponent] });
+ChatterBoxInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputModule, imports: [[
+            CommonModule,
+            ReactiveFormsModule,
+            FlexLayoutModule,
+            MatFormFieldModule,
+            MatInputModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatterBoxInputModule, decorators: [{
@@ -50,5 +190,12 @@ type: NgModule,
                     declarations: [
-                        ChatterBoxInputComponent
+                        ChatterBoxInputComponent,
+                        CounterComponent,
                     ],
-                    imports: [],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FlexLayoutModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                    ],
                     exports: [
@@ -68,3 +215,3 @@ ChatterBoxInputComponent
 
-export { ChatterBoxInputComponent, ChatterBoxInputModule, ChatterBoxInputService };
+export { ChatterBoxInputComponent, ChatterBoxInputModule, INPUT_VALUE_ACCESSOR };
 //# sourceMappingURL=chatter-box-input.js.map

lib/chatter-box-input.component.d.ts

@@ -1,8 +0,42 @@
-import { OnInit } from '@angular/core';
+import { OnInit, ElementRef } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
+import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
+export declare const INPUT_VALUE_ACCESSOR: any;
 export declare class ChatterBoxInputComponent implements OnInit {
-    constructor();
+    private fb;
+    textArea: ElementRef;
+    maxLength: number;
+    minLength: number;
+    isRequired: boolean;
+    counterLabel: string;
+    label: string;
+    placeholder: string;
+    type: number;
+    minRows: number;
+    maxRows: number;
+    appearance: MatFormFieldAppearance;
+    chatter: import("@angular/forms").FormControl;
+    charCount: Observable<number>;
+    _disabled: boolean;
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    _readOnly: boolean;
+    set readOnly(value: boolean);
+    get readOnly(): boolean;
+    heightAdjust: string;
+    private onChange;
+    private onTouched;
+    constructor(fb: FormBuilder);
     ngOnInit(): void;
+    calcHeight(): void;
+    writeValue(value: any): void;
+    registerOnChange(fn: (_: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    onEnter(): void;
+    onBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChatterBoxInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChatterBoxInputComponent, "lib-chatter-box-input", never, {}, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChatterBoxInputComponent, "app-chatter-box", never, { "maxLength": "maxLength"; "minLength": "minLength"; "isRequired": "isRequired"; "counterLabel": "counterLabel"; "label": "label"; "placeholder": "placeholder"; "type": "type"; "minRows": "minRows"; "maxRows": "maxRows"; "appearance": "appearance"; "disabled": "disabled"; "readOnly": "readOnly"; }, {}, never, never>;
 }

lib/chatter-box-input.module.d.ts

 import * as i0 from "@angular/core";
 import * as i1 from "./chatter-box-input.component";
+import * as i2 from "./counter/counter.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/forms";
+import * as i5 from "@angular/flex-layout";
+import * as i6 from "@angular/material/form-field";
+import * as i7 from "@angular/material/input";
 export declare class ChatterBoxInputModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ChatterBoxInputModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ChatterBoxInputModule, [typeof i1.ChatterBoxInputComponent], never, [typeof i1.ChatterBoxInputComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ChatterBoxInputModule, [typeof i1.ChatterBoxInputComponent, typeof i2.CounterComponent], [typeof i3.CommonModule, typeof i4.ReactiveFormsModule, typeof i5.FlexLayoutModule, typeof i6.MatFormFieldModule, typeof i7.MatInputModule], [typeof i1.ChatterBoxInputComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ChatterBoxInputModule>;
 }

package.json

 {
   "name": "chatter-box-input",
-  "version": "0.0.1",
+  "version": "0.0.2",
+  "description": "This Angular Material TextArea Input that a formControl displaying the charCount or Char Remaining",
+  "author": "Mike Boni <[e-mail]> (http://wavecoders.ca)",
+  "license": "ISC",
+  "keywords": [
+    "angular",
+    "ui",
+    "text area",
+    "formControl",
+    "input",
+    "twitter",
+    "charater count",
+    "charater remaining"
+  ],
+  "homepage": "https://wavecoders.ca",
   "peerDependencies": {
@@ -5,0 +19,0 @@ "@angular/common": "^12.2.0",

public-api.d.ts

@@ -1,3 +0,2 @@
-export * from './lib/chatter-box-input.service';
 export * from './lib/chatter-box-input.component';
 export * from './lib/chatter-box-input.module';

README.md

@@ -1,24 +0,69 @@
-# ChatterBoxInput
+# Chatterbox
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.
+Chatterbox is a simple material formcontrol component text area that expands and indicates the number of chars entered or remaining.
 
-## Code scaffolding
+## Inputs
 
-Run `ng generate component component-name --project chatter-box-input` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project chatter-box-input`.
-> Note: Don't forget to add `--project chatter-box-input` or else it will be added to the default project in your `angular.json` file. 
+The following Inputs are available
 
-## Build
+| 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% |
 
-Run `ng build chatter-box-input` to build the project. The build artifacts will be stored in the `dist/` directory.
+## FormControl
 
-## Publishing
+`formControlName="comments"`
 
-After building your library with `ng build chatter-box-input`, go to the dist folder `cd dist/chatter-box-input` and run `npm publish`.
+```
+ countrySelection = this.fb.group({
+    comments: [null],
+  })
+```
 
-## Running unit tests
+## Options
 
-Run `ng test chatter-box-input` to execute the unit tests via [Karma](https://karma-runner.github.io).
+Here is the minimum setup required
 
-## Further help
+```
+  <app-chatter-box
+    [maxLength]="255"
+    [minLength]="0"
+    [label]="'Please enter your message'"
+    [placeholder]="'I need some assisstance...'"
+    [counterLabel]="'Total Remaining'"
+    [type]="-1"
+    formControlName="chatter"
+  ></app-chatter-box>
+```
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+Here is the maximum setup
+```
+<div [formGroup]="form">
+
+  <app-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"
+  ></app-chatter-box>
+
+</div>
+```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

81412

increased by256.74%

Number of low license alerts

0

decreased by-100%

Lines of code

787

increased by222.54%

Number of low maintenance alerts

1

decreased by-50%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

70

increased by180%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes