appproject-components 1.0.47 → 1.0.49

package/src/lib/grid-view/grid-view.component.ts

@@ -1,292 +1,292 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-import { GridColuna, GridTabela, LibService } from 'appproject-lib';
-
-@Component({
-  selector: 'kb-grid-view',    
-  templateUrl: './grid-view.component.html',
-  styleUrl: './grid-view.component.scss'
-})
-export class GridViewComponent implements OnInit, OnChanges {
-  @Input() empresaId: number;
-  @Input() tabelaCampos: GridTabela;
-  @Input() dataSet: Array<any>;
-  @Input() minHeight: string = '400px';
-  @Input() inMemoryPagination: boolean = false;
-
-  @Output() selecionarItem = new EventEmitter();
-  @Output() excluirItem = new EventEmitter();
-  @Output() selecionarChecked = new EventEmitter();
-
-  selectedItem: any;
-  //inputs = inject(new InjectionToken<any>('title inputs'));
-  grupos: any[] = [{ Coluna: '', Tabela: null, Dados: null, Nivel: 0 }];
-
-  // tabelaCampos = {
-  //   Selecionar: false,
-  //   Exportar: true,
-  //   Colunas: [
-  //     { Campo: 'Id', Titulo: 'Id', Tamanho: '10%', Ordem: true, Grupo: false, Filtrar: true, OrdemStatus: 0, Tipo: 'number', Valores: [], FiltroOperador: '=', FiltroValor: '', FiltroVisivel: false },
-  //     { Campo: 'Marca', Titulo: 'Marca', Tamanho: '25%', Ordem: true, Grupo: true, Filtrar: true, OrdemStatus: 0, Tipo: 'string', Valores: [], FiltroOperador: '=', FiltroValor: '', FiltroVisivel: false },
-  //     { Campo: 'Descricao', Titulo: 'Descrição', Tamanho: '25%', Ordem: true, Grupo: true, Filtrar: true, OrdemStatus: 0, Tipo: 'string', Valores: [], FiltroOperador: '=', FiltroValor: '', FiltroVisivel: false },
-  //     { Campo: 'Data', Titulo: 'Data', Tamanho: '20%', Ordem: true, Grupo: true, Filtrar: true, OrdemStatus: 0, Tipo: 'date', Valores: [], FiltroOperador: '=', FiltroValor: '', FiltroVisivel: false },
-  //     { Campo: 'Valor', Titulo: 'Valor', Tamanho: '20%', Ordem: true, Grupo: false, Filtrar: true, OrdemStatus: 0, Tipo: 'number', Valores: [], FiltroOperador: '=', FiltroValor: '', FiltroVisivel: false },
-  //   ]
-  // }
-
-  // dataSet: Array<any> = [
-  //   { Id: 1, Marca: 'Apple', Descricao: 'IPhone 14', Data: '2023-05-01', Valor: 7899.99 },
-  //   { Id: 2, Marca: 'Apple', Descricao: 'MacBook Pro', Data: '2023-06-01', Valor: 17999.99 },
-  //   { Id: 3, Marca: 'Samsung', Descricao: 'Galaxy S23', Data: '2023-05-01', Valor: 6899.99 },
-  //   { Id: 4, Marca: 'Sony', Descricao: 'PS 5', Data: '2023-06-01', Valor: 4899.99 },
-  //   { Id: 5, Marca: 'Samsung', Descricao: 'Watch 23', Data: '2023-05-01', Valor: 1899.99 },
-  // ]
-
-
-
-  groups = []
-  @Input() filteredDataSet = [];
-  pageDataSet = [];
-
-
-  //array com os campos filtrados para display
-  camposDisplay = [];
-
-  //filtro
-  isFiltroOpen: boolean = false;
-  selectedColuna: any;
-  todosSelecionados: boolean = false;
-
-  //pagination
-  //página atual
-  page: number = 1;
-  //registros por página
-  @Input() pageOffset: number = 20;
-  //total de registros
-  totalRec: number;
-  //total de páginas
-  totalPages: number;
-  //indexador de paginas
-  pages: number[];  
-  start: number;
-
-
-  constructor() { }
-
-  valoresFiltro() {
-    this.tabelaCampos.Colunas.forEach(c => {
-      if (c.Filtrar) {
-        //projetar a coluna
-        let initial = [];
-        let valores = this.dataSet.map(d => d[c.Campo]);
-        c.Valores = valores.filter((value, index, self) => {
-          return self.indexOf(value) === index;
-        }).map(v => { return { Selecionado: false, Valor: v } });
-      //   console.log(c.Campo, valores);
-      //   console.log(c.Valores)
-      }
-    })
-  }
-
-  ngOnInit() {
-
-
-    //this.inicializaGrupo();
-    //this.agrupar('Marca');
-    //console.log('inputs', this.inputs);
-    //console.log('Input empresa', this.empresaId);
-    GridTabela.init(this.tabelaCampos);
-    this.valoresFiltro();
-    this.filteredDataSet = this.dataSet;
-    console.log('Init Tabela campos', this.tabelaCampos);
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    console.log('On changes Tabela campos', this.tabelaCampos);
-    //evento chamado quando o dataset for atualizado
-    //inicializar vars de paginação
-    this.initPage();
-    this.todosSelecionados = false;
-  }
-
-  initPage() {
-    this.page = 1;
-    this.totalRec = this.filteredDataSet.length;
-    this.totalPages = Math.ceil(this.totalRec / this.pageOffset);    
-
-    if (this.inMemoryPagination === true) {
-      this.getRegistrosPage();
-    } else {
-      this.pageDataSet = this.filteredDataSet;
-    }
-  }
-
-  getRegistrosPage() {
-    this.start = (this.page - 1) * this.pageOffset;
-    console.log('dataset', this.filteredDataSet);
-    console.log('start', this.start);
-    console.log('offset', this.pageOffset);
-    this.pageDataSet = this.filteredDataSet.slice(this.start, (this.start + this.pageOffset));
-    console.log('page dataset', this.pageDataSet);
-  }
-
-  proximo() {
-    if (this.page < this.totalPages) {
-      this.page++;
-      this.getRegistrosPage();
-      this.gerarArrayPags();
-    }
-  }
-
-  anterior() {
-    if (this.page > 1) {
-      this.page--;
-      this.getRegistrosPage();
-      this.gerarArrayPags();
-    }
-  }
-
-  gerarArrayPags() {
-
-  }
-
-  inicializaGrupo() {
-    //inicializar o primeiro grupo 'default'
-    this.camposDisplay = this.tabelaCampos.Colunas;
-    this.grupos[0].Tabela = this.camposDisplay;
-    this.grupos[0].Dados = this.dataSet;
-  }
-
-  agrupar(campo: string) {
-    this.groups.push(campo);
-    let level = 0;
-    for (let g in this.groups) {
-      console.log(g);
-      //filtrar os dados
-      let result = this.dataSet.reduce((group, data) => {
-        const { g } = data;
-        group[g] = group[campo] ?? [];
-        group[g].push(data);
-        return group;
-      }, {});
-      console.log(result);
-    }
-
-  }
-
-  filtrarCampos(coluna = '') {
-    if (coluna != '') {
-
-    } else {
-
-    }
-  }
-
-  filtrar(col: GridColuna) {
-    //console.log('filtrar', col);
-    if (col.Valores && col.Valores.find(v => v.Selecionado) != null) {
-      const valores = col.Valores.filter(v => v.Selecionado).map(v => v.Valor);
-
-      //filtrar por valores selecionados
-      this.filteredDataSet = this.dataSet.filter(d => valores.indexOf(d[col.Campo]) > -1);
-    } else if (col.FiltroOperador && col.FiltroValor) {
-      //console.log(col.FiltroOperador, col.FiltroValor)
-      try {
-        this.filteredDataSet = this.dataSet.filter(d => {
-          switch (col.FiltroOperador) {
-            case "=":
-              return d[col.Campo] == col.FiltroValor;
-            case ">=":
-              if (col.Tipo == 'number') {
-                return LibService.stringToDecimal(d[col.Campo], true) >= LibService.stringToDecimal(col.FiltroValor, true);  
-              } else if (col.Tipo == 'data') {
-                return new Date(this.dataToString(d[col.Campo])) >= new Date(this.dataToString(col.FiltroValor));  
-              } else
-              return d[col.Campo] >= col.FiltroValor;
-            case "<=":
-              if (col.Tipo == 'number') {
-                return LibService.stringToDecimal(d[col.Campo], true) <= LibService.stringToDecimal(col.FiltroValor, true);  
-              } else
-              return d[col.Campo] <= col.FiltroValor;
-            case "tem":
-              return d[col.Campo].toString().toLowerCase().indexOf(col.FiltroValor.toLowerCase()) > -1;
-            default:
-              return true;
-          }
-
-        });
-      } catch(ex) {
-        console.log(ex);
-        this.filteredDataSet = this.dataSet;
-      }
-    }
-    col.FiltroVisivel = false;
-
-    this.initPage();
-  }
-
-  getPage() {
-
-  }
-
-  limpar() {
-    this.filteredDataSet = this.dataSet;
-  }
-
-  dataToString(data: string): string {
-    if (data) {
-      return data.split('/').reverse().join('-');
-    } else {
-      return "";
-    }
-  }
-
-  ordenar(col: GridColuna) {
-    if (col.OrdemStatus == 0 || col.OrdemStatus == -1) {
-      if (col.Tipo == 'data') {
-        this.filteredDataSet.sort((a, b) => this.dataToString(a[col.Campo]) > this.dataToString(b[col.Campo]) ? 1 : (this.dataToString(a[col.Campo]) < this.dataToString(b[col.Campo]) ? -1 : 0));
-      } else if (col.Tipo == 'number') {
-        this.filteredDataSet.sort((a, b) => LibService.stringToDecimal(a[col.Campo]) > LibService.stringToDecimal(b[col.Campo]) ? 1 : (LibService.stringToDecimal(a[col.Campo]) < LibService.stringToDecimal(b[col.Campo]) ? -1 : 0));
-      } else 
-        this.filteredDataSet.sort((a, b) => a[col.Campo] > b[col.Campo] ? 1 : (a[col.Campo] < b[col.Campo] ? -1 : 0));
-      col.OrdemStatus = 1; //asc
-    } else {
-      if (col.Tipo == 'data') {
-        this.filteredDataSet.sort((a, b) => this.dataToString(a[col.Campo]) < this.dataToString(b[col.Campo]) ? 1 : (this.dataToString(a[col.Campo]) > this.dataToString(b[col.Campo]) ? -1 : 0));
-      } else if (col.Tipo == 'number') {
-        this.filteredDataSet.sort((a, b) => LibService.stringToDecimal(a[col.Campo], true) < LibService.stringToDecimal(b[col.Campo], true) ? 1 : (LibService.stringToDecimal(a[col.Campo], true) > LibService.stringToDecimal(b[col.Campo], true) ? -1 : 0));
-      } else 
-      this.filteredDataSet.sort((a, b) => a[col.Campo] < b[col.Campo] ? 1 : (a[col.Campo] > b[col.Campo] ? -1 : 0));
-      col.OrdemStatus = -1; //desc
-    }
-  }
-
-  setFiltroOpen(col: any) {
-    col.FiltroVisivel = !col.FiltroVisivel
-    if (col.FiltroVisivel) {
-      this.selectedColuna = col;
-      //console.log(this.selectedColuna);
-    }    
-  }
-
-  selecionarTodos() {
-    //this.todosSelecionados = !this.todosSelecionados;
-    this.filteredDataSet.forEach(item => {
-      item[this.tabelaCampos.CampoSelecionar] = this.todosSelecionados;
-    });
-    this.selecionarChecked.emit();
-  }
-
-  selecionarLinha(item: any) {
-    this.selecionarItem.emit(item);
-    this.selectedItem = item;
-  }
-
-  excluirLinha(item: any) {
-    this.excluirItem.emit(item);
-  }
-
-  //check
-  selecionadoChecked() {
-    this.selecionarChecked.emit();
-  }
-}
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { GridColuna, GridTabela, LibService } from 'appproject-lib';
+
+@Component({
+  selector: 'kb-grid-view',    
+  templateUrl: './grid-view.component.html',
+  styleUrl: './grid-view.component.scss'
+})
+export class GridViewComponent implements OnInit, OnChanges {
+  @Input() empresaId: number;
+  @Input() tabelaCampos: GridTabela;
+  @Input() dataSet: Array<any>;
+  @Input() minHeight: string = '400px';
+  @Input() inMemoryPagination: boolean = false;
+
+  @Output() selecionarItem = new EventEmitter();
+  @Output() excluirItem = new EventEmitter();
+  @Output() selecionarChecked = new EventEmitter();
+
+  selectedItem: any;
+  //inputs = inject(new InjectionToken<any>('title inputs'));
+  grupos: any[] = [{ Coluna: '', Tabela: null, Dados: null, Nivel: 0 }];
+
+  // tabelaCampos = {
+  //   Selecionar: false,
+  //   Exportar: true,
+  //   Colunas: [
+  //     { Campo: 'Id', Titulo: 'Id', Tamanho: '10%', Ordem: true, Grupo: false, Filtrar: true, OrdemStatus: 0, Tipo: 'number', Valores: [], FiltroOperador: '=', FiltroValor: '', FiltroVisivel: false },
+  //     { Campo: 'Marca', Titulo: 'Marca', Tamanho: '25%', Ordem: true, Grupo: true, Filtrar: true, OrdemStatus: 0, Tipo: 'string', Valores: [], FiltroOperador: '=', FiltroValor: '', FiltroVisivel: false },
+  //     { Campo: 'Descricao', Titulo: 'Descrição', Tamanho: '25%', Ordem: true, Grupo: true, Filtrar: true, OrdemStatus: 0, Tipo: 'string', Valores: [], FiltroOperador: '=', FiltroValor: '', FiltroVisivel: false },
+  //     { Campo: 'Data', Titulo: 'Data', Tamanho: '20%', Ordem: true, Grupo: true, Filtrar: true, OrdemStatus: 0, Tipo: 'date', Valores: [], FiltroOperador: '=', FiltroValor: '', FiltroVisivel: false },
+  //     { Campo: 'Valor', Titulo: 'Valor', Tamanho: '20%', Ordem: true, Grupo: false, Filtrar: true, OrdemStatus: 0, Tipo: 'number', Valores: [], FiltroOperador: '=', FiltroValor: '', FiltroVisivel: false },
+  //   ]
+  // }
+
+  // dataSet: Array<any> = [
+  //   { Id: 1, Marca: 'Apple', Descricao: 'IPhone 14', Data: '2023-05-01', Valor: 7899.99 },
+  //   { Id: 2, Marca: 'Apple', Descricao: 'MacBook Pro', Data: '2023-06-01', Valor: 17999.99 },
+  //   { Id: 3, Marca: 'Samsung', Descricao: 'Galaxy S23', Data: '2023-05-01', Valor: 6899.99 },
+  //   { Id: 4, Marca: 'Sony', Descricao: 'PS 5', Data: '2023-06-01', Valor: 4899.99 },
+  //   { Id: 5, Marca: 'Samsung', Descricao: 'Watch 23', Data: '2023-05-01', Valor: 1899.99 },
+  // ]
+
+
+
+  groups = []
+  @Input() filteredDataSet = [];
+  pageDataSet = [];
+
+
+  //array com os campos filtrados para display
+  camposDisplay = [];
+
+  //filtro
+  isFiltroOpen: boolean = false;
+  selectedColuna: any;
+  todosSelecionados: boolean = false;
+
+  //pagination
+  //página atual
+  page: number = 1;
+  //registros por página
+  @Input() pageOffset: number = 20;
+  //total de registros
+  totalRec: number;
+  //total de páginas
+  totalPages: number;
+  //indexador de paginas
+  pages: number[];  
+  start: number;
+
+
+  constructor() { }
+
+  valoresFiltro() {
+    this.tabelaCampos.Colunas.forEach(c => {
+      if (c.Filtrar) {
+        //projetar a coluna
+        let initial = [];
+        let valores = this.dataSet.map(d => d[c.Campo]);
+        c.Valores = valores.filter((value, index, self) => {
+          return self.indexOf(value) === index;
+        }).map(v => { return { Selecionado: false, Valor: v } });
+      //   console.log(c.Campo, valores);
+      //   console.log(c.Valores)
+      }
+    })
+  }
+
+  ngOnInit() {
+
+
+    //this.inicializaGrupo();
+    //this.agrupar('Marca');
+    //console.log('inputs', this.inputs);
+    //console.log('Input empresa', this.empresaId);
+    GridTabela.init(this.tabelaCampos);
+    this.valoresFiltro();
+    this.filteredDataSet = this.dataSet;
+    console.log('Init Tabela campos', this.tabelaCampos);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    console.log('On changes Tabela campos', this.tabelaCampos);
+    //evento chamado quando o dataset for atualizado
+    //inicializar vars de paginação
+    this.initPage();
+    this.todosSelecionados = false;
+  }
+
+  initPage() {
+    this.page = 1;
+    this.totalRec = this.filteredDataSet.length;
+    this.totalPages = Math.ceil(this.totalRec / this.pageOffset);    
+
+    if (this.inMemoryPagination === true) {
+      this.getRegistrosPage();
+    } else {
+      this.pageDataSet = this.filteredDataSet;
+    }
+  }
+
+  getRegistrosPage() {
+    this.start = (this.page - 1) * this.pageOffset;
+    console.log('dataset', this.filteredDataSet);
+    console.log('start', this.start);
+    console.log('offset', this.pageOffset);
+    this.pageDataSet = this.filteredDataSet.slice(this.start, (this.start + this.pageOffset));
+    console.log('page dataset', this.pageDataSet);
+  }
+
+  proximo() {
+    if (this.page < this.totalPages) {
+      this.page++;
+      this.getRegistrosPage();
+      this.gerarArrayPags();
+    }
+  }
+
+  anterior() {
+    if (this.page > 1) {
+      this.page--;
+      this.getRegistrosPage();
+      this.gerarArrayPags();
+    }
+  }
+
+  gerarArrayPags() {
+
+  }
+
+  inicializaGrupo() {
+    //inicializar o primeiro grupo 'default'
+    this.camposDisplay = this.tabelaCampos.Colunas;
+    this.grupos[0].Tabela = this.camposDisplay;
+    this.grupos[0].Dados = this.dataSet;
+  }
+
+  agrupar(campo: string) {
+    this.groups.push(campo);
+    let level = 0;
+    for (let g in this.groups) {
+      console.log(g);
+      //filtrar os dados
+      let result = this.dataSet.reduce((group, data) => {
+        const { g } = data;
+        group[g] = group[campo] ?? [];
+        group[g].push(data);
+        return group;
+      }, {});
+      console.log(result);
+    }
+
+  }
+
+  filtrarCampos(coluna = '') {
+    if (coluna != '') {
+
+    } else {
+
+    }
+  }
+
+  filtrar(col: GridColuna) {
+    //console.log('filtrar', col);
+    if (col.Valores && col.Valores.find(v => v.Selecionado) != null) {
+      const valores = col.Valores.filter(v => v.Selecionado).map(v => v.Valor);
+
+      //filtrar por valores selecionados
+      this.filteredDataSet = this.dataSet.filter(d => valores.indexOf(d[col.Campo]) > -1);
+    } else if (col.FiltroOperador && col.FiltroValor) {
+      //console.log(col.FiltroOperador, col.FiltroValor)
+      try {
+        this.filteredDataSet = this.dataSet.filter(d => {
+          switch (col.FiltroOperador) {
+            case "=":
+              return d[col.Campo] == col.FiltroValor;
+            case ">=":
+              if (col.Tipo == 'number') {
+                return LibService.stringToDecimal(d[col.Campo], true) >= LibService.stringToDecimal(col.FiltroValor, true);  
+              } else if (col.Tipo == 'data') {
+                return new Date(this.dataToString(d[col.Campo])) >= new Date(this.dataToString(col.FiltroValor));  
+              } else
+              return d[col.Campo] >= col.FiltroValor;
+            case "<=":
+              if (col.Tipo == 'number') {
+                return LibService.stringToDecimal(d[col.Campo], true) <= LibService.stringToDecimal(col.FiltroValor, true);  
+              } else
+              return d[col.Campo] <= col.FiltroValor;
+            case "tem":
+              return d[col.Campo].toString().toLowerCase().indexOf(col.FiltroValor.toLowerCase()) > -1;
+            default:
+              return true;
+          }
+
+        });
+      } catch(ex) {
+        console.log(ex);
+        this.filteredDataSet = this.dataSet;
+      }
+    }
+    col.FiltroVisivel = false;
+
+    this.initPage();
+  }
+
+  getPage() {
+
+  }
+
+  limpar() {
+    this.filteredDataSet = this.dataSet;
+  }
+
+  dataToString(data: string): string {
+    if (data) {
+      return data.split('/').reverse().join('-');
+    } else {
+      return "";
+    }
+  }
+
+  ordenar(col: GridColuna) {
+    if (col.OrdemStatus == 0 || col.OrdemStatus == -1) {
+      if (col.Tipo == 'data') {
+        this.filteredDataSet.sort((a, b) => this.dataToString(a[col.Campo]) > this.dataToString(b[col.Campo]) ? 1 : (this.dataToString(a[col.Campo]) < this.dataToString(b[col.Campo]) ? -1 : 0));
+      } else if (col.Tipo == 'number') {
+        this.filteredDataSet.sort((a, b) => LibService.stringToDecimal(a[col.Campo]) > LibService.stringToDecimal(b[col.Campo]) ? 1 : (LibService.stringToDecimal(a[col.Campo]) < LibService.stringToDecimal(b[col.Campo]) ? -1 : 0));
+      } else 
+        this.filteredDataSet.sort((a, b) => a[col.Campo] > b[col.Campo] ? 1 : (a[col.Campo] < b[col.Campo] ? -1 : 0));
+      col.OrdemStatus = 1; //asc
+    } else {
+      if (col.Tipo == 'data') {
+        this.filteredDataSet.sort((a, b) => this.dataToString(a[col.Campo]) < this.dataToString(b[col.Campo]) ? 1 : (this.dataToString(a[col.Campo]) > this.dataToString(b[col.Campo]) ? -1 : 0));
+      } else if (col.Tipo == 'number') {
+        this.filteredDataSet.sort((a, b) => LibService.stringToDecimal(a[col.Campo], true) < LibService.stringToDecimal(b[col.Campo], true) ? 1 : (LibService.stringToDecimal(a[col.Campo], true) > LibService.stringToDecimal(b[col.Campo], true) ? -1 : 0));
+      } else 
+      this.filteredDataSet.sort((a, b) => a[col.Campo] < b[col.Campo] ? 1 : (a[col.Campo] > b[col.Campo] ? -1 : 0));
+      col.OrdemStatus = -1; //desc
+    }
+  }
+
+  setFiltroOpen(col: any) {
+    col.FiltroVisivel = !col.FiltroVisivel
+    if (col.FiltroVisivel) {
+      this.selectedColuna = col;
+      //console.log(this.selectedColuna);
+    }    
+  }
+
+  selecionarTodos() {
+    //this.todosSelecionados = !this.todosSelecionados;
+    this.filteredDataSet.forEach(item => {
+      item[this.tabelaCampos.CampoSelecionar] = this.todosSelecionados;
+    });
+    this.selecionarChecked.emit();
+  }
+
+  selecionarLinha(item: any) {
+    this.selecionarItem.emit(item);
+    this.selectedItem = item;
+  }
+
+  excluirLinha(item: any) {
+    this.excluirItem.emit(item);
+  }
+
+  //check
+  selecionadoChecked() {
+    this.selecionarChecked.emit();
+  }
+}

package/src/lib/input-area/input-area.component.spec.ts

@@ -1,23 +1,23 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { InputAreaComponent } from './input-area.component';
-
-describe('InputAreaComponent', () => {
-  let component: InputAreaComponent;
-  let fixture: ComponentFixture<InputAreaComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ InputAreaComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(InputAreaComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputAreaComponent } from './input-area.component';
+
+describe('InputAreaComponent', () => {
+  let component: InputAreaComponent;
+  let fixture: ComponentFixture<InputAreaComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ InputAreaComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(InputAreaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});