@kassdoug/tableadv
Version:
Componente Angular 16+ para criação de uma table com amis recursos. Projeto com base na ideia da lib DataTables
404 lines (401 loc) • 56 kB
JavaScript
import * as i0 from '@angular/core';
import { ViewContainerRef, Component, ViewChild, Input, EventEmitter, Output, QueryList, ViewEncapsulation, ViewChildren, NgModule } from '@angular/core';
import * as Notiflix from 'notiflix';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
class CellComponent {
constructor(componentFactoryResolver) {
this.componentFactoryResolver = componentFactoryResolver;
this.label = '';
this.componentized = false;
}
ngOnInit() {
this.getLabel();
}
/** Pega o label a ser exibido, podendo ser um component ou string */
getLabel() {
const column_name = this.col.db;
if (column_name.includes('.')) {
let item = column_name.split('.').filter((f) => f);
let value = this.row;
item.forEach((ff) => {
value = value[ff];
});
this.label = value;
}
else {
this.label = this.row[column_name];
}
if (typeof this.label == 'object' &&
this.label !== null &&
this.label !== '') {
if (this.label.component !== null) {
this.componentized = true;
let instance = this.label.component.instance;
let properties = this.label.component.properties;
setTimeout(() => this.setComponent(instance, properties), 0);
}
}
}
/** Caso o label for um componente, aquis era feito as tratativas para inserção do mesmo */
setComponent(cmpInstance, properties) {
const factory = this.componentFactoryResolver.resolveComponentFactory(cmpInstance);
const componentRef = factory.create(this.container.injector);
Object.keys(properties).forEach((key) => {
let value = properties[key];
componentRef.instance[key] = this.delteKeyComponent(value);
});
this.container.insert(componentRef.hostView);
}
/** Remove do valor inserido no component externo, somente os valores originais, retirando valores que possam ser compoenentes, corrigindo a duplicação infinita */
delteKeyComponent(item) {
Object.keys(item).forEach((key) => {
if (item[key] !== null && item[key] !== undefined) {
if (typeof item[key] == 'object' &&
item[key].hasOwnProperty('component')) {
if (item[key]['component'].hasOwnProperty('instance')) {
delete item[key];
}
}
}
});
return item;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CellComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: CellComponent, selector: "gd-cell", inputs: { row: "row", col: "col" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div *ngIf=\"!componentized; else cont\" [innerHTML]=\"label\"></div> \r\n<ng-template #cont><ng-container #container></ng-container></ng-template> ", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: CellComponent, decorators: [{
type: Component,
args: [{ selector: 'gd-cell', template: "<div *ngIf=\"!componentized; else cont\" [innerHTML]=\"label\"></div> \r\n<ng-template #cont><ng-container #container></ng-container></ng-template> " }]
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }]; }, propDecorators: { container: [{
type: ViewChild,
args: ['container', { read: ViewContainerRef }]
}], row: [{
type: Input
}], col: [{
type: Input
}] } });
class IndividualFilterInputComponent {
constructor() {
this.search = null;
this.whereValue = null;
this.addFilterEvent = new EventEmitter();
}
/** Adiciona o filtro individual na busca e executa a rota */
addNewFilter() {
if (this.whereValue == '' || this.whereValue == null)
return;
var model = null;
var field = null;
if (typeof this.search === 'object') {
model = this.search.model;
field = this.search.field;
}
else {
field = this.search;
}
this.addFilterEvent.emit({ value: this.whereValue, field: field, model: model });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: IndividualFilterInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: IndividualFilterInputComponent, selector: "InputIndividualSearch", inputs: { search: "search" }, outputs: { addFilterEvent: "addFilterEvent" }, ngImport: i0, template: "<div class=\"input-group p-1\">\r\n\r\n <input class=\"form-control form-control-sm\" type=\"search\" placeholder=\"Pesquisar\" [(ngModel)]=\"whereValue\"> \r\n\r\n <button\r\n class=\"btn btn-sm btn-outline-secondary border border-secondary-subtle\"\r\n type=\"button\"\r\n gd-tooltip=\"Faz a pesquisa solicitada na coluna\"\r\n (click)=\"addNewFilter()\"\r\n >\r\n <i class=\"fa fa-search\"></i>\r\n </button>\r\n\r\n</div>\r\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css\";.gd-version{opacity:.2;font-size:.6rem;position:absolute;right:10px;bottom:5px}.gd-backdrop{background-color:#153c4b80;width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:2500;filter:blur()}body~.gd-container.fullscreen{overflow:hidden}.gd-container{background-color:#fff;width:100%;border-radius:5px;box-shadow:-1px 12px 19px -3px #00000026;font-family:Quicksand,sans-serif;position:relative;display:flex;flex-direction:column;align-items:center}.gd-container.fullscreen{width:95vw;height:95vh;position:fixed;left:2.5vw;top:2.5vh;padding:0;z-index:3000;max-width:100vw}.gd-container.fullscreen .gd-header{max-height:70px}.gd-container.fullscreen .gd-body{height:calc(100% - 140px);max-height:100%}.gd-container.fullscreen .gd-footer{height:70px;position:absolute}.gd-container .gd-header{width:100%;box-sizing:border-box;padding:15px;height:20%;border-bottom:1px solid #e4e4e4;display:flex;justify-content:space-between}.gd-container .gd-header .gd-form-group{width:80%;display:flex;align-items:center;border-radius:5px 0 0 5px;position:relative;height:30px}.gd-container .gd-header .gd-form-group .gd-btn{cursor:pointer;border:1px solid rgba(204,204,204,.2588235294);padding:5px 10px;background-color:#f7f7f700;color:#bdbdbd;opacity:.7;height:100%;min-height:30px}.gd-container .gd-header .gd-form-group .gd-btn:hover{opacity:1;color:#818181;border-color:#7777775d}.gd-container .gd-header .gd-form-group .gd-input-search{border:1px solid rgba(204,204,204,.2588235294);border-radius:5px 0 0 5px;min-height:28px;padding:0 6px;min-width:150px;max-width:300px;height:29px;position:relative;font-size:.8rem}.gd-container .gd-header .gd-form-group .gd-input-search:focus{outline-color:#7777775d}@media screen and (min-width: 768px){.gd-container .gd-header .gd-form-group .gd-input-search{min-width:300px}}.gd-container .gd-header .gd-form-group .gd-select-qntreg{border:1px solid rgba(204,204,204,.2588235294);border-radius:0 5px 5px 0;min-height:30px;padding:3px;height:100%}.gd-container .gd-header .gd-form-group .gd-select-qntreg:focus{outline-color:#7777775d}.gd-container .gd-header .gd-controls{display:flex;justify-content:space-between;align-items:center}.gd-container .gd-header .gd-controls button{background-color:transparent;border:none;padding:5px;margin:0 5px}.gd-container .gd-header .gd-controls button i{cursor:pointer;opacity:.5;transition:all ease-in-out .3s;font-size:1rem}.gd-container .gd-header .gd-controls button i:hover{opacity:1}.gd-container .gd-body{width:100%;max-width:100vw;max-height:700px;min-height:100px;height:auto;box-sizing:border-box;padding:15px;overflow:auto;scrollbar-width:thin;scrollbar-color:#aaaaaa #FFFFFF}.gd-container .gd-body table{width:100%}.gd-container .gd-body .icon-order{opacity:.2;width:15px;display:flex;justify-content:center;align-items:center;border-radius:5px}.gd-container .gd-body .icon-order:hover{opacity:1}.gd-container .gd-body::-webkit-scrollbar{width:5px;height:5px}.gd-container .gd-body::-webkit-scrollbar-track{border-radius:8px;background-color:#fff;border:2px solid #FFFFFF}.gd-container .gd-body::-webkit-scrollbar-track:hover{background-color:#2f5d6e}.gd-container .gd-body::-webkit-scrollbar-track:active{background-color:#2f5d6e}.gd-container .gd-body::-webkit-scrollbar-thumb{border-radius:5px;background-color:#2f5d6e}.gd-container .gd-body::-webkit-scrollbar-thumb:hover{background-color:#113441}.gd-container .gd-body::-webkit-scrollbar-thumb:active{background-color:#2f5d6e}.gd-container .gd-body .not-reg{opacity:.5;width:100%;min-height:150px;font-size:1.2rem;font-weight:700;display:flex;align-items:center;justify-content:center}.gd-container .gd-body .gd-header-row{position:relative;font-size:.9rem}.gd-container .gd-body .gd-header-row.fixed{background-color:#fff;position:sticky;top:-15px;left:0;z-index:100;width:100%;overflow:auto}.gd-container .gd-body .gd-header-row.fixed .gd-col{border-bottom:1px solid #535353}.gd-container .gd-body .gd-header-row .gd-col{border-bottom:1px solid rgba(221,221,221,.8274509804);font-weight:700;text-align:left}.gd-container .gd-body .gd-body-row{transition:all ease-in-out .2s;font-size:.8rem;width:100%}.gd-container .gd-body .gd-body-row:hover{background-color:#ebebeb!important}.gd-container .gd-body .gd-body-row.even{background-color:#f0f0f080}.gd-container .gd-body .gd-body-row .gd-col{border-bottom:1px solid rgba(221,221,221,.2588235294)}.gd-container .gd-body .gd-header-row .gd-col,.gd-container .gd-body .gd-body-row .gd-col{width:auto;min-width:100px;padding:10px 0;position:relative;margin:0 5px}.gd-container .gd-body .gd-header-row .gd-col>div,.gd-container .gd-body .gd-body-row .gd-col>div{display:flex;justify-content:space-between;padding:0 15px 0 0}.gd-container .gd-footer{box-sizing:border-box;padding:15px;position:relative;bottom:0;width:100%;height:20%;border-top:1px solid #e4e4e4;display:flex;justify-content:space-between;align-items:center;max-height:70px}.gd-container .gd-footer .gd-info{font-size:.8rem;opacity:.7}.gd-container .gd-footer .gd-pagination{display:flex;justify-content:center;align-items:center}.gd-container .gd-footer .gd-pagination button{min-width:25px;height:30px;margin:0 5px;padding:5px;border:none;background-color:#ececec23;border-radius:5px;cursor:pointer;transition:all ease-in-out .2s}.gd-container .gd-footer .gd-pagination button.bg-selected{background-color:#48a2cc;color:#fff}.gd-container .gd-footer .gd-pagination button:hover{background-color:#cfcfcf}[gd-tooltip]{position:relative}[gd-tooltip]:after{font-size:.8rem;white-space:nowrap;min-width:100px;text-align:center;background-color:#4d4d4d;box-shadow:-1px 12px 19px -3px #00000026;color:#fff;box-sizing:border-box;content:attr(gd-tooltip);display:none;padding:10px;position:absolute;top:-35px;left:-300%;z-index:10;border-radius:5px}[gd-tooltip]:hover:after{display:inline}\n"], dependencies: [{ kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: IndividualFilterInputComponent, decorators: [{
type: Component,
args: [{ selector: 'InputIndividualSearch', template: "<div class=\"input-group p-1\">\r\n\r\n <input class=\"form-control form-control-sm\" type=\"search\" placeholder=\"Pesquisar\" [(ngModel)]=\"whereValue\"> \r\n\r\n <button\r\n class=\"btn btn-sm btn-outline-secondary border border-secondary-subtle\"\r\n type=\"button\"\r\n gd-tooltip=\"Faz a pesquisa solicitada na coluna\"\r\n (click)=\"addNewFilter()\"\r\n >\r\n <i class=\"fa fa-search\"></i>\r\n </button>\r\n\r\n</div>\r\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css\";.gd-version{opacity:.2;font-size:.6rem;position:absolute;right:10px;bottom:5px}.gd-backdrop{background-color:#153c4b80;width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:2500;filter:blur()}body~.gd-container.fullscreen{overflow:hidden}.gd-container{background-color:#fff;width:100%;border-radius:5px;box-shadow:-1px 12px 19px -3px #00000026;font-family:Quicksand,sans-serif;position:relative;display:flex;flex-direction:column;align-items:center}.gd-container.fullscreen{width:95vw;height:95vh;position:fixed;left:2.5vw;top:2.5vh;padding:0;z-index:3000;max-width:100vw}.gd-container.fullscreen .gd-header{max-height:70px}.gd-container.fullscreen .gd-body{height:calc(100% - 140px);max-height:100%}.gd-container.fullscreen .gd-footer{height:70px;position:absolute}.gd-container .gd-header{width:100%;box-sizing:border-box;padding:15px;height:20%;border-bottom:1px solid #e4e4e4;display:flex;justify-content:space-between}.gd-container .gd-header .gd-form-group{width:80%;display:flex;align-items:center;border-radius:5px 0 0 5px;position:relative;height:30px}.gd-container .gd-header .gd-form-group .gd-btn{cursor:pointer;border:1px solid rgba(204,204,204,.2588235294);padding:5px 10px;background-color:#f7f7f700;color:#bdbdbd;opacity:.7;height:100%;min-height:30px}.gd-container .gd-header .gd-form-group .gd-btn:hover{opacity:1;color:#818181;border-color:#7777775d}.gd-container .gd-header .gd-form-group .gd-input-search{border:1px solid rgba(204,204,204,.2588235294);border-radius:5px 0 0 5px;min-height:28px;padding:0 6px;min-width:150px;max-width:300px;height:29px;position:relative;font-size:.8rem}.gd-container .gd-header .gd-form-group .gd-input-search:focus{outline-color:#7777775d}@media screen and (min-width: 768px){.gd-container .gd-header .gd-form-group .gd-input-search{min-width:300px}}.gd-container .gd-header .gd-form-group .gd-select-qntreg{border:1px solid rgba(204,204,204,.2588235294);border-radius:0 5px 5px 0;min-height:30px;padding:3px;height:100%}.gd-container .gd-header .gd-form-group .gd-select-qntreg:focus{outline-color:#7777775d}.gd-container .gd-header .gd-controls{display:flex;justify-content:space-between;align-items:center}.gd-container .gd-header .gd-controls button{background-color:transparent;border:none;padding:5px;margin:0 5px}.gd-container .gd-header .gd-controls button i{cursor:pointer;opacity:.5;transition:all ease-in-out .3s;font-size:1rem}.gd-container .gd-header .gd-controls button i:hover{opacity:1}.gd-container .gd-body{width:100%;max-width:100vw;max-height:700px;min-height:100px;height:auto;box-sizing:border-box;padding:15px;overflow:auto;scrollbar-width:thin;scrollbar-color:#aaaaaa #FFFFFF}.gd-container .gd-body table{width:100%}.gd-container .gd-body .icon-order{opacity:.2;width:15px;display:flex;justify-content:center;align-items:center;border-radius:5px}.gd-container .gd-body .icon-order:hover{opacity:1}.gd-container .gd-body::-webkit-scrollbar{width:5px;height:5px}.gd-container .gd-body::-webkit-scrollbar-track{border-radius:8px;background-color:#fff;border:2px solid #FFFFFF}.gd-container .gd-body::-webkit-scrollbar-track:hover{background-color:#2f5d6e}.gd-container .gd-body::-webkit-scrollbar-track:active{background-color:#2f5d6e}.gd-container .gd-body::-webkit-scrollbar-thumb{border-radius:5px;background-color:#2f5d6e}.gd-container .gd-body::-webkit-scrollbar-thumb:hover{background-color:#113441}.gd-container .gd-body::-webkit-scrollbar-thumb:active{background-color:#2f5d6e}.gd-container .gd-body .not-reg{opacity:.5;width:100%;min-height:150px;font-size:1.2rem;font-weight:700;display:flex;align-items:center;justify-content:center}.gd-container .gd-body .gd-header-row{position:relative;font-size:.9rem}.gd-container .gd-body .gd-header-row.fixed{background-color:#fff;position:sticky;top:-15px;left:0;z-index:100;width:100%;overflow:auto}.gd-container .gd-body .gd-header-row.fixed .gd-col{border-bottom:1px solid #535353}.gd-container .gd-body .gd-header-row .gd-col{border-bottom:1px solid rgba(221,221,221,.8274509804);font-weight:700;text-align:left}.gd-container .gd-body .gd-body-row{transition:all ease-in-out .2s;font-size:.8rem;width:100%}.gd-container .gd-body .gd-body-row:hover{background-color:#ebebeb!important}.gd-container .gd-body .gd-body-row.even{background-color:#f0f0f080}.gd-container .gd-body .gd-body-row .gd-col{border-bottom:1px solid rgba(221,221,221,.2588235294)}.gd-container .gd-body .gd-header-row .gd-col,.gd-container .gd-body .gd-body-row .gd-col{width:auto;min-width:100px;padding:10px 0;position:relative;margin:0 5px}.gd-container .gd-body .gd-header-row .gd-col>div,.gd-container .gd-body .gd-body-row .gd-col>div{display:flex;justify-content:space-between;padding:0 15px 0 0}.gd-container .gd-footer{box-sizing:border-box;padding:15px;position:relative;bottom:0;width:100%;height:20%;border-top:1px solid #e4e4e4;display:flex;justify-content:space-between;align-items:center;max-height:70px}.gd-container .gd-footer .gd-info{font-size:.8rem;opacity:.7}.gd-container .gd-footer .gd-pagination{display:flex;justify-content:center;align-items:center}.gd-container .gd-footer .gd-pagination button{min-width:25px;height:30px;margin:0 5px;padding:5px;border:none;background-color:#ececec23;border-radius:5px;cursor:pointer;transition:all ease-in-out .2s}.gd-container .gd-footer .gd-pagination button.bg-selected{background-color:#48a2cc;color:#fff}.gd-container .gd-footer .gd-pagination button:hover{background-color:#cfcfcf}[gd-tooltip]{position:relative}[gd-tooltip]:after{font-size:.8rem;white-space:nowrap;min-width:100px;text-align:center;background-color:#4d4d4d;box-shadow:-1px 12px 19px -3px #00000026;color:#fff;box-sizing:border-box;content:attr(gd-tooltip);display:none;padding:10px;position:absolute;top:-35px;left:-300%;z-index:10;border-radius:5px}[gd-tooltip]:hover:after{display:inline}\n"] }]
}], propDecorators: { search: [{
type: Input
}], addFilterEvent: [{
type: Output
}] } });
class TableComponent {
/** Constructor -------------------------------------------------------------------- */
constructor(renderer) {
this.renderer = renderer;
this.driver = 'laravel-eloquent'; // chave simbolica para determinar o uso do componente com backend em laravel com eloquent
this.version = '1.2.3';
this.message = '';
/** Define o estado da tabela maximizado ou normal */
this.screenMaximize = false;
/** Registra o total de paginas geradas */
this.totalPages = 0;
this.totalPagesArray = [];
/** Registra a pagina atual */
this.actualPage = 1;
/** Registra a última pagina */
this.lastPage = 0;
/** Quantidade de links a exibir na navegação para frente e tras em relação a pagina atual */
this.navigationLimitPages = 3;
/** Registra o total de registros na tabela */
this.totalRegisters = 0;
/** Total de registros POR página */
this.totalRegisterPerPage = 5;
/** Total de registros NA página */
this.totalRegisterInPage = 0;
/** Determina se o header da tabela é fixo ou não */
this.isFixed = false;
/** Define o total de registros por pagina inicial */
this.registers_per_page_initial = 5;
/** Filtros dos dados para o backend */
this.orderby = { db: 'id' };
this.orderdirection = 'asc';
this.whereColumn = null;
this.whereValue = null;
this.whereIndividual = [];
/** Dados externos */
this.data = null;
this.gridHeader = null;
/** Envia solicitação */
this.onGetData = new EventEmitter();
this.elementsOrder = new QueryList();
}
/** Cycles -------------------------------------------------------------------- */
ngOnInit() {
this.totalRegisterPerPage = this.registers_per_page_initial;
}
ngOnChanges(changes) {
this.data = changes['data'].currentValue;
if (this.data !== null && this.data !== undefined)
this.config();
// this.CONSOLE();
}
ngAfterViewInit() {
this.emitGetData();
}
/** Methods -------------------------------------------------------------------- */
/** Debug de todas props */
CONSOLE() {
console.log(`---------------------------CONSOLE TABLE ${this.id}---------------------------`);
console.log('data', this.data);
console.log('driver', this.driver);
console.log('screenMaximize', this.screenMaximize);
console.log('totalPages', this.totalPages);
console.log('totalPagesArray', this.totalPagesArray);
console.log('actualPage', this.actualPage);
console.log('lastPage', this.lastPage);
console.log('totalRegisters', this.totalRegisters);
console.log('totalRegisterPerPage', this.totalRegisterPerPage);
console.log('navigationLimitPages', this.navigationLimitPages);
console.log('gridHeader', this.gridHeader);
console.log('isFixed', this.isFixed);
console.log('orderby', this.orderby);
console.log('orderdirection', this.orderdirection);
console.log('whereColumn', this.whereColumn);
console.log('whereValue', this.whereValue);
console.log('whereIndividual', this.whereIndividual);
console.log('---------------------------FIM CONSOLE TABLE---------------------------');
}
/** Adiciona um loader */
loading() {
this.message = '';
Notiflix.Block.init({
svgColor: '#4551cc',
backgroundColor: 'rgba(255, 255, 255, .7)',
});
Notiflix.Block.dots(`#gd-container-${this.id}`);
}
/** Remove o loader */
removeLoading() {
setTimeout(() => {
Notiflix.Block.remove(`#gd-container-${this.id}`);
if (this.data == null) {
this.data = null;
this.totalRegisters = 0;
this.totalRegisterInPage = 0;
this.message = 'Nenhuma informação carregada';
}
}, 2000);
}
/** Configura os dados */
config() {
if (this.data.hasOwnProperty('data')) {
if (this.data.data.length == 0) {
this.data = null;
this.totalRegisters = 0;
this.totalRegisterInPage = 0;
this.message = 'Nenhuma informação carregada';
}
else {
this.totalRegisters = this.data.total;
this.totalRegisterInPage = this.data.length;
}
this.setTotalPages();
}
}
/** Emit um evento para carregar os dados */
emitGetData() {
this.loading();
let offset = this.totalRegisterPerPage == this.totalRegisterInPage
? this.actualPage * this.totalRegisterInPage - this.totalRegisterInPage
: this.actualPage * this.totalRegisterPerPage -
this.totalRegisterPerPage;
this.onGetData.emit({
id: this.id,
limit: this.totalRegisterPerPage,
offset: offset,
orderby: this.orderby,
orderdirection: this.orderdirection,
whereColumn: this.whereColumn,
whereValue: this.whereValue,
whereIndividual: this.whereIndividual,
});
this.removeLoading();
}
/** Evento de maximizar a tela e voltar ao normal */
maximizeToggle() {
this.screenMaximize = !this.screenMaximize;
if (this.screenMaximize) {
this.renderer.setStyle(document.body, 'overflow', 'hidden');
}
else {
this.renderer.removeStyle(document.body, 'overflow');
}
}
/** Gera um array com o total de paginas */
setTotalPages() {
let tot = this.totalRegisters / this.totalRegisterPerPage;
this.totalPages = tot <= 1 ? 1 : Math.ceil(tot);
this.lastPage = this.totalPages;
this.totalPagesArray = Array.from({ length: this.totalPages }, (_, i) => i + 1);
this.totalPagesArray = this.totalPagesArray.filter((pg) => {
if (pg < this.actualPage &&
pg >= this.actualPage - this.navigationLimitPages) {
return pg;
}
if (this.actualPage == pg) {
return pg;
}
if (pg > this.actualPage &&
pg <= this.actualPage + this.navigationLimitPages) {
return pg;
}
return null;
});
}
/** Seta a pagina atual */
setActualPage(page) {
this.actualPage = page;
this.setTotalPages();
this.emitGetData();
}
/** Seta na primeira página */
setFirstPage() {
this.actualPage = 1;
this.setTotalPages();
this.emitGetData();
}
/** Seta para a página anterior */
setBeforePage() {
this.actualPage = this.actualPage - 1;
this.setTotalPages();
this.emitGetData();
}
/** Seta para a proxiuma página */
setNextPage() {
this.actualPage = this.actualPage + 1;
this.setTotalPages();
this.emitGetData();
}
/** Seta para a ulimta página */
setLastPage() {
this.actualPage = this.lastPage;
this.setTotalPages();
this.emitGetData();
}
/** Atualiza a quantidade a exiebir por pagina */
setRegistrsPerPage() {
this.actualPage = 1;
this.setTotalPages();
this.emitGetData();
}
/** Fixa o header ao rolar o scroll */
fixeHeader(isFixed) {
this.isFixed = isFixed;
}
onSearch() {
let columnsSearched = this.gridHeader
.map((col) => {
if (col.search)
return col.search;
return undefined;
})
.filter((value) => value !== undefined);
this.whereColumn = columnsSearched;
if (this.whereValue == null || this.whereColumn == '')
return;
if (this.whereValue.length >= 2 || this.whereValue.length == 0) {
this.actualPage = 1;
this.emitGetData();
}
}
onIndividualSearch(search) {
console.log(search);
console.log(this.whereValue);
}
/** Limpa a pesquisa e reset os dados */
onCleanSearch() {
if (this.whereValue == null && this.whereIndividual.length == 0)
return;
this.whereColumn = null;
this.whereValue = null;
this.whereIndividual = [];
this.actualPage = 1;
this.emitGetData();
}
/** Evento ao reordenar uma coluna */
onReorder(data) {
this.orderby = data;
this.elementsOrder.forEach((elm) => {
let id = elm.nativeElement.id;
if (id == 'order_' + data.db) {
if (elm.nativeElement.classList.contains('fa-sort')) {
elm.nativeElement.classList.remove('fa-sort');
elm.nativeElement.classList.add('fa-sort-up');
this.orderdirection = 'asc';
}
else if (elm.nativeElement.classList.contains('fa-sort-up')) {
elm.nativeElement.classList.remove('fa-sort-up');
elm.nativeElement.classList.add('fa-sort-down');
this.orderdirection = 'desc';
}
else if (elm.nativeElement.classList.contains('fa-sort-down')) {
elm.nativeElement.classList.remove('fa-sort-down');
elm.nativeElement.classList.add('fa-sort');
this.orderby = { db: 'id' };
this.orderdirection = 'asc';
}
}
else {
elm.nativeElement.classList.remove('fa-sort-up', 'fa-sort-down', 'fa-sort');
elm.nativeElement.classList.add('fa-sort');
}
});
this.emitGetData();
}
/** Metodo para verificar existencia do atritubo individualfilter */
CheckIsShowRowSearch(gridHeader) {
const objFilter = gridHeader.filter((col) => {
if (col.individualfilter)
return col;
});
if (objFilter.length)
return true;
else
return false;
}
/** Metodo para aplicar individualfilter */
addIndividualFilter(newFilter) {
this.whereIndividual = this.whereIndividual.filter((item) => {
return item.field !== newFilter.field || item.model !== newFilter.model;
});
if (newFilter.value !== '' && newFilter.value !== null)
this.whereIndividual.push(newFilter);
this.emitGetData();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: TableComponent, selector: "tableadv", inputs: { id: "id", isFixed: "isFixed", registers_per_page_initial: "registers_per_page_initial", data: "data", gridHeader: "gridHeader" }, outputs: { onGetData: "onGetData" }, viewQueries: [{ propertyName: "elementsOrder", predicate: ["elementOrder"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"\" [ngClass]=\"{'gd-backdrop': screenMaximize}\"></div>\r\n\r\n<div id=\"gd-container-{{id}}\" class='gd-container' [ngClass]=\"{'fullscreen':screenMaximize}\">\r\n\r\n <small class=\"gd-version\"> {{version}} </small>\r\n\r\n <!-- header -->\r\n <div class=\"gd-header\">\r\n\r\n <div class=\"gd-form-group\">\r\n\r\n <input class='gd-input-search' placeholder=\"Pesquisar Geral...\" [(ngModel)]=\"whereValue\" (keyup.enter)=\"onSearch()\">\r\n <button class='gd-btn' (click)=\"onSearch()\" gd-tooltip=\"Faz a pesquisa solicitada\">\r\n <i class=\"fa-solid fa-magnifying-glass\" ></i>\r\n </button>\r\n <button class='gd-btn' (click)=\"onCleanSearch()\" gd-tooltip=\"Limpa a pesquisa e reseta os dados\">\r\n <i class=\"fa-solid fa-broom\"></i>\r\n </button>\r\n\r\n <span gd-tooltip=\"Quantidade de registros por p\u00E1gina\">\r\n <select class=\"gd-select-qntreg\" [(ngModel)]=\"totalRegisterPerPage\" (change)=\"setRegistrsPerPage()\" >\r\n <option value=5>05</option>\r\n <option value=10>10</option>\r\n <option value=50>50</option>\r\n <option value=100>100</option>\r\n <option value=150>150</option>\r\n </select>\r\n </span>\r\n\r\n </div>\r\n\r\n <div class=\"gd-controls\">\r\n\r\n <button (click)=\"emitGetData()\" gd-tooltip=\"Atualiza os dados\">\r\n <i class=\"fa-solid fa-rotate\"></i>\r\n </button>\r\n\r\n <button (click)=\"maximizeToggle()\" gd-tooltip=\"Maximiza e minimiza\">\r\n <i *ngIf=\"!screenMaximize\" class=\"fa-solid fa-maximize\"></i>\r\n <i *ngIf=\"screenMaximize\" class=\"fa-solid fa-minimize\"></i>\r\n </button>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n\r\n <!-- body -->\r\n <div class=\"gd-body\" appScrollListener (fixedHeader)=\"fixeHeader($event)\">\r\n\r\n <div *ngIf=\"data == null\" class=\"not-reg\">{{message}}</div>\r\n <button *ngIf=\"data == null\" class=\"p-2 btn btn-sm btn-outline-dark\" (click)=\"onCleanSearch()\">Recarregar <i class=\"fa-solid fa-broom\"></i></button>\r\n\r\n <table *ngIf=\"data != null\">\r\n <tr class=\"gd-header-row\" [ngClass]=\"{'fixed': isFixed}\">\r\n\r\n <th class=\"gd-col\" *ngFor=\"let col of gridHeader\" [style.width]=\"col.width\">\r\n <div>\r\n {{col.label}}\r\n\r\n <i *ngIf=\"col.order\" style=\"cursor: pointer;\" #elementOrder\r\n class=\"icon-order fa-solid fa-sort opacity-50 mx-2 px-1 btn-tabledata-order\" id='order_{{col.order.db}}'\r\n (click)=\"onReorder(col.order)\">\r\n </i>\r\n </div>\r\n </th>\r\n </tr>\r\n\r\n <tr *ngIf=\"CheckIsShowRowSearch(gridHeader)\">\r\n <th class=\"gd-col\" *ngFor=\"let col of gridHeader\" [style.width]=\"col.width\">\r\n <InputIndividualSearch\r\n (addFilterEvent)=\"addIndividualFilter($event)\"\r\n [search]=\"col.search\"\r\n *ngIf=\"col.individualfilter\"\r\n ></InputIndividualSearch>\r\n </th>\r\n </tr>\r\n\r\n <tr class=\"gd-body-row\" *ngFor=\"let row of data.data; let i = index\" [ngClass]=\"{'even': i % 2 !== 0}\">\r\n <td class=\"gd-col\" *ngFor=\"let col of gridHeader\" [style.width]=\"col.width\">\r\n <gd-cell [row]=\"row\" [col]=\"col\"></gd-cell>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n <!-- footer -->\r\n <div class=\"gd-footer\" *ngIf=\"data !== null\">\r\n\r\n <div class=\"gd-info\">\r\n <div>Exibindo p\u00E1gina <strong>{{actualPage}}</strong> de <strong>{{lastPage}}</strong></div>\r\n <div>Total de registros <strong>{{totalRegisters}}</strong></div>\r\n </div>\r\n\r\n <div class=\"gd-pagination\">\r\n\r\n <button [disabled]=\"1 == actualPage\" [ngClass]=\"{'disabled': 1 == actualPage}\" (click)=\"setFirstPage()\"> <i class=\"fa-solid fa-backward\"></i> </button>\r\n <button [disabled]=\"1 == actualPage\" [ngClass]=\"{'disabled': 1 == actualPage}\" (click)=\"setBeforePage()\"> <i class=\"fa-solid fa-caret-left\"></i> </button>\r\n\r\n <button [disabled]=\"page == actualPage\" [ngClass]=\"{'bg-selected': page == actualPage}\" *ngFor=\"let page of totalPagesArray\" (click)=\"setActualPage(page)\"> {{page}} </button>\r\n\r\n <button [disabled]=\"lastPage== actualPage\" [ngClass]=\"{'disabled': lastPage == actualPage}\" (click)=\"setNextPage()\"> <i class=\"fa-solid fa-caret-right\"></i> </button>\r\n <button [disabled]=\"lastPage == actualPage\" [ngClass]=\"{'disabled': lastPage == actualPage}\" (click)=\"setLastPage()\"> <i class=\"fa-solid fa-forward\"></i> </button>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n</div>\r\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css\";.gd-version{opacity:.2;font-size:.6rem;position:absolute;right:10px;bottom:5px}.gd-backdrop{background-color:#153c4b80;width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:2500;filter:blur()}body~.gd-container.fullscreen{overflow:hidden}.gd-container{background-color:#fff;width:100%;border-radius:5px;box-shadow:-1px 12px 19px -3px #00000026;font-family:Quicksand,sans-serif;position:relative;display:flex;flex-direction:column;align-items:center}.gd-container.fullscreen{width:95vw;height:95vh;position:fixed;left:2.5vw;top:2.5vh;padding:0;z-index:3000;max-width:100vw}.gd-container.fullscreen .gd-header{max-height:70px}.gd-container.fullscreen .gd-body{height:calc(100% - 140px);max-height:100%}.gd-container.fullscreen .gd-footer{height:70px;position:absolute}.gd-container .gd-header{width:100%;box-sizing:border-box;padding:15px;height:20%;border-bottom:1px solid #e4e4e4;display:flex;justify-content:space-between}.gd-container .gd-header .gd-form-group{width:80%;display:flex;align-items:center;border-radius:5px 0 0 5px;position:relative;height:30px}.gd-container .gd-header .gd-form-group .gd-btn{cursor:pointer;border:1px solid rgba(204,204,204,.2588235294);padding:5px 10px;background-color:#f7f7f700;color:#bdbdbd;opacity:.7;height:100%;min-height:30px}.gd-container .gd-header .gd-form-group .gd-btn:hover{opacity:1;color:#818181;border-color:#7777775d}.gd-container .gd-header .gd-form-group .gd-input-search{border:1px solid rgba(204,204,204,.2588235294);border-radius:5px 0 0 5px;min-height:28px;padding:0 6px;min-width:150px;max-width:300px;height:29px;position:relative;font-size:.8rem}.gd-container .gd-header .gd-form-group .gd-input-search:focus{outline-color:#7777775d}@media screen and (min-width: 768px){.gd-container .gd-header .gd-form-group .gd-input-search{min-width:300px}}.gd-container .gd-header .gd-form-group .gd-select-qntreg{border:1px solid rgba(204,204,204,.2588235294);border-radius:0 5px 5px 0;min-height:30px;padding:3px;height:100%}.gd-container .gd-header .gd-form-group .gd-select-qntreg:focus{outline-color:#7777775d}.gd-container .gd-header .gd-controls{display:flex;justify-content:space-between;align-items:center}.gd-container .gd-header .gd-controls button{background-color:transparent;border:none;padding:5px;margin:0 5px}.gd-container .gd-header .gd-controls button i{cursor:pointer;opacity:.5;transition:all ease-in-out .3s;font-size:1rem}.gd-container .gd-header .gd-controls button i:hover{opacity:1}.gd-container .gd-body{width:100%;max-width:100vw;max-height:700px;min-height:100px;height:auto;box-sizing:border-box;padding:15px;overflow:auto;scrollbar-width:thin;scrollbar-color:#aaaaaa #FFFFFF}.gd-container .gd-body table{width:100%}.gd-container .gd-body .icon-order{opacity:.2;width:15px;display:flex;justify-content:center;align-items:center;border-radius:5px}.gd-container .gd-body .icon-order:hover{opacity:1}.gd-container .gd-body::-webkit-scrollbar{width:5px;height:5px}.gd-container .gd-body::-webkit-scrollbar-track{border-radius:8px;background-color:#fff;border:2px solid #FFFFFF}.gd-container .gd-body::-webkit-scrollbar-track:hover{background-color:#2f5d6e}.gd-container .gd-body::-webkit-scrollbar-track:active{background-color:#2f5d6e}.gd-container .gd-body::-webkit-scrollbar-thumb{border-radius:5px;background-color:#2f5d6e}.gd-container .gd-body::-webkit-scrollbar-thumb:hover{background-color:#113441}.gd-container .gd-body::-webkit-scrollbar-thumb:active{background-color:#2f5d6e}.gd-container .gd-body .not-reg{opacity:.5;width:100%;min-height:150px;font-size:1.2rem;font-weight:700;display:flex;align-items:center;justify-content:center}.gd-container .gd-body .gd-header-row{position:relative;font-size:.9rem}.gd-container .gd-body .gd-header-row.fixed{background-color:#fff;position:sticky;top:-15px;left:0;z-index:100;width:100%;overflow:auto}.gd-container .gd-body .gd-header-row.fixed .gd-col{border-bottom:1px solid #535353}.gd-container .gd-body .gd-header-row .gd-col{border-bottom:1px solid rgba(221,221,221,.8274509804);font-weight:700;text-align:left}.gd-container .gd-body .gd-body-row{transition:all ease-in-out .2s;font-size:.8rem;width:100%}.gd-container .gd-body .gd-body-row:hover{background-color:#ebebeb!important}.gd-container .gd-body .gd-body-row.even{background-color:#f0f0f080}.gd-container .gd-body .gd-body-row .gd-col{border-bottom:1px solid rgba(221,221,221,.2588235294)}.gd-container .gd-body .gd-header-row .gd-col,.gd-container .gd-body .gd-body-row .gd-col{width:auto;min-width:100px;padding:10px 0;position:relative;margin:0 5px}.gd-container .gd-body .gd-header-row .gd-col>div,.gd-container .gd-body .gd-body-row .gd-col>div{display:flex;justify-content:space-between;padding:0 15px 0 0}.gd-container .gd-footer{box-sizing:border-box;padding:15px;position:relative;bottom:0;width:100%;height:20%;border-top:1px solid #e4e4e4;display:flex;justify-content:space-between;align-items:center;max-height:70px}.gd-container .gd-footer .gd-info{font-size:.8rem;opacity:.7}.gd-container .gd-footer .gd-pagination{display:flex;justify-content:center;align-items:center}.gd-container .gd-footer .gd-pagination button{min-width:25px;height:30px;margin:0 5px;padding:5px;border:none;background-color:#ececec23;border-radius:5px;cursor:pointer;transition:all ease-in-out .2s}.gd-container .gd-footer .gd-pagination button.bg-selected{background-color:#48a2cc;color:#fff}.gd-container .gd-footer .gd-pagination button:hover{background-color:#cfcfcf}[gd-tooltip]{position:relative}[gd-tooltip]:after{font-size:.8rem;white-space:nowrap;min-width:100px;text-align:center;background-color:#4d4d4d;box-shadow:-1px 12px 19px -3px #00000026;color:#fff;box-sizing:border-box;content:attr(gd-tooltip);display:none;padding:10px;position:absolute;top:-35px;left:-300%;z-index:10;border-radius:5px}[gd-tooltip]:hover:after{display:inline}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CellComponent, selector: "gd-cell", inputs: ["row", "col"] }, { kind: "component", type: IndividualFilterInputComponent, selector: "InputIndividualSearch", inputs: ["search"], outputs: ["addFilterEvent"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: TableComponent, decorators: [{
type: Component,
args: [{ selector: 'tableadv', encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"\" [ngClass]=\"{'gd-backdrop': screenMaximize}\"></div>\r\n\r\n<div id=\"gd-container-{{id}}\" class='gd-container' [ngClass]=\"{'fullscreen':screenMaximize}\">\r\n\r\n <small class=\"gd-version\"> {{version}} </small>\r\n\r\n <!-- header -->\r\n <div class=\"gd-header\">\r\n\r\n <div class=\"gd-form-group\">\r\n\r\n <input class='gd-input-search' placeholder=\"Pesquisar Geral...\" [(ngModel)]=\"whereValue\" (keyup.enter)=\"onSearch()\">\r\n <button class='gd-btn' (click)=\"onSearch()\" gd-tooltip=\"Faz a pesquisa solicitada\">\r\n <i class=\"fa-solid fa-magnifying-glass\" ></i>\r\n </button>\r\n <button class='gd-btn' (click)=\"onCleanSearch()\" gd-tooltip=\"Limpa a pesquisa e reseta os dados\">\r\n <i class=\"fa-solid fa-broom\"></i>\r\n </button>\r\n\r\n <span gd-tooltip=\"Quantidade de registros por p\u00E1gina\">\r\n <select class=\"gd-select-qntreg\" [(ngModel)]=\"totalRegisterPerPage\" (change)=\"setRegistrsPerPage()\" >\r\n <option value=5>05</option>\r\n <option value=10>10</option>\r\n <option value=50>50</option>\r\n <option value=100>100</option>\r\n <option value=150>150</option>\r\n </select>\r\n </span>\r\n\r\n </div>\r\n\r\n <div class=\"gd-controls\">\r\n\r\n <button (click)=\"emitGetData()\" gd-tooltip=\"Atualiza os dados\">\r\n <i class=\"fa-solid fa-rotate\"></i>\r\n </button>\r\n\r\n <button (click)=\"maximizeToggle()\" gd-tooltip=\"Maximiza e minimiza\">\r\n <i *ngIf=\"!screenMaximize\" class=\"fa-solid fa-maximize\"></i>\r\n <i *ngIf=\"screenMaximize\" class=\"fa-solid fa-minimize\"></i>\r\n </button>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n\r\n <!-- body -->\r\n <div class=\"gd-body\" appScrollListener (fixedHeader)=\"fixeHeader($event)\">\r\n\r\n <div *ngIf=\"data == null\" class=\"not-reg\">{{message}}</div>\r\n <button *ngIf=\"data == null\" class=\"p-2 btn btn-sm btn-outline-dark\" (click)=\"onCleanSearch()\">Recarregar <i class=\"fa-solid fa-broom\"></i></button>\r\n\r\n <table *ngIf=\"data != null\">\r\n <tr class=\"gd-header-row\" [ngClass]=\"{'fixed': isFixed}\">\r\n\r\n <th class=\"gd-col\" *ngFor=\"let col of gridHeader\" [style.width]=\"col.width\">\r\n <div>\r\n {{col.label}}\r\n\r\n <i *ngIf=\"col.order\" style=\"cursor: pointer;\" #elementOrder\r\n class=\"icon-order fa-solid fa-sort opacity-50 mx-2 px-1 btn-tabledata-order\" id='order_{{col.order.db}}'\r\n (click)=\"onReorder(col.order)\">\r\n </i>\r\n </div>\r\n </th>\r\n </tr>\r\n\r\n <tr *ngIf=\"CheckIsShowRowSearch(gridHeader)\">\r\n <th class=\"gd-col\" *ngFor=\"let col of gridHeader\" [style.width]=\"col.width\">\r\n <InputIndividualSearch\r\n (addFilterEvent)=\"addIndividualFilter($event)\"\r\n [search]=\"col.search\"\r\n *ngIf=\"col.individualfilter\"\r\n ></InputIndividualSearch>\r\n </th>\r\n </tr>\r\n\r\n <tr class=\"gd-body-row\" *ngFor=\"let row of data.data; let i = index\" [ngClass]=\"{'even': i % 2 !== 0}\">\r\n <td class=\"gd-col\" *ngFor=\"let col of gridHeader\" [style.width]=\"col.width\">\r\n <gd-cell [row]=\"row\" [col]=\"col\"></gd-cell>\r\n </td>\r\n </tr>\r\n </table>\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n <!-- footer -->\r\n <div class=\"gd-footer\" *ngIf=\"data !== null\">\r\n\r\n <div class=\"gd-info\">\r\n <div>Exibindo p\u00E1gina <strong>{{actualPage}}</strong> de <strong>{{lastPage}}</strong></div>\r\n <div>Total de registros <strong>{{totalRegisters}}</strong></div>\r\n </div>\r\n\r\n <div class=\"gd-pagination\">\r\n\r\n <button [disabled]=\"1 == actualPage\" [ngClass]=\"{'disabled': 1 == actualPage}\" (click)=\"setFirstPage()\"> <i class=\"fa-solid fa-backward\"></i> </button>\r\n <button [disabled]=\"1 == actualPage\" [ngClass]=\"{'disabled': 1 == actualPage}\" (click)=\"setBeforePage()\"> <i class=\"fa-solid fa-caret-left\"></i> </button>\r\n\r\n <button [disabled]=\"page == actualPage\" [ngClass]=\"{'bg-selected': page == actualPage}\" *ngFor=\"let page of totalPagesArray\" (click)=\"setActualPage(page)\"> {{page}} </button>\r\n\r\n <button [disabled]=\"lastPage== actualPage\" [ngClass]=\"{'disabled': lastPage == actualPage}\" (click)=\"setNextPage()\"> <i class=\"fa-solid fa-caret-right\"></i> </button>\r\n <button [disabled]=\"lastPage == actualPage\" [ngClass]=\"{'disabled': lastPage == actualPage}\" (click)=\"setLastPage()\"> <i class=\"fa-solid fa-forward\"></i> </button>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n</div>\r\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css\";.gd-version{opacity:.2;font-size:.6rem;position:absolute;right:10px;bottom:5px}.gd-backdrop{background-color:#153c4b80;width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:2500;filter:blur()}body~.gd-container.fullscreen{overflow:hidden}.gd-container{background-color:#fff;width:100%;border-radius:5px;box-shadow:-1px 12px 19px -3px #00000026;font-family:Quicksand,sans-serif;position:relative;display:flex;flex-direction:column;align-items:center}.gd-container.fullscreen{width:95vw;height:95vh;position:fixed;left:2.5vw;top:2.5vh;padding:0;z-index:3000;max-width:100vw}.gd-container.fullscreen .gd-header{max-height:70px}.gd-container.fullscreen .gd-body{height:calc(100% - 140px);max-height:100%}.gd-container.fullscreen .gd-footer{height:70px;position:absolute}.gd-container .gd-header{width:100%;box-sizing:border-box;padding:15px;height:20%;border-bottom:1px solid #e4e4e4;display:flex;justify-content:space-between}.gd-container .gd-header .gd-form-group{width:80%;display:flex;align-items:center;border-radius:5px 0 0 5px;position:relative;height:30px}.gd-container .gd-header .gd-form-group .gd-btn{cursor:pointer;border:1px solid rgba(204,204,204,.2588235294);padding:5px 10px;background-color:#f7f7f700;color:#bdbdbd;opacity:.7;height:100%;min-height:30px}.gd-container .gd-header .gd-form-group .gd-btn:hover{opacity:1;color:#818181;border-color:#7777775d}.gd-container .gd-header .gd-form-group .gd-input-search{border:1px solid rgba(204,204,204,.2588235294);border-radius:5px 0 0 5px;min-height:28px;padding:0 6px;min-width:150px;max-width:300px;height:29px;position:relative;font-size:.8rem}.gd-container .gd-header .gd-form-group .gd-input-search:focus{outline-color:#7777775d}@media screen and (min-width: 768px){.gd-container .gd-header .gd-form-group .gd-input-search{min-width:300px}}.gd-container .gd-header .gd-form-group .gd-select-qntreg{border:1px solid rgba(204,204,204,.2588235294);border-r