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>();