appproject-components 1.0.43 → 1.0.44

package/fesm2022/appproject-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, EventEmitter, Input, Output, ElementRef, ViewChild, Inject, InjectionToken, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i3 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@ionic/angular';
@@ -11,6 +11,8 @@ import { HttpClientModule } from '@angular/common/http';
 import { Subject, of, Observable } from 'rxjs';
 import { debounceTime, switchMap } from 'rxjs/operators';
 import * as i1$1 from '@angular/platform-browser';
+import * as i4 from 'appproject-lib';
+import { GridTabela, LibService, ValorFormatPipe, SafeHtmlPipe } from 'appproject-lib';
 
 class AppprojectComponentsService {
     constructor() { }
@@ -2119,6 +2121,274 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
                 type: Input
             }] } });
 
+class GridViewComponent {
+    constructor() {
+        this.minHeight = '400px';
+        this.inMemoryPagination = false;
+        this.selecionarItem = new EventEmitter();
+        this.excluirItem = new EventEmitter();
+        this.selecionarChecked = new EventEmitter();
+        //inputs = inject(new InjectionToken<any>('title inputs'));
+        this.grupos = [{ 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 },
+        // ]
+        this.groups = [];
+        this.filteredDataSet = [];
+        this.pageDataSet = [];
+        //array com os campos filtrados para display
+        this.camposDisplay = [];
+        //filtro
+        this.isFiltroOpen = false;
+        this.todosSelecionados = false;
+        //pagination
+        //página atual
+        this.page = 1;
+        //registros por página
+        this.pageOffset = 20;
+    }
+    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) {
+        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) {
+        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) {
+        //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) {
+        if (data) {
+            return data.split('/').reverse().join('-');
+        }
+        else {
+            return "";
+        }
+    }
+    ordenar(col) {
+        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) {
+        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) {
+        this.selecionarItem.emit(item);
+        this.selectedItem = item;
+    }
+    excluirLinha(item) {
+        this.excluirItem.emit(item);
+    }
+    //check
+    selecionadoChecked() {
+        this.selecionarChecked.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: GridViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: GridViewComponent, selector: "kb-grid-view", inputs: { empresaId: "empresaId", tabelaCampos: "tabelaCampos", dataSet: "dataSet", minHeight: "minHeight", inMemoryPagination: "inMemoryPagination", filteredDataSet: "filteredDataSet", pageOffset: "pageOffset" }, outputs: { selecionarItem: "selecionarItem", excluirItem: "excluirItem", selecionarChecked: "selecionarChecked" }, usesOnChanges: true, ngImport: i0, template: "<div style=\"font-size: 14px;\">\n    <div id=\"painelExportacao\">\n      <ion-row *ngIf=\"inMemoryPagination\">\n        <!--\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"tabelaCampos.Selecionar === true\" size=\"small\" fill=\"outline\" color=\"medium\"\n            (click)=\"selecionarTodos()\">Selecionar Todos</ion-button>\n        </ion-col>\n        -->\n        <ion-col size=\"3\">\n          <ion-button *ngIf=\"inMemoryPagination === true\" size=\"small\" fill=\"outline\" color=\"bluetool\"\n            (click)=\"anterior()\">\n            <ion-icon name=\"chevron-back-outline\" slot=\"start\"></ion-icon>\n            Anterior\n          </ion-button>\n          <ion-button *ngIf=\"inMemoryPagination === true\" size=\"small\" fill=\"outline\" color=\"bluetool\"\n            (click)=\"proximo()\">\n            Pr\u00F3ximo\n            <ion-icon name=\"chevron-forward-outline\" slot=\"end\"></ion-icon>\n          </ion-button>                \n        </ion-col>\n        <ion-col size=\"2\">\n          <span style=\"display: block; margin-top: 10px;\" *ngIf=\"inMemoryPagination && totalRec > 0\">Exibindo {{ start + 1 }} - {{ (start + pageOffset) < totalRec ? (start + pageOffset) : totalRec }} total de {{ totalRec }}        \n          </span>      \n        </ion-col>\n      </ion-row>\n    </div>\n    <div style=\"width: 100%;\" [style.min-height]=\"minHeight\">\n      <table class=\"grid\">\n        <thead>\n          <tr style=\"background-color: var(--ion-color-bluetool); color: white;\">\n            <td *ngIf=\"tabelaCampos.Selecionar === true\" style=\"width: 3%; text-align: center;\">\n              <input type=\"checkbox\" [(ngModel)]=\"todosSelecionados\" (change)=\"selecionarTodos()\">\n            </td>\n            <td *ngFor=\"let col of tabelaCampos.Colunas\" [style.width]=\"col.Tamanho\">\n              <div style=\"position: relative;\">\n                <div style=\"display: flex; justify-content: space-between; align-items: end;\">\n                  <strong>{{ col.Titulo }}</strong>\n                  <div>\n                    <ion-icon *ngIf=\"col.Ordem\" slot=\"end\" (click)=\"ordenar(col)\" style=\"cursor: pointer;\"\n                      [name]=\"col.OrdemStatus == 0 ? 'swap-vertical' : (col.OrdemStatus == 1 ? 'arrow-up': 'arrow-down')\"></ion-icon>\n  \n                    <ion-icon *ngIf=\"col.Filtrar\" name=\"funnel\" (click)=\"setFiltroOpen(col)\" slot=\"end\"></ion-icon>\n                  </div>\n                </div>\n  \n  \n                <div class=\"caixaGrande\" [hidden]=\"!col.FiltroVisivel\" tabindex=\"-1\"\n                  style=\"color: black; display: block; position: absolute; z-index: 800; width: 210px; right: 0px; opacity: 0.9;\">\n                  Filtrar:\n                  <div>\n                    <div style=\"display: flex; justify-content: space-between; align-items: start;\">\n                      <select style=\"width: 80px;\" [(ngModel)]=\"col.FiltroOperador\">\n                        <option>=</option>\n                        <option>&gt;=</option>\n                        <option>&lt;=</option>\n                        <option>tem</option>\n                      </select>\n                      <input style=\"width: 100px;\" type=\"text\" [(ngModel)]=\"col.FiltroValor\">\n                    </div>\n                    <ion-button size=\"small\" color=\"medium\" expand=\"block\" (click)=\"filtrar(col)\">Filtrar</ion-button>\n                    <ion-button size=\"small\" color=\"light\" expand=\"block\" (click)=\"limpar()\">Limpar</ion-button>\n                  </div>\n                  <div *ngIf=\"col.Valores\" class=\"scroll-container\" style=\"height: 200px; overflow-y: scroll;\">\n                    <div *ngFor=\"let valor of col.Valores\">\n                      <input type=\"checkbox\" [(ngModel)]=\"valor.Selecionado\">\n                      <span>{{ valor.Valor }}</span>\n                    </div>\n                  </div>\n                </div>\n  \n              </div>\n            </td>\n            <td *ngIf=\"tabelaCampos.Excluir === true\">\n  \n            </td>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let item of pageDataSet\" [class]=\"item == selectedItem ? 'item-selecionado' : '' \">\n            <td *ngIf=\"tabelaCampos.Selecionar === true\" style=\"text-align: center; cursor: auto;\">\n              <input type=\"checkbox\" [(ngModel)]=\"item[tabelaCampos.CampoSelecionar]\" (change)=\"selecionadoChecked()\">\n            </td>\n            <td class=\"col\" *ngFor=\"let col of tabelaCampos.Colunas\" [style.width]=\"col.Tamanho\"\n              [style.text-align]=\"col.Tipo == 'number' ? 'right' : (col.Alinhamento ?? 'left')\"\n              (click)=\"col.ClickFunction ? col.ClickFunction(item) : selecionarLinha(item)\">\n              <span *ngIf=\"col.Pipe == 'date'\">{{ item[col.Campo] | date: 'dd/MM/yyyy' }}</span>              \n              <span *ngIf=\"col.Pipe == 'valor'\">{{ item[col.Campo] | valorFormat }}</span>\n              <span *ngIf=\"col.RenderFunction\" [innerHtml]=\"col.RenderFunction(item) | safeHtml\"></span>\n              <span *ngIf=\"!col.Pipe && !col.RenderFunction\">{{ item[col.Campo] ?? col.Default }}</span>\n            </td>\n            <td *ngIf=\"tabelaCampos.Excluir === true\" style=\"padding: 0px; text-align: center;\">\n              <ion-button size=\"small\" color=\"danger\" fill=\"outline\" style=\"transform: scale(0.85);\" (click)=\"excluirLinha(item)\">\n                <ion-icon name=\"trash\"></ion-icon>\n              </ion-button>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  \n    <ion-modal [isOpen]=\"isFiltroOpen\" (didDismiss)=\"isFiltroOpen = false;\">\n      <ng-template>\n        <ion-content class=\"ion-padding\">\n          <div class=\"caixaGrande\">\n            Filtrar:\n            <div *ngIf=\"selectedColuna.Valores\">\n              <div *ngFor=\"let valor of selectedColuna.Valores\">\n                <span>{{ valor }}</span>\n              </div>\n            </div>\n          </div>\n        </ion-content>\n      </ng-template>\n    </ion-modal>\n  </div>", styles: [".grid{width:100%}.grid thead td{border:1px solid gray;padding:4px}.grid tbody td{border:1px solid gray;padding:2px 4px}.grid tbody tr{cursor:pointer}.grid tbody tr:hover{background-color:#699ccc80;transition-duration:.5s}.grid tbody tr.item-selecionado{background-color:#699ccc33}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonModal, selector: "ion-modal", inputs: ["animated", "keepContentsMounted", "backdropBreakpoint", "backdropDismiss", "breakpoints", "canDismiss", "cssClass", "enterAnimation", "event", "handle", "handleBehavior", "initialBreakpoint", "isOpen", "keyboardClose", "leaveAnimation", "mode", "presentingElement", "showBackdrop", "translucent", "trigger"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i4.ValorFormatPipe, name: "valorFormat" }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "safeHtml" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: GridViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kb-grid-view', template: "<div style=\"font-size: 14px;\">\n    <div id=\"painelExportacao\">\n      <ion-row *ngIf=\"inMemoryPagination\">\n        <!--\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"tabelaCampos.Selecionar === true\" size=\"small\" fill=\"outline\" color=\"medium\"\n            (click)=\"selecionarTodos()\">Selecionar Todos</ion-button>\n        </ion-col>\n        -->\n        <ion-col size=\"3\">\n          <ion-button *ngIf=\"inMemoryPagination === true\" size=\"small\" fill=\"outline\" color=\"bluetool\"\n            (click)=\"anterior()\">\n            <ion-icon name=\"chevron-back-outline\" slot=\"start\"></ion-icon>\n            Anterior\n          </ion-button>\n          <ion-button *ngIf=\"inMemoryPagination === true\" size=\"small\" fill=\"outline\" color=\"bluetool\"\n            (click)=\"proximo()\">\n            Pr\u00F3ximo\n            <ion-icon name=\"chevron-forward-outline\" slot=\"end\"></ion-icon>\n          </ion-button>                \n        </ion-col>\n        <ion-col size=\"2\">\n          <span style=\"display: block; margin-top: 10px;\" *ngIf=\"inMemoryPagination && totalRec > 0\">Exibindo {{ start + 1 }} - {{ (start + pageOffset) < totalRec ? (start + pageOffset) : totalRec }} total de {{ totalRec }}        \n          </span>      \n        </ion-col>\n      </ion-row>\n    </div>\n    <div style=\"width: 100%;\" [style.min-height]=\"minHeight\">\n      <table class=\"grid\">\n        <thead>\n          <tr style=\"background-color: var(--ion-color-bluetool); color: white;\">\n            <td *ngIf=\"tabelaCampos.Selecionar === true\" style=\"width: 3%; text-align: center;\">\n              <input type=\"checkbox\" [(ngModel)]=\"todosSelecionados\" (change)=\"selecionarTodos()\">\n            </td>\n            <td *ngFor=\"let col of tabelaCampos.Colunas\" [style.width]=\"col.Tamanho\">\n              <div style=\"position: relative;\">\n                <div style=\"display: flex; justify-content: space-between; align-items: end;\">\n                  <strong>{{ col.Titulo }}</strong>\n                  <div>\n                    <ion-icon *ngIf=\"col.Ordem\" slot=\"end\" (click)=\"ordenar(col)\" style=\"cursor: pointer;\"\n                      [name]=\"col.OrdemStatus == 0 ? 'swap-vertical' : (col.OrdemStatus == 1 ? 'arrow-up': 'arrow-down')\"></ion-icon>\n  \n                    <ion-icon *ngIf=\"col.Filtrar\" name=\"funnel\" (click)=\"setFiltroOpen(col)\" slot=\"end\"></ion-icon>\n                  </div>\n                </div>\n  \n  \n                <div class=\"caixaGrande\" [hidden]=\"!col.FiltroVisivel\" tabindex=\"-1\"\n                  style=\"color: black; display: block; position: absolute; z-index: 800; width: 210px; right: 0px; opacity: 0.9;\">\n                  Filtrar:\n                  <div>\n                    <div style=\"display: flex; justify-content: space-between; align-items: start;\">\n                      <select style=\"width: 80px;\" [(ngModel)]=\"col.FiltroOperador\">\n                        <option>=</option>\n                        <option>&gt;=</option>\n                        <option>&lt;=</option>\n                        <option>tem</option>\n                      </select>\n                      <input style=\"width: 100px;\" type=\"text\" [(ngModel)]=\"col.FiltroValor\">\n                    </div>\n                    <ion-button size=\"small\" color=\"medium\" expand=\"block\" (click)=\"filtrar(col)\">Filtrar</ion-button>\n                    <ion-button size=\"small\" color=\"light\" expand=\"block\" (click)=\"limpar()\">Limpar</ion-button>\n                  </div>\n                  <div *ngIf=\"col.Valores\" class=\"scroll-container\" style=\"height: 200px; overflow-y: scroll;\">\n                    <div *ngFor=\"let valor of col.Valores\">\n                      <input type=\"checkbox\" [(ngModel)]=\"valor.Selecionado\">\n                      <span>{{ valor.Valor }}</span>\n                    </div>\n                  </div>\n                </div>\n  \n              </div>\n            </td>\n            <td *ngIf=\"tabelaCampos.Excluir === true\">\n  \n            </td>\n          </tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let item of pageDataSet\" [class]=\"item == selectedItem ? 'item-selecionado' : '' \">\n            <td *ngIf=\"tabelaCampos.Selecionar === true\" style=\"text-align: center; cursor: auto;\">\n              <input type=\"checkbox\" [(ngModel)]=\"item[tabelaCampos.CampoSelecionar]\" (change)=\"selecionadoChecked()\">\n            </td>\n            <td class=\"col\" *ngFor=\"let col of tabelaCampos.Colunas\" [style.width]=\"col.Tamanho\"\n              [style.text-align]=\"col.Tipo == 'number' ? 'right' : (col.Alinhamento ?? 'left')\"\n              (click)=\"col.ClickFunction ? col.ClickFunction(item) : selecionarLinha(item)\">\n              <span *ngIf=\"col.Pipe == 'date'\">{{ item[col.Campo] | date: 'dd/MM/yyyy' }}</span>              \n              <span *ngIf=\"col.Pipe == 'valor'\">{{ item[col.Campo] | valorFormat }}</span>\n              <span *ngIf=\"col.RenderFunction\" [innerHtml]=\"col.RenderFunction(item) | safeHtml\"></span>\n              <span *ngIf=\"!col.Pipe && !col.RenderFunction\">{{ item[col.Campo] ?? col.Default }}</span>\n            </td>\n            <td *ngIf=\"tabelaCampos.Excluir === true\" style=\"padding: 0px; text-align: center;\">\n              <ion-button size=\"small\" color=\"danger\" fill=\"outline\" style=\"transform: scale(0.85);\" (click)=\"excluirLinha(item)\">\n                <ion-icon name=\"trash\"></ion-icon>\n              </ion-button>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  \n    <ion-modal [isOpen]=\"isFiltroOpen\" (didDismiss)=\"isFiltroOpen = false;\">\n      <ng-template>\n        <ion-content class=\"ion-padding\">\n          <div class=\"caixaGrande\">\n            Filtrar:\n            <div *ngIf=\"selectedColuna.Valores\">\n              <div *ngFor=\"let valor of selectedColuna.Valores\">\n                <span>{{ valor }}</span>\n              </div>\n            </div>\n          </div>\n        </ion-content>\n      </ng-template>\n    </ion-modal>\n  </div>", styles: [".grid{width:100%}.grid thead td{border:1px solid gray;padding:4px}.grid tbody td{border:1px solid gray;padding:2px 4px}.grid tbody tr{cursor:pointer}.grid tbody tr:hover{background-color:#699ccc80;transition-duration:.5s}.grid tbody tr.item-selecionado{background-color:#699ccc33}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { empresaId: [{
+                type: Input
+            }], tabelaCampos: [{
+                type: Input
+            }], dataSet: [{
+                type: Input
+            }], minHeight: [{
+                type: Input
+            }], inMemoryPagination: [{
+                type: Input
+            }], selecionarItem: [{
+                type: Output
+            }], excluirItem: [{
+                type: Output
+            }], selecionarChecked: [{
+                type: Output
+            }], filteredDataSet: [{
+                type: Input
+            }], pageOffset: [{
+                type: Input
+            }] } });
+
 const LibConfigService = new InjectionToken('LibConfig');
 class AppprojectComponentsModule {
     static forRoot(config) {
@@ -2153,10 +2423,14 @@ class AppprojectComponentsModule {
             InputCheckboxComponent,
             InputRadioComponent,
             TreeViewComponent,
-            TreeViewNivelComponent], imports: [CommonModule,
+            TreeViewNivelComponent,
+            GridViewComponent], imports: [CommonModule,
             HttpClientModule,
             IonicModule,
-            ReactiveFormsModule], exports: [AppprojectComponentsComponent,
+            FormsModule,
+            ReactiveFormsModule,
+            ValorFormatPipe,
+            SafeHtmlPipe], exports: [AppprojectComponentsComponent,
             InputTextComponent,
             InputFormatComponent,
             InputSelectComponent,
@@ -2175,10 +2449,12 @@ class AppprojectComponentsModule {
             InputCheckboxComponent,
             InputRadioComponent,
             TreeViewComponent,
-            TreeViewNivelComponent] }); }
+            TreeViewNivelComponent,
+            GridViewComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: AppprojectComponentsModule, imports: [CommonModule,
             HttpClientModule,
             IonicModule,
+            FormsModule,
             ReactiveFormsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: AppprojectComponentsModule, decorators: [{
@@ -2204,13 +2480,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
                         InputCheckboxComponent,
                         InputRadioComponent,
                         TreeViewComponent,
-                        TreeViewNivelComponent
+                        TreeViewNivelComponent,
+                        GridViewComponent
                     ],
                     imports: [
                         CommonModule,
                         HttpClientModule,
                         IonicModule,
-                        ReactiveFormsModule
+                        FormsModule,
+                        ReactiveFormsModule,
+                        ValorFormatPipe,
+                        SafeHtmlPipe
                     ],
                     exports: [
                         AppprojectComponentsComponent,
@@ -2232,7 +2512,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
                         InputCheckboxComponent,
                         InputRadioComponent,
                         TreeViewComponent,
-                        TreeViewNivelComponent
+                        TreeViewNivelComponent,
+                        GridViewComponent
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA]
                 }]
@@ -2246,5 +2527,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AppprojectComponentsComponent, AppprojectComponentsModule, AppprojectComponentsService, BaseInputComponent, BtnActionComponent, BtnCancelarComponent, BtnExcluirComponent, BtnNovoComponent, BtnSalvarComponent, EntityEditComponent, InputAreaComponent, InputArquivoComponent, InputCepComponent, InputCheckboxComponent, InputFormatComponent, InputPesquisaComponent, InputRadioComponent, InputSelectComponent, InputTextComponent, InputValorComponent, LibConfigService, ModelTreeviewComponent, TreeViewComponent, TreeViewNivelComponent };
+export { AppprojectComponentsComponent, AppprojectComponentsModule, AppprojectComponentsService, BaseInputComponent, BtnActionComponent, BtnCancelarComponent, BtnExcluirComponent, BtnNovoComponent, BtnSalvarComponent, EntityEditComponent, GridViewComponent, InputAreaComponent, InputArquivoComponent, InputCepComponent, InputCheckboxComponent, InputFormatComponent, InputPesquisaComponent, InputRadioComponent, InputSelectComponent, InputTextComponent, InputValorComponent, LibConfigService, ModelTreeviewComponent, TreeViewComponent, TreeViewNivelComponent };
 //# sourceMappingURL=appproject-components.mjs.map