@sapphire-ion/framework 1.2.41 → 1.2.43

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

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

@@ -0,0 +1,32 @@
+<div class="flex flex-wrap w-full gap-2">
+  @if (!noPage) {
+    <div class="portrait:basis-[calc(50%-0.25rem)] landscape:w-48 portrait:order-1">
+      <ion-item class="rounded-2xl w-full h-full translucid-border" lines="full" style="--border-radius: 1rem !important; --background: transparent" >
+        <ion-select [disabled]="loading" [(ngModel)]="limit" (ionChange)="EmitLimit()" interface="popover">
+          @for (limit of lstLimits; track limit) {
+            <ion-select-option [value]="limit.value">{{limit.label}}</ion-select-option>
+          }
+        </ion-select>
+      </ion-item>
+    </div>
+  }
+  
+  <ng-content select="[slot=start]"></ng-content>
+
+  @if(!noSearch) {
+    <div class="portrait:basis-full portrait:order-3 grow flex items-center justify-center">
+      <ion-searchbar class="w-full min-h-0 p-0 m-0" [debounce]="500" [(ngModel)]="search" (ionInput)="this.EmitSearch()" [animated]="true" placeholder="Pesquisar..."></ion-searchbar>
+    </div>
+  }
+
+  <ng-content select="[slot=end]"></ng-content>
+
+  @if(!noNew){
+    <div class="portrait:basis-[calc(50%-0.25rem)] landscape:basis-24 portrait:order-2">
+      <ion-button [routerLink]="overrideNew ? null : [link]" (click)="onNew()" class="size-full m-0 rounded-2xl text-base" size="small" fill="clear">
+        <ion-icon name="add" slot="start"></ion-icon>
+        <ion-text class="text-base">Novo</ion-text>
+      </ion-button>
+    </div>
+  }
+</div>

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

@@ -0,0 +1,85 @@
+import { Component, Output, Input, EventEmitter, HostListener } from '@angular/core';
+import { IonSearchbar } from '@ionic/angular';
+
+import { EnvironmentService } from '../../../../services/environment.service';
+import { PageOption } from '../../../../classes/page-option';
+
+/** Componente de cabeçalho de listagem padrão  */
+@Component({
+  selector: 'header-list',
+  templateUrl: './header-list.component.html',
+  styleUrls: ['./header-list.component.scss'],
+})
+export class HeaderListComponent {
+
+  /** Número de páginas máximo (usando two way data binding) */
+  @Input()  limit: number | null;
+  @Output() limitChange: EventEmitter<number | null> = new EventEmitter<number | null>();
+
+  /** Valor da pagina, setado = 1 quando troca-se o valor de limite de paginas (usando two way data binding) */
+  @Input() page: number;
+  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /** Campo de pesquisa (usando two way data binding) */
+  @Input() search: string | null;
+  @Output() searchChange: EventEmitter<string | null> = new EventEmitter<string | null>();
+  
+  @Input() loading: boolean;
+
+  /** Evento de refersh
+   * Emitido em:
+   *  - Troca de página
+   *  - Pesquisa
+   */
+  @Output('refresh') refreshEmitter: EventEmitter<void> = new EventEmitter<void>();
+
+  /** Link a ser acessado no click do botão NOVO */
+  @Input() link : string = "view";
+
+  /** Remove o botão NOVO */
+  @Input() noNew: boolean = false;
+  /** Remove o select de paginas */
+  @Input() noPage: boolean = false;
+  /** Remove o elemento de pesquisa */
+  @Input() noSearch: boolean = false;
+    
+
+  /** Desabilita o redirect de novo em um botão para ser utilizado com [onNewEmitter] */
+  @Input() overrideNew: boolean = false;
+  /** Evento quando o botáo NOVO é clickado */
+  @Output('onNew') onNewEmitter: EventEmitter<void> = new EventEmitter<void>();
+
+  onNew(): void{
+    this.onNewEmitter.emit();
+  }
+
+  constructor(private environmentService: EnvironmentService) { 
+    this.lstLimits = environmentService.environment.defaultPageLimits;
+    this.limit = this.lstLimits[0].value
+  }
+
+  lstLimits: PageOption[] = []
+  EmitSearch(): void{
+    this.searchChange.emit(this.search);
+    this.EmitChange();
+  }
+
+  EmitLimit(): void{
+    this.limitChange.emit(this.limit);
+    this.pageChange.emit(1);
+    
+    this.EmitChange();
+  }
+
+  EmitChange(){
+    this.refreshEmitter.emit();
+  }
+
+  @HostListener('window:keydown',['$event'])
+  onKeyPress($event: KeyboardEvent) {
+    if(($event.ctrlKey || $event.metaKey) && ($event.key == 'F' || $event.key == 'f')){
+      (document.getElementById("list_search") as any as IonSearchbar).setFocus();
+      $event.preventDefault();
+    }
+  }
+}

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

@@ -0,0 +1,127 @@
+
+import { Component, effect, ElementRef, EventEmitter, Input, model, ModelSignal, OnInit, Output } from '@angular/core';
+import { RefresherCustomEvent } from "@ionic/angular";
+import { Observable, firstValueFrom } from "rxjs";
+import { ActivatedRoute } from '@angular/router';
+
+import { CompileLstTableField, Comparison } from "../../../classes/comparison/comparison";
+import { HttpService, ViewRetorno } from '../../../services/web/http.service';
+import { GenericService } from "../../../services/generic.service";
+import { ViewFiltros } from "../../../classes/filters/view-filtros";
+import { TableField } from "../../../classes/inputs/table-field";
+import { RouteData } from "../../../classes/routes/route-data";
+import { LongProperty } from '../../../classes/comparison/properties/long-property';
+
+//Classe de listagem, implemente carregamento e filtragem de dados
+@Component({ template: '', styles: '' })
+export abstract class List<T extends HttpService<V>, V = any> implements OnInit {
+
+  protected genericService: GenericService;
+  protected activatedRoute: ActivatedRoute;
+  protected elementRef: ElementRef;
+  @Input() service: T;
+
+  constructor() { 
+    effect(() => {
+      this.SetFilters();
+    });
+  }
+  
+  /** @optional Filtro a ser aplicado na busca da listagem na API */
+  preloadFilter: ModelSignal<Comparison[]> = model<Comparison[]>([]); 
+  
+  //TODO FIX https://stackoverflow.com/a/73761805 
+  /** End-point de carregamento de dados. Deve ser uma função no service aplicado */
+  @Input() loadFrom: (view: ViewFiltros) => Observable<ViewRetorno>;
+
+
+  lstDados: V[] = [];
+  total   : number;
+  nested  : boolean = false;
+  loading : boolean = true;
+  
+  originalFilters: Comparison[] = [];
+
+  /** Filtro précarregado  */
+  @Input() frm: ViewFiltros = new ViewFiltros();
+
+  /** Lista de campos a serem substituídos pelo padrão, armazenado no service enviado como parâmetro */
+  @Input() lstTableFields: TableField[] = [];
+
+  async ngOnInit(): Promise<void> {
+    this.originalFilters = this.frm.filter;
+
+    if(this.lstTableFields.length == 0){
+      this.lstTableFields = this.service.lstTableFields;
+    }
+    if(!this.service.route){ console.warn("[ Warning! ] [ Url is undefined ]")}
+    if(!this.service.title){ console.warn("[ Warning! ] [ titulo is undefined ]")}
+    
+    //[ Nested element ]
+    if(this.elementRef.nativeElement.parentElement){
+      this.nested = (this.elementRef.nativeElement.parentElement.tagName as string).toUpperCase() != "ION-CONTENT";
+    }else{
+      this.nested = true;
+    }
+
+    await this.SetFilters();
+    if(this.nested){ this.Refresh(); }
+  }
+
+  /** Carrega os filtros pré-carregados e os filtros compilados */
+  protected async SetFilters(): Promise<void>{
+    await this.LoadIdComparison();
+    const compiled      = CompileLstTableField(this.lstTableFields);
+    const preloadFilter = this.preloadFilter();
+    // Adiciona os filtros pré-carregados, os filtros compilados e os filtros originais e remove os nulos
+    this.frm.filter     = [...preloadFilter, ...compiled, ...this.originalFilters].filter(p => p);
+  }
+
+  async LoadIdComparison(): Promise<void>{
+    try{
+      const data: RouteData = (await firstValueFrom(this.activatedRoute.data)) as RouteData;
+
+      const id   = this.genericService.GetId(this.activatedRoute, data.idPreloaderConfiguration.routeDepth);
+      var index: number = this.lstTableFields.indexOf(this.lstTableFields.find(p => p.index == data.idPreloaderConfiguration.propertyName));
+      const filter: Comparison = new LongProperty(data.idPreloaderConfiguration.propertyName).Equals(id);
+
+      filter.value = id;
+      filter.disableChange = data.idPreloaderConfiguration.disableChange;
+      this.lstTableFields[index].filter = [filter];
+    }finally{ 
+      return;
+    }
+  }
+
+  @Output('WillRefresh') WillRefresh: EventEmitter<void> = new EventEmitter<void>();
+  @Output('DidRefresh') DidRefresh: EventEmitter<void> = new EventEmitter<void>();
+
+  async Refresh(event?: RefresherCustomEvent): Promise<void> {
+    this.WillRefresh.emit();
+    this.loading = true;
+    try{
+      await this.Load();
+    }
+    finally{ }
+    
+    if(event){ event.target.complete(); }
+    this.loading = false;
+    this.DidRefresh.emit();
+  }
+  
+  async Load(): Promise<void>{
+    var vRetorno: ViewRetorno;
+
+    try{
+      if(this.loadFrom){
+        vRetorno = await firstValueFrom(this.service[this.loadFrom.name](this.frm));
+      }
+      else{
+        vRetorno = await firstValueFrom(this.service.List(this.frm));
+      }
+      this.lstDados = vRetorno.lstDados; 
+      this.total    = vRetorno.total; 
+    } finally{ }
+    return;
+  }
+}