custom component (input dropdown grid textarea map captcha) 
================================

#### Installation

npm: `npm install chi-app-lib` 

#### lib-chi-input (material design)

    @Input() type = 'text';
    @Input() direction = 'rtl';
    @Input() floatLabel = 'auto'; // never
    @Input() pattern = '';
    @Input() petternMessage = 'مقدار این فیلد صحیح نیست!';
    @Input() className;
    @Input() readonly;
    @Input() required;
    @Input() placeHolder;
    @Input() hintText;
    @Input() minLength;
    @Input() maxLength;
    @Input() showValidatorMessage = true;
    @Input() showSuffix = false;
    @Input() suffixIcon = 'close';
    @Input() isDirty;
    @Input() focuse;
    @Output() suffixClicked = new EventEmitter<any>();
    @Output() isValid = new EventEmitter<boolean>();

#### lib-text-area (material design)

     @Input() type = 'text';
     @Input() direction = 'rtl';
     @Input() pattern = '';
     @Input() className;
     @Input() readonly;
     @Input() required;
     @Input() placeHolder;
     @Input() hintText;
     @Input() minLength ;
     @Input() maxLength ;
     @Input() showCountValue ;
     @Input() isDirty ;
     @Input() showValidatorMessage = true ;
     @Output() isValid = new EventEmitter<boolean>();

#### lib-dropdown (material design)
     @Input() options = []; ex: [{value: 'value', viewValue: 'viewText'}]
     @Input() direction = 'rtl';
     @Input() floatLabel = 'auto'; // never
     @Input() pattern = '';
     @Input() className;
     @Input() readonly;
     @Input() required;
     @Input() placeHolder;
     @Input() showValidatorMessage = true;
     @Input() isDirty;
     @Output() isValid = new EventEmitter<boolean>();
     @Output() valueChanged = new EventEmitter<any>();

#### lib-grid (material design)
     @Input() columns: string[] = [];
     @Input() actionsColumns: string[] = [];
     @Input() columnsToDisplay: string[] ;
     @Input() data;
     @Input() height = '400px';
     @Input() hasFilter;
     @Input() filterOfSrc;
     @Input() filterOnSrc;
     @Output() openFilter = new EventEmitter<any>();
     @Output() clearFilter = new EventEmitter<any>();
     @Output() actionActor = new EventEmitter<any>(); *** reurn value Format: {actor: actor, row: row}
     
      ***example Column-define
     
      column=[{
            columnDef: 'databaseField',
            type: 'string', // 'color' // number
            width: '20%',
            header: 'headerName',
            hasIcon: true, // type is 'color'
            color: 'red',
            icon: 'fonMaterialIcon', // type is 'color' && 'hasIcon' show this font-icon
            bold: (element: any) => `${!element.seen}`,
            cell: (element: any) => `${element.name}`
          },
          
      /* for define action column */
      
      {
        columnDef: 'actions',
        type: 'string',
        width: '30%',
        header: '',
        cell: (element: any) => ``
      },
      
      /* for define filter column */
      {
        columnDef: 'filter',
        type: 'string',
        width: '30%',
        header: '',
        cell: (element: any) => ``
      }]
      
      
      ***example of action Column-define
      
      actinColumn = [
           {'name': 'action Name', 'actor': 'actionFunction', 'show': showActionFunction}];
           
               
#### lib-chi-map (mapbox-gl-js)

      @Input() mapUrl;
      @Input() maxZoom = 18;
      @Input() minZoom = 5;
      @Input() zoom = 5;
      @Input() center: any = [51.4, 35.7];
      @Input() southWest = {lat: 24.350969, lng: 44.0};
      @Input() northEast = {lat: 39.912996, lng: 63.5};
      @Input() zoomControl = false;
      @Input() dragging = true;
      @Input() markerUrl;
      @Input() markerSize;
      @Input() markerAnchor;
      @Input() coordinateMarker;
      @Input() resetCoordinate;
      @Input() zoomMarker = 17;
      @Input() width;
      @Input() height;
      @Input() showMarker = true;
      @Output() coordinate = new EventEmitter<any>();
      @Output() getMap = new EventEmitter<any>();