@sapphire-ion/framework 1.2.63 → 1.3.2

package/src/lib/classes/infinite-scroll.ts

@@ -0,0 +1,112 @@
+import { InfiniteScrollCustomEvent } from "@ionic/angular";
+
+/**
+ * @deprecated
+ */
+export class InfiniteScroll {
+  public configuration: InfiniteScrollConfiguration;
+
+  private console: InfiniteScrollConsole;
+  
+  constructor(configuration: InfiniteScrollConfiguration){
+    this.configuration = configuration;
+    
+    this.console = new InfiniteScrollConsole(configuration.logging);
+  } 
+
+  get pushTreshhold(): number { return this.configuration.pushTreshold } 
+
+  private originalArray: any[] = [];
+  public internalArray: any[] = [];
+
+  public array: any[] = [];
+
+  get CanScroll(): boolean{
+    return this.array.length != this.internalArray.length
+  }
+  get NoItems(): boolean{
+    return this.array.length == 0;
+  }
+
+  public PushItens(event? : InfiniteScrollCustomEvent): void {
+    const minimum = this.array.length;
+    const size    = this.array.length + this.pushTreshhold;
+
+    for (let i = minimum; i < size; i++) {
+      this.console.log("[ Pushing @ ]", i, minimum, size, this.originalArray.length)
+      if(i > this.originalArray.length){ 
+        this.console.warn("[ Warning! ] [ End of array! ]"); 
+        break; 
+      }
+
+      const data = this.internalArray[i];
+      if(data){ this.array.push(data); }
+    }
+
+    if(event){ event.target.complete(); }
+  }
+
+  public search: string = "";
+  
+  public SetArray(array: any[]){
+    this.originalArray = array;
+    this.internalArray = array;
+    this.array        = [];
+  }
+  
+  public Search(){
+    this.internalArray = [];
+    this.array         = [];
+  
+    var search: string = this.search.toLowerCase();
+
+    this.originalArray.forEach(el => {
+      var hidden: boolean = true;
+      const lbl = this.getLabel(el).toLowerCase();
+      try{
+        hidden = !lbl.includes(search);
+      }catch{ 
+        this.console.warn("[ Error in searching @ object! ]", this.configuration, el) 
+      }
+
+      if(!hidden){ this.internalArray.push(el); }
+    });
+
+    this.PushItens();
+  }
+
+  private getLabel(item: any): string{
+    return typeof(this.configuration.bindLabel) == 'function' ? this.configuration.bindLabel(item) + '' : item[this.configuration.bindLabel] + ''
+  }
+}
+  
+export class InfiniteScrollConfiguration{
+  bindLabel    : string | ((...args: any[]) => string);
+  pushTreshold : number   = 50;
+  logging      : boolean = false;
+  constructor(bindLabel: string | ((...args: any[]) => string) = "nome", pushTreshold: number = 50, logging: boolean = false){
+    this.bindLabel    = bindLabel
+    this.pushTreshold = pushTreshold
+    this.logging      = logging
+  }
+}
+
+class InfiniteScrollConsole {
+  private logging: boolean = false;
+  constructor(logging: boolean){
+    this.logging = logging;
+    const _ = ((...args: any[]) : void => { return; })
+    this.warn  = _;
+    this.log   = _;
+    this.error = _;
+    if(logging){
+      this.log   = console.log;
+      this.warn  = console.warn;
+      this.error = console.error;
+    }
+  }
+
+  warn  : ((...args: any[]) => void );
+  log   : ((...args: any[]) => void );
+  error : ((...args: any[]) => void );
+}

package/src/lib/classes/inputs/table-field-form-builder.ts

@@ -0,0 +1,12 @@
+import { FormBuilder, FormGroup } from "@angular/forms";
+import { TableField } from "./table-field";
+
+export class TableFieldFormBuilder {
+  static create<T = any>(lstTableFields: TableField[], fb: FormBuilder): FormGroup{
+    const frm: FormGroup = fb.group({});
+    for (const field of lstTableFields) {
+      frm.addControl(field.index, field.formControl);
+    }
+    return frm;
+  }
+}

package/src/lib/classes/inputs/table-field.ts

@@ -0,0 +1,62 @@
+import { FormControl } from "@angular/forms";
+import { Comparison } from "../comparison/comparison";
+import { InputType } from "../../components/inputs/input-type";
+
+import { InputDecimalConfiguration, InputCurrencyConfiguration, InputNumberConfiguration } from '../../components/inputs/input-decimal/input-decimal.configuration';
+import { InputStringConfiguration } from '../../components/inputs/input-string/input-string.configuration';
+import { InputCpfCnpjConfiguration } from "../../components/inputs/input-cpf-cnpj/input-cpf-cnpj.configuration";
+import { InputSelectConfiguration } from '../../components/inputs/input-select/input.select.configuration';
+import { InputDateConfiguration } from '../../components/inputs/input-date/input-date.configuration';
+import { InputFileConfiguration } from '../../components/inputs/input-file/input-file.configuration';
+import { InputBoolConfiguration } from '../../components/inputs/input-bool/input-bool.configuration';
+import { InputConfiguration } from "../../components/inputs/input-configuration";
+
+export class TableField{
+  class     : string = "xl:col-span-3 md:col-span-6 col-span-full"
+  hiddenView: boolean = false;
+  hidden    : boolean = false;
+  filter    : Comparison[] = [];
+
+  private SelectDisableMultiple(){
+    if(this.type == InputType.Select && this.configuration){
+      return this.configuration.multiple;
+    }
+    return false;
+  }
+  disabledChange(): boolean {
+    return this.filter.some(p => p.disableChange) || this.SelectDisableMultiple();
+  };
+
+
+  constructor(
+    public header: string, 
+    public index : string, 
+    public formControl  : FormControl | null, 
+    public type         : InputType   | null, 
+    public configuration: InputConfiguration | null = null,
+    public disabled     : boolean = false
+  ){
+    if(configuration){ this.configuration = configuration }
+    else{
+      if(TableField.dateTypes.includes(type)){ this.configuration = new InputDateConfiguration() } else
+      if(type == InputType.CpfCnpj ){ this.configuration = new InputCpfCnpjConfiguration("CPFCNPJ") }else
+      if(type == InputType.Cpf     ){ this.configuration = new InputCpfCnpjConfiguration("CPF")     }else
+      if(type == InputType.Cnpj    ){ this.configuration = new InputCpfCnpjConfiguration("CNPJ")    }else
+      if(type == InputType.File    ){ this.configuration = new InputFileConfiguration()     }else
+      if(type == InputType.Number  ){ this.configuration = new InputNumberConfiguration()   }else
+      if(type == InputType.Decimal ){ this.configuration = new InputDecimalConfiguration()  }else
+      if(type == InputType.Currency){ this.configuration = new InputCurrencyConfiguration() }else
+      if(type == InputType.String  ){ this.configuration = new InputStringConfiguration()   }else
+      if(type == InputType.Select  ){ this.configuration = new InputSelectConfiguration()   }else
+      if(type == InputType.TextArea){ 
+        this.configuration = new InputStringConfiguration(); 
+        this.class = "col-span-full"                          
+      }else 
+      if(type == InputType.Bool    ){ 
+        this.configuration = new InputBoolConfiguration(); 
+        if(this.formControl.value == null){ this.formControl.setValue(false); } 
+      }
+    }
+  }
+  private static readonly dateTypes = [InputType.Date, InputType.DateTime, InputType.Time];
+}

package/src/lib/classes/page-option.ts

@@ -0,0 +1,8 @@
+
+/** Opções de paginação */
+export interface PageOption {
+  /** Quantidade de entidades a serem buscadas, se igual a null, busca todos os valores */
+  value: number | null; 
+  /** Texto a ser exibido no select de listagem */
+  label: string;
+}

package/src/lib/classes/routes/default-routing-factory.ts

@@ -0,0 +1,24 @@
+import { Routes } from "@angular/router";
+
+export class DefaultRoutingFactory{
+  /** Retorna as rotas padrões, incluindo listagem, view(novo) e view:id
+   * @param ListComponent Componente de listagem a ser invocado
+   * @param ViewCompnent Componente de listagem a ser invocado
+   */
+  public static GetRoutes(ListComponent, ViewCompnent): Routes{
+    return [
+      {
+        path: '',
+        component: ListComponent
+      },
+      {
+        path: 'view',
+        component: ViewCompnent
+      },
+      {
+        path: 'view/:id',
+        component: ViewCompnent,
+      }
+    ]
+  } 
+}

package/src/lib/classes/routes/id-preloader-configuration.ts

@@ -0,0 +1,21 @@
+import { Comparison } from "../comparison/comparison";
+
+/** Configuração de rota: Automaticamente aplica o id de uma rota superior para a filtragem de uma listagem de uma tebela filha
+ * * A propriedade precisa existir no seu determinado service para ser aplicado
+ */
+export class idPreloaderConfiguration{
+  constructor(
+    /** Propriedade no banco de dados a ser comparada */
+    public propertyName: string,
+    /** 
+     * Se idPreloaderChange == true  : o valor PODERÁ ser modificado na listagem pelo usuário
+     * Se idPreloaderChange == false : o valor NÃO poderá ser modificado na listagem pelo usuário
+     * */
+    public disableChange: boolean = false,
+
+    /** Profundidade da rota para buscar o parametro :id
+     * Valor minimo é 0
+     */
+    public routeDepth   : number = 2,
+  ){ }
+}

package/src/lib/classes/routes/route-data.ts

@@ -0,0 +1,9 @@
+import { idPreloaderConfiguration } from "./id-preloader-configuration";
+
+export class RouteData{
+  idPreloaderConfiguration: idPreloaderConfiguration | null = null;
+  
+  constructor(data: Partial<RouteData>){
+    if(data.idPreloaderConfiguration){ this.idPreloaderConfiguration = data.idPreloaderConfiguration }
+  }
+}

package/src/lib/components/carousel/carousel-image/carousel-image.component.html

@@ -0,0 +1,4 @@
+<image class="absolute top-0 left-0 block size-full default-transition rounded-xl" fill="clear"  
+  [ngClass]="{'opacity-20 -translate-x-full': carouselIndex() > index(), 'opacity-20 translate-x-full': carouselIndex() < index() }" 
+  [src]="src"
+></image>

package/src/lib/components/carousel/carousel-image/carousel-image.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ICarouselItem } from '../i-carousel-item.component';
+
+@Component({
+  selector: 'carousel-image',
+  templateUrl: './carousel-image.component.html',
+  styleUrls: ['./carousel-image.component.scss'],
+  providers: [{ provide: ICarouselItem, useExisting: CarouselImageComponent }],
+})
+export class CarouselImageComponent extends ICarouselItem implements OnInit {
+  @Input() src: string; 
+  constructor() { super(); }
+
+  ngOnInit() {}
+}

package/src/lib/components/carousel/carousel-item/carousel-item.component.html

@@ -0,0 +1,3 @@
+<div class="absolute top-0 left-0 size-full default-transition rounded-xl" [ngClass]="{'opacity-20 -translate-x-full': carouselIndex() > index(), 'opacity-20 translate-x-full': carouselIndex() < index() }">
+  <ng-content></ng-content>
+</div>

package/src/lib/components/carousel/carousel-item/carousel-item.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+import { ICarouselItem } from '../i-carousel-item.component';
+
+@Component({
+  selector: 'carousel-item',
+  templateUrl: './carousel-item.component.html',
+  styleUrls: ['./carousel-item.component.scss'],
+  providers: [{ provide: ICarouselItem, useExisting: CarouselItemComponent }],
+})
+export class CarouselItemComponent extends ICarouselItem implements OnInit {
+  constructor() { super(); }
+
+  ngOnInit() {}
+}

package/src/lib/components/carousel/carousel.component.html

@@ -0,0 +1,22 @@
+<ion-card class="size-full m-0">
+  <ion-card-content class="size-full p-0 relative">
+    <ng-content></ng-content>
+
+    <ion-button color="dark" size="small" class="absolute backdrop-blur-sm w-3 h-10 top-0 bottom-0 my-auto left-0 ml-2 default-transition" [disabled]="index() == 0" [ngClass]="{'opacity-0': index() == 0}" style="--border-radius: .5rem;" (click)="IndexDown()">
+      <ion-icon slot="icon-only" name="chevron-back"></ion-icon>
+    </ion-button>
+    <ion-button color="dark" size="small" class="absolute backdrop-blur-sm w-3 h-10 top-0 bottom-0 my-auto right-0 mr-2 default-transition" [disabled]=" index() >= lst().length - 1" [ngClass]="{'opacity-0': index() >= lst().length - 1}" style="--border-radius: .5rem;" (click)="IndexUp()">
+      <ion-icon slot="icon-only" name="chevron-forward"></ion-icon>
+    </ion-button>
+
+    @if(lst().length){
+      <div class="absolute left-0 bottom-0 h-8 w-full flex items-center justify-center">
+        <div class="bg-dark/50 h-3 rounded-full flex items-center justify-center default-transition gap-0.5 p-0.5">
+          @for (item of lst(); track $index) {
+            <div class="bg-light cursor-pointer border border-light/40 h-full aspect-square rounded-full backdrop-blur-sm default-transition" (click)="SetIndex($index)" [ngClass]="{'bg-dark': $index != index()}"></div>
+          }
+        </div>
+      </div>
+    }
+  </ion-card-content>
+</ion-card>

package/src/lib/components/carousel/carousel.component.ts

@@ -0,0 +1,83 @@
+import { AfterContentInit, Component, contentChildren, ContentChildren, effect, forwardRef, input, InputSignal, output, OutputEmitterRef, QueryList, signal, Signal, WritableSignal } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ICarouselItem } from './i-carousel-item.component';
+
+@Component({
+  selector: 'carousel',
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.scss'],
+  providers: [{ provide    : NG_VALUE_ACCESSOR, 
+                useExisting: forwardRef(() => CarouselComponent),
+                multi: true     
+  }]
+})
+export class CarouselComponent implements AfterContentInit, ControlValueAccessor {
+
+  @ContentChildren(ICarouselItem) components: QueryList<ICarouselItem>;
+  lst: Signal<readonly ICarouselItem[]> = contentChildren(ICarouselItem);
+  
+  value: InputSignal<any> = input<any>();
+  constructor() {
+    effect(() => {
+      if(this.value()){
+        this._model  = this.value();
+        this.index.set(this.lst().find(p => p.value() == this.value())?.index())
+      }
+      else{
+        if(this.lst().length){
+          this.model = this.lst()[0].value();
+        }
+      }
+      this.UpdateIndex();
+
+    }, { allowSignalWrites: true });
+  }
+
+  index: WritableSignal<number> = signal<number>(0);
+
+  ngAfterContentInit() {
+    this.UpdateIndex();
+  }
+
+  UpdateIndex(): void{
+    const lst = this.lst();
+    for(let carouselItem of lst){
+      carouselItem.index.set(lst.indexOf(carouselItem));
+      carouselItem.carouselIndex = this.index;
+    }
+  }
+  SetIndex(index: number){
+    this.index.set(index);
+    this.UpdateModel();
+  }
+  IndexUp(){
+    this.index.set(this.index() + 1);
+    this.UpdateModel();
+  }
+  IndexDown(){
+    this.index.set(this.index() - 1);
+    this.UpdateModel();
+  }
+  UpdateModel(){
+    this.model = this.lst().find(p => p.index() == this.index())?.value();
+  }
+
+  protected _model: any | null = null;
+  get model(): any      { return this._model;  }
+  set model(value: any) { this._model = value; this.propagateChange(this._model); }
+  
+
+  writeValue(value: string){ this.model = value; }
+
+  //[ ControlValueAccessor ]
+  /** Acionado quando um elemento perde o foco. */
+  blur  : OutputEmitterRef<any> = output<any>();
+  /** Emitido quando o valor é alterado. */
+  change: OutputEmitterRef<any> = output<any>();
+  propagateChange(obj: any): void{ this.onChange(obj); this.change.emit(obj);; }
+
+  onChange: (value: any) => void = (v: any) => { return; }
+  onTouch : (value: any) => void = (v: any) => { return; }
+  registerOnChange (fn: (value: any) => void ){ this.onChange = fn }
+  registerOnTouched(fn: (value: any) => void ){ this.onTouch  = fn }
+}

package/src/lib/components/carousel/carousel.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CarouselComponent } from './carousel.component';
+import { CarouselImageComponent } from './carousel-image/carousel-image.component';
+import { CarouselItemComponent } from './carousel-item/carousel-item.component';
+import { IonicModule } from '@ionic/angular';
+import { ImageComponent } from '../image/image.component';
+
+const lstComponents = [ CarouselComponent, CarouselImageComponent, CarouselItemComponent ]
+
+@NgModule({
+  declarations: [...lstComponents],
+  exports     : [...lstComponents],
+  imports: [
+    CommonModule,
+    IonicModule,
+    ImageComponent
+  ]
+})
+export class CarouselModule { }

package/src/lib/components/carousel/i-carousel-item.component.ts

@@ -0,0 +1,8 @@
+import { Component, Input, model, ModelSignal, Signal, signal, WritableSignal } from "@angular/core";
+
+@Component({ template: '' })
+export abstract class ICarouselItem {
+  index: WritableSignal<number> = signal(0);
+  carouselIndex: Signal<number> = signal(0);
+  value: ModelSignal<any>       = model<any>(undefined)
+}

package/src/lib/components/content-block/content-block.component.html

@@ -0,0 +1,6 @@
+<div class="absolute top-0 left-0 size-full opacity-0 -z-50 default-transition -translate-y-12 flex items-center justify-center !translucid-background" 
+  [ngClass]="{'!z-20 !opacity-100 !translate-y-0': value}">
+  <div class="w-full text-center h-16 flex items-center justify-center">
+    {{text}}
+  </div>
+</div>

package/src/lib/components/content-block/content-block.component.ts

@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+
+/** Bloqueia o conteudo na div que é aplicada
+ *  O elemento superior NÃO deve ter posicionamento INSET
+ */
+@Component({
+  standalone: true,
+  imports: [ CommonModule ],
+  selector: 'content-block',
+  templateUrl: './content-block.component.html',
+  styleUrls: ['./content-block.component.scss'],
+})
+export class ContentBlockComponent  implements OnInit {
+
+  /** Texto a ser exibido */
+  @Input() text : string = "Carregando, por favor aguarde...";
+  /** Define se o conteudo é bloqueado ou não */
+  @Input() value: boolean = true;
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

package/src/lib/components/default/default-list/abstract-list.ts

@@ -0,0 +1,56 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { firstValueFrom } from "rxjs";
+import { AlertButton } from "@ionic/angular";
+
+import { DefaultListComponent } from "./default-list.component";
+import { GenericService } from "../../../services/generic.service";
+import { HttpService } from "../../../services/web/http.service";
+import { RouteData } from "../../../classes/routes/route-data";
+
+/** Componente padrão para a invocação do DefaultList */
+@Component({ template: '', styles: '' })
+export abstract class AbstractList<T extends HttpService> implements OnInit {
+  
+  protected service: T
+  protected genericService: GenericService
+  protected activatedRoute: ActivatedRoute;
+
+  public id: number;
+  
+  ngOnInit(): void { 
+    this.LoadId();
+    if(this.activatedRoute){ this.LoadId(); }
+  }
+
+  /** Busca o id da tabela se estiver configurado */
+  async LoadId(){
+    if(this.activatedRoute){
+      const data: RouteData = (await firstValueFrom(this.activatedRoute.data)) as RouteData;
+      if(data && data.idPreloaderConfiguration){
+        this.id = this.genericService.GetId(this.activatedRoute, data.idPreloaderConfiguration.routeDepth);
+      }
+    }
+  }
+
+  @ViewChild('defList') DefaultList: DefaultListComponent<T>;
+  ionViewWillEnter(): void{
+    if(this.DefaultList){
+      this.DefaultList.Refresh();
+    }
+  }
+  
+  Delete(id: number): void {
+    const buttons: AlertButton[] = [
+      { text: "Cancelar", role: 'cancel' },
+      { text: "OK"      , role: 'confirm', handler: (() => { 
+          this.service.Delete(id).subscribe({ 
+            next: (() => { this.DefaultList.Refresh(); this.genericService.PresentToastSuccess("Excluido com sucesso!"); }) 
+          }); 
+        }) 
+      }
+    ]
+
+    this.genericService.PresentAlert("Atenção!", "Tem certeza que deseja excluir o dado?", buttons)
+  }
+}

package/src/lib/components/default/default-list/default-list.component.html

@@ -0,0 +1,60 @@
+<ion-content class="bg-transparent">
+  <div class="wrapper" [ngClass]="{'!p-0 translucid-primary-background': nested}">
+    @if (!noBreadcrumbs) {
+      <ion-breadcrumbs>
+        <ion-breadcrumb [routerLink]="[service ? service.route : '']" [replaceUrl]="true">{{service.title}}</ion-breadcrumb>
+      </ion-breadcrumbs>
+    }
+    <ion-card>
+      <ion-card-header [ngClass]="{'!px-0 !pb-0': noNew && noPage && noSearch}">
+        <header-list 
+          [(limit)]="frm.limit"
+          [(search)]="frm.search"        
+          [(page)]="frm.page"        
+          [loading]="loading"  
+          (refresh)="Refresh()"
+          [noNew]="noNew"
+          [noPage]="noPage"
+          [noSearch]="noSearch"
+          [overrideNew]="overrideNew"
+          (onNew)="onNewEmitter.emit()"
+        > 
+          <ng-content slot="start" select="[slot=header-start]"></ng-content>
+          <ng-content slot="end" select="[slot=header-end]"></ng-content>
+        </header-list>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-refresher slot="fixed" class="z-20" (ionRefresh)="Refresh($event)">
+          <ion-refresher-content></ion-refresher-content>
+        </ion-refresher>
+        <div class="size-full ion-content-scroll-host">
+          @if(frm){
+            <default-table 
+              class="block size-full relative" 
+              [ngClass]="{ 'translate-y-0' : !loading }"
+              [loading]="loading"
+              [items]="lstDados" 
+              [total]="total"
+              [(limit)]="frm.limit"
+              [(page)]="frm.page"
+              [(ascending)]="frm.ascending"
+              [(orderByProperty)]="frm.orderByProperty"
+              [(filter)]="frm.filter"
+              (itemClick)="itemClick.emit($event)"
+              [itemPath]="itemPath"
+              [columnClass]="columnClass"
+              [columnStyle]="columnStyle"
+              [service]="service"
+              [acoesTemplate]="acoesTemplate"
+              (refresh)="Refresh();"
+              (ativar)="Ativar($event)"
+              [lstTableFields]="lstTableFields"
+              [noPagination]="noPagination"
+            >
+            </default-table>
+          }
+        </div>
+      </ion-card-content>
+    </ion-card>
+  </div>
+</ion-content>

package/src/lib/components/default/default-list/default-list.component.ts

@@ -0,0 +1,72 @@
+import { Component, ContentChild, ElementRef, EventEmitter, Input, OnInit, output, Output, OutputEmitterRef, OutputRef, TemplateRef } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { firstValueFrom } from 'rxjs';
+
+import { HttpServiceAtivo } from '../../../services/web/http.ativo.service';
+import { GenericService } from '../../../services/generic.service';
+import { HttpService } from '../../../services/web/http.service';
+import { List } from './list';
+import { TableField } from '../../../classes/inputs/table-field';
+
+/** Componente de listagem padrão
+ * Tipo Generic deve ser um service HttpService 
+ * @link https://sapphire-ion-framework.gitbook.io/framework/componentes-default/default-list
+ */
+@Component({
+  selector: 'default-list',
+  templateUrl: './default-list.component.html',
+  styleUrls: ['./default-list.component.scss'],
+})
+export class DefaultListComponent<T extends HttpService> extends List<T> implements OnInit {
+
+  //#region [@Table]
+  /** Remove o botão NOVO da listagem */
+  @Input() noNew: boolean = false;
+  /** Remove a paginação da listagem */
+  @Input() noPage: boolean = false;
+  /** Remove o elemento de pesquisa da listagem */
+  @Input() noSearch: boolean = false;
+  
+  /** Aplica classes de CSS na coluna de acirdo com o retorno da função passada como parametro  */
+  @Input() columnClass: ((index:string, object: any) => string) | null = null;
+  /** Aplica style de CSS na coluna de acirdo com o retorno da função passada como parametro  */
+  @Input() columnStyle: ((index:string, object: any) => string) | null = null;
+  
+  /** Desabilita o redirect de novo em um botão para ser utilizado com [onNewEmitter] */
+  @Input() overrideNew: boolean = false;
+  /** Evento quando o botão NOVO é clicado */
+  @Output('onNew') onNewEmitter: EventEmitter<void> = new EventEmitter<void>();
+  /** Template de ações, é enviado com #tmpAcoes, deve ser um elemento ```<ng-template>``` */
+  @ContentChild('tmpAcoes', { static: false }) acoesTemplate!: TemplateRef<any>;
+  //#endregion [@Table]
+
+  /** Remove a paginação da listagem */
+  @Input() noPagination : boolean = false;
+  /** Remove os breadcrumbs da listagem */
+  @Input() noBreadcrumbs: boolean = false;
+  /** Caminho de redirecionamento do item */
+  @Input() itemPath: string | null = "view/:id"
+
+  itemClick: OutputEmitterRef<{item: any, field: TableField}> = output<{item: any, field: TableField}>();
+
+  constructor(
+    public override elementRef    : ElementRef,
+    public override activatedRoute: ActivatedRoute,
+    public override genericService: GenericService
+  ) { super(); }
+  
+  public async Ativar(id: number): Promise<void>{
+    if(!(this.service instanceof HttpServiceAtivo)){ return; }
+    this.loading = true;
+    try{
+      await firstValueFrom(this.service.Ativar(id));
+      this.Refresh();
+    }catch{
+      this.loading = false;
+    }
+  }
+
+  override async ngOnInit() {
+    await super.ngOnInit();    
+  }
+}