@sapphire-ion/framework 1.2.41 → 1.2.43

package/src/lib/components/default/default-table/th-filter/th-filter.component.ts

@@ -0,0 +1,183 @@
+import { Component, EventEmitter, Input, OnInit, Output, QueryList, ViewChildren, viewChildren } from '@angular/core';
+
+import { TableField } from '../../../../classes/inputs/table-field';
+import { InputType } from '../../../inputs/input-type';
+import { Utils } from '../../../../services/utils.service';
+
+import { InputDecimalConfiguration, InputCurrencyConfiguration, InputNumberConfiguration } from '../../../inputs/input-decimal/input-decimal.configuration';
+import { InputStringConfiguration } from '../../../inputs/input-string/input-string.configuration';
+import { InputSelectConfiguration } from '../../../inputs/input-select/input.select.configuration';
+import { InputDateConfiguration } from '../../../inputs/input-date/input-date.configuration';
+import { InputFileConfiguration } from '../../../inputs/input-file/input-file.configuration';
+import { InputBoolConfiguration } from '../../../inputs/input-bool/input-bool.configuration';
+import { InputConfiguration } from '../../../inputs/input-configuration';
+
+import { ImplicitProperty } from '../../../../classes/comparison/properties/implicit-property';
+import { DecimalProperty } from '../../../../classes/comparison/properties/decimal-property';
+import { StringProperty } from '../../../../classes/comparison/properties/string-property';
+import { BoolProperty } from '../../../../classes/comparison/properties/bool-property';
+import { DateProperty } from '../../../../classes/comparison/properties/date-property';
+
+import { Comparison } from '../../../../classes/comparison/comparison';
+import { InputDateComponent } from '../../../inputs/input-date/input-date.component';
+import { InputCpfCnpjConfiguration } from '../../../inputs/input-cpf-cnpj/input-cpf-cnpj.configuration';
+import { InputCepConfiguration } from '../../../inputs/input-cep/input-cep.configuration';
+
+@Component({
+  selector: 'th-filter',
+  templateUrl: './th-filter.component.html',
+  styleUrls: ['./th-filter.component.scss'],
+})
+export class ThFilterComponent implements OnInit {
+
+  @Input() field : TableField 
+
+  guid: string = Utils.GenerateGUID();
+  configuration: InputConfiguration;
+
+  constructor() { }
+
+  ngOnInit() {
+    this.configuration = this.field.configuration;
+    
+    if(!this.configuration){
+      if([InputType.Date, InputType.DateTime, InputType.Time].includes(this.field.type)){ this.configuration = new InputDateConfiguration() } else
+      if(this.field.type == InputType.File    ){ this.configuration = new InputFileConfiguration()     }else
+      if(this.field.type == InputType.Number  ){ this.configuration = new InputNumberConfiguration()   }else
+      if(this.field.type == InputType.Decimal ){ this.configuration = new InputDecimalConfiguration()  }else
+      if(this.field.type == InputType.Currency){ this.configuration = new InputCurrencyConfiguration() }else
+      if(this.field.type == InputType.String  ){ this.configuration = new InputStringConfiguration()   }else
+      if(this.field.type == InputType.Select  ){ this.configuration = new InputSelectConfiguration()   }else
+      if(this.field.type == InputType.TextArea){ this.configuration = new InputStringConfiguration();  }else 
+      if(this.field.type == InputType.Bool    ){ this.configuration = new InputBoolConfiguration();    } else
+      if(this.field.type == InputType.Cpf     ){ this.configuration = new InputCpfCnpjConfiguration("CPF"); }  else
+      if(this.field.type == InputType.Cnpj    ){ this.configuration = new InputCpfCnpjConfiguration("CNPJ"); }  else
+      if(this.field.type == InputType.CpfCnpj ){ this.configuration = new InputCpfCnpjConfiguration("CPFCNPJ"); } else
+      if(this.field.type == InputType.Cep     ){ this.configuration = new InputCepConfiguration();  }
+    }
+
+    if(this.configuration instanceof InputSelectConfiguration){
+      this.configuration = new InputSelectConfiguration(
+        this.configuration.bindValue,
+        this.configuration.bindLabel,
+        true,
+        true,
+        this.configuration.loadFrom,
+        true,
+      );
+      (this.configuration as InputSelectConfiguration).popoverConfiguration.flip = false;
+    }
+
+    if(this.configuration instanceof InputDateConfiguration){
+      this.configuration = new InputDateConfiguration(true);
+    }
+
+    if(this.field.type == InputType.Bool){
+      if(this.field.index == "ativo"){
+        this.configuration = this.configuration = new InputSelectConfiguration('value', 'label', true, true, [
+          { label: 'Somente Ativos'    , value: true  },
+          { label: 'Somente Não Ativos', value: false },
+        ]);
+        this.model = true;
+      }
+      else{
+        this.configuration = new InputSelectConfiguration('value', 'label', true, false, [
+          { label: 'Sim', value: true  },
+          { label: 'Não', value: false },
+        ])
+      }
+    }
+  }
+
+  isFilterActive: boolean = false;
+
+  model: any | null = null;
+  modelMinimum: any | null = null;
+  modelMaximum: any | null = null;
+  @Output('change') changeEmitter: EventEmitter<void> = new EventEmitter<void>();
+
+  Change(): void{
+    if(((typeof(this.model) == 'string' && !this.model) || 
+         this.model == null || 
+         (Array.isArray(this.model) && this.model.length == 0)) && 
+      !this.modelMinimum && !this.modelMaximum)
+    {
+      this.SetInactive();
+      return;
+    }
+
+    if([InputType.Currency, InputType.Decimal, InputType.Number].includes(this.field.type)){
+      var Comparison: Comparison[] = [];
+      if(this.modelMinimum){
+        var Bigger  = new DecimalProperty(this.field.index).GreaterThanOrEqual(this.modelMinimum);
+        Comparison = [Bigger];
+      }
+      if(this.modelMaximum){
+        var Smaller = new DecimalProperty(this.field.index).LessThanOrEqual(this.modelMaximum);
+        if(Comparison.length){ Comparison.push(Smaller); } 
+        else                 { Comparison = [Smaller]; }
+      }
+
+      this.field.filter = Comparison;
+      this.isFilterActive = true;
+      this.changeEmitter.emit();
+      return;
+    }else
+    if([InputType.String, InputType.TextArea, InputType.Cep, InputType.Cpf, InputType.Cnpj, InputType.CpfCnpj].includes(this.field.type)){
+      this.field.filter   = [new StringProperty(this.field.index).IsContainedIn(this.model)];
+      this.isFilterActive = true;
+      this.changeEmitter.emit();
+      return;
+    }else
+    if(this.field.type == InputType.Select){
+      this.field.filter   = [new ImplicitProperty(this.field.index).IsContainedIn(this.model)];
+      this.isFilterActive = true;
+      this.changeEmitter.emit();
+      return;
+    }else
+    if(this.field.type == InputType.Bool){
+      this.field.filter   = [new BoolProperty(this.field.index).Equals(this.model)];
+      this.isFilterActive = true;
+      this.changeEmitter.emit();
+      return;
+    } else
+    if([InputType.Date, InputType.DateTime].includes(this.field.type)){
+      if(this.modelMinimum){
+        if(this.field.type == InputType.Date){ this.modelMinimum = this.modelMinimum.split("T")[0] + "T23:59:59" }
+      }
+      if(this.modelMaximum){
+        if(this.field.type == InputType.Date){ this.modelMaximum = this.modelMaximum.split("T")[0] + "T23:59:59" }
+      }
+    
+      var Comparison: Comparison[] = [];
+      if(this.modelMinimum){
+        var BiggerDate  = new DateProperty(this.field.index).GreaterThanOrEqual(this.modelMinimum);
+        Comparison = [BiggerDate];
+      }
+      if(this.modelMaximum){
+        var SmallerDate = new DateProperty(this.field.index).LessThanOrEqual(this.modelMaximum);
+        if(Comparison.length){ Comparison.push(SmallerDate); } 
+        else                 { Comparison = [SmallerDate]  ; }
+      }
+      this.field.filter = Comparison;
+      this.isFilterActive = true;
+      this.changeEmitter.emit();
+      return;
+    }
+
+    this.changeEmitter.emit();
+  }
+
+  SetInactive(): void{
+    this.field.filter = null;
+    this.isFilterActive = false;
+    this.changeEmitter.emit();
+    return;
+  }
+
+  @ViewChildren(InputDateComponent) lstInputDate: QueryList<InputDateComponent>;
+  WillDismiss(): void{
+    console.log(this.lstInputDate.toArray());
+    this.lstInputDate.forEach(i => i.Dismiss());
+  }
+}

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

@@ -0,0 +1,25 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+
+import { GenericService } from "../../../services/generic.service";
+import { HttpService } from "../../../services/web/http.service";
+import { DefaultViewComponent } from "./default-view.component";
+
+/** Componente padrão para a invocação do DefaultView */
+@Component({ template: '', styles: '' })
+export abstract class AbstractView<T extends HttpService> implements OnInit {
+  public service       : T;
+  public genericService: GenericService;
+  public activatedRoute: ActivatedRoute;
+  
+  public id: number;
+  
+  ngOnInit(): void {
+    this.id = this.genericService.GetId(this.activatedRoute, 0);
+  }
+
+  @ViewChild(DefaultViewComponent<any>) public DefaultView: DefaultViewComponent<any>;
+  public static GetProvider(component): any[]{
+    return [{ provide: AbstractView, useExisting: component }]
+  }
+}

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

@@ -0,0 +1,111 @@
+<ion-content class="bg-transparent"> 
+  <div class="wrapper" [ngClass]="{'!p-0 translucid-primary-background': nested}" tabindex="-1">
+    @if (!noBreadcrumbs) {
+      <ion-breadcrumbs>
+        <ion-breadcrumb class="cursor-pointer" (click)="NavigateToList()">
+          {{service.title}}
+        </ion-breadcrumb>
+        <ion-breadcrumb> 
+          {{id == 0 ? 'Novo Registro' : 'Editar Registro' }} 
+        </ion-breadcrumb>
+      </ion-breadcrumbs>
+    }
+    
+    <ion-card>
+      <ion-card-header class="!block">
+        @if (service) {
+          <header-view 
+            *ngIf="service" 
+            [novo]="id == 0" 
+            [useDefaultRouting]="nested" 
+            [loading]="loading" 
+            [progress]="progress" 
+            (save)="Save()" 
+            [noBack]="noBack" 
+            [noNew]="noNew"
+            [backRouterLink]="backRouterLink"
+          ></header-view>
+        }
+      </ion-card-header>
+      <ion-card-content class="p-0 h-full !overflow-y-auto overflow-x-hidden">
+        <div class="grid grid-cols-12 gap-2 w-full" *ngIf="frm" [formGroup]="frm">
+  
+          @for (field of lstTableFields; track $index) {
+            @if (field.index != 'id') {
+              @if (!field.hiddenView) {
+                @switch (field.type) {
+                  @case (InputType.Bool) {
+                    <input-bool      [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration" ></input-bool>
+                  }
+                  @case (InputType.Cep){
+                    <input-cep       [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted"></input-cep>
+                  }
+                  @case (InputType.Color){
+                    <input-color     [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted"></input-color>
+                  }
+                  @case (InputType.CpfCnpj) {
+                    <input-cpf       [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-cpf>
+                  }
+                  @case (InputType.Cpf) {
+                    <input-cpf       [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-cpf>
+                  }
+                  @case (InputType.Cnpj) {
+                    <input-cnpj      [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-cnpj>
+                  }
+                  @case (InputType.Date) {
+                    <input-date      [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-date>
+                  }
+                  @case (InputType.DateTime) {
+                    <input-date-time [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-date-time>
+                  }
+                  @case (InputType.Time) {
+                    <input-time      [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-time>
+                  }
+                  @case (InputType.Decimal) {
+                    <input-decimal   [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-decimal>
+                  }
+                  @case (InputType.Currency) {
+                    <input-currency  [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-currency>
+                  }
+                  @case (InputType.Number) {
+                    <input-number    [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-number>
+                  }
+                  @case (InputType.File) {
+                    <input-file      [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-file>
+                  }
+                  @case (InputType.Icon) {
+                    <input-icon      [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted"></input-icon>
+                  }
+                  @case (InputType.Select) {
+                    <input-select    [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-select>
+                  }
+                  @case (InputType.String) {
+                    <input-string    [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-string>
+                  }
+                  @case (InputType.TelefoneCelular) {
+                    <input-telefone-celular    [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-telefone-celular>
+                  }
+                  @case (InputType.Telefone) {
+                    <input-telefone  [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-telefone>
+                  }
+                  @case (InputType.Celular) {
+                    <input-celular   [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-celular>
+                  }
+                  @case (InputType.TextArea) {
+                    <input-textarea  [class]="field.class" [formControlName]="field.index" [label]="field.header" [loading]="loading" [disabled]="field.disabled" [submitted]="submitted" [configuration]="field.configuration"></input-textarea>
+                  }
+                }
+              }
+            }
+          }
+  
+          <div class="col-span-full rounded-2xl p-3 flex items-center justify-center" *ngIf="!service || service.lstTableFields.length == 0" style="background: var(--ion-color-danger);">
+            <ion-text class="text-2xl text-light">
+              <ion-icon class="align-sub text-3xl" name="alert-circle"></ion-icon> [ Invalid Configuration ]
+            </ion-text>
+          </div>
+        </div>
+      </ion-card-content>
+    </ion-card>
+  </div>
+</ion-content>

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

@@ -0,0 +1,44 @@
+import { FormBuilder } from '@angular/forms';
+import { Component, ElementRef, Input, OnInit } from '@angular/core';
+import { ActivatedRoute, UrlTree } from '@angular/router';
+import { NavController } from '@ionic/angular';
+
+
+import { HttpServiceAtivo } from '../../../services/web/http.ativo.service';
+import { HttpService      } from '../../../services/web/http.service';
+import { GenericService } from '../../../services/generic.service';
+import { View } from './view';
+import { InputType } from '../../inputs/input-type';
+
+/** Componente View Padão */
+@Component({
+  selector: 'default-view',
+  templateUrl: './default-view.component.html',
+  styleUrls: ['./default-view.component.scss'],
+})
+export class DefaultViewComponent<T extends HttpService | HttpServiceAtivo> extends View<T> implements OnInit {
+
+  /** Remove o botão de voltar */
+  @Input() noBack: boolean = false;
+  /** Remove o botão NOVO da listagem */
+  @Input() noNew : boolean = false;
+  /** Remove os breadcrumbs da listagem */
+  @Input() noBreadcrumbs: boolean = false;
+
+  InputType = InputType;
+
+
+  
+  /**  
+   * Rota para voltar, caso não seja definida, o componente irá tentar usar rota do ionic
+  */
+  @Input() backRouterLink: string | any[] | UrlTree | undefined = undefined;
+
+  constructor(
+    public override fb: FormBuilder,
+    public override elementRef: ElementRef,
+    public override activatedRoute: ActivatedRoute,
+    public override genericService: GenericService,
+    public override navController: NavController,
+  ) { super(); }
+}

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

@@ -0,0 +1,64 @@
+<div class="w-full h-7 flex">
+  <div class="w-1/2 flex items-center justify-start gap-3">
+    @if(!noBack){
+      @if(useDefaultRouting || backRouterLink){
+        <ion-button class="m-0" fill="clear" size="small" [routerLink]="backRouterLink ? backRouterLink : DefaultBackRoute">
+          <ion-icon class="text-[1.7rem]" name="chevron-back" slot="icon-only"></ion-icon>
+          <ion-text class="text-base">Voltar</ion-text>
+        </ion-button>
+      }
+      @else{
+        <ion-back-button style="--min-height: 100%;" [disabled]="loading" text="Voltar" [defaultHref]="DefaultBackRoute"></ion-back-button>
+      }
+
+      <!-- <ion-card button [disabled]="loading" class="h-full w-12 m-0 default-transition" style="border-color: var(--ion-color-primary)">
+        <ion-card-content class="p-0 bg-transparent">
+          @if(!useDefaultRouting){
+            <ion-back-button class="scale-75 size-full" style="--min-height: 100%;" text=""  [defaultHref]="BackRoute" >
+            </ion-back-button>
+          }@else {
+            <ion-button class="size-full" size="small" fill="clear" [routerLink]="BackRoute">
+              <ion-icon name="chevron-back" slot="icon-only"></ion-icon>
+            </ion-button>
+          }
+        </ion-card-content>
+      </ion-card> -->
+    }
+    @if(!noBack){
+      <div class="h-full border-r-2 border-r-primary border-solid mask-y/50"></div>
+    }
+
+    <div class="relative">
+      <ion-button class="-mx-2" [disabled]="loading" fill="clear" size="small" (click)="Save()">
+        <ion-icon class="text-base" slot="start" name="save"></ion-icon>
+        <ion-text class="text-base">
+          Salvar
+        </ion-text>
+      </ion-button>
+
+      <div class="absolute w-[125%] h-[125%] -top-[12.5%] -left-[12.5%] flex flex-col items-center justify-center default-transition backdrop-blur-sm" [ngClass]="{'opacity-0 -translate-y-8': !loading}">
+        <ion-text color="success" class="text-sm mt-1"><b>
+          @if(progress){
+            {{(progress * 100) | number: '1.1-1'}}%
+          }@else {
+            {{0 | number: '1.1-1'}}%
+          }
+        </b></ion-text>
+        <ion-progress-bar [value]="progress" color="success" class="w-full default-transition"></ion-progress-bar>
+      </div>
+    </div>
+    <ng-content select="[slot=start]"></ng-content>
+  </div>
+  <div class="w-1/2 flex justify-end items-center gap-2">
+    <ng-content select="[slot=end]"></ng-content>
+
+    @if(!(noNew || novo)){
+      <ion-button #new [routerLink]="['../']" class="m-0" fill="clear" size="small">
+        <ion-icon class="text-base" name="add" slot="start"></ion-icon> 
+        <ion-text class="text-base">
+          Novo
+        </ion-text>
+      </ion-button>
+    }
+  </div>
+</div>

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

@@ -0,0 +1,57 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { IonBackButton, NavController } from '@ionic/angular';
+import { ActivatedRoute, UrlTree } from '@angular/router';
+
+@Component({
+  selector: 'header-view',
+  templateUrl: './header-view.component.html',
+  styleUrls: ['./header-view.component.scss'],
+})
+export class HeaderViewComponent implements OnInit {
+
+  @Input() novo: boolean = false;
+  @Input() loading: boolean;
+  @Input() progress: number | null = null;
+  @Output('save') saveEmitter: EventEmitter<void> = new EventEmitter<void>();  
+
+  @Input() noBack: boolean = false;
+  @Input() noNew : boolean = false;
+  @Input() useDefaultRouting: boolean = false;
+  /**  
+   * Rota para voltar, caso não seja definida, o componente irá tentar usar rota do ionic
+  */
+  @Input() backRouterLink: string | any[] | UrlTree | undefined = undefined;
+
+  constructor(
+    private navController: NavController,
+    private activatedRoute: ActivatedRoute
+  ) { }
+
+  ngOnInit() {}
+
+  protected get DefaultBackRoute(){
+    const fullRoute = window.location.pathname.split('/')
+
+    const li = fullRoute[fullRoute.length - 1];
+    var offset = 1;
+    if(Number(li)){ offset++; }
+    let route: string[] = []
+    for(let i = 0; i < fullRoute.length - offset; i++){ route.push(fullRoute[i]); }
+    return route.join('/');
+  }
+
+  @ViewChild(IonBackButton) IonBackButtonElement: IonBackButton; 
+  public Back($event = null){
+    this.IonBackButtonElement.onClick($event)
+  }
+  @ViewChild('new') NewIonButtonElement: ElementRef; 
+  public New(){
+    if(!this.novo){
+      this.navController.navigateForward(['../'], { relativeTo: this.activatedRoute});
+    }
+  }
+
+  Save(): void{
+    this.saveEmitter.emit();
+  }
+}

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

@@ -0,0 +1,183 @@
+import { Component, ElementRef, EventEmitter, HostListener, inject, Input, OnInit, Output, QueryList, ViewChild, viewChild, ViewChildren } from "@angular/core";
+import { FormBuilder, FormGroup } from "@angular/forms";
+import { ActivatedRoute } from "@angular/router";
+
+import { HttpService      } from "../../../services/web/http.service";
+import { HttpServiceAtivo } from "../../../services/web/http.ativo.service";
+import { GenericService   } from "../../../services/generic.service";
+import { TableFieldFormBuilder } from "../../../classes/inputs/table-field-form-builder";
+import { NavController } from "@ionic/angular";
+import { firstValueFrom, lastValueFrom } from "rxjs";
+import { HeaderViewComponent } from "./header-view/header-view.component";
+import { TableField } from "../../../classes/inputs/table-field";
+import { RouteData } from "../../../classes/routes/route-data";
+import { CustomInput } from "../../inputs/custom-input";
+import { Timeout } from "../../../services/utils.service";
+
+@Component({ template: '', styles: '' })
+export abstract class View<T extends HttpService | HttpServiceAtivo> implements OnInit {
+  /** Id do dado a ser carregado */
+  @Input() id       : number | null = null;
+  @Input() loading  : boolean = false;
+  @Input() submitted: boolean = false;
+  /** Progresso de salvamento */
+  @Input() progress : number;
+  /** Service a ser utlizado na view */
+  @Input() service  : T;
+  
+  protected genericService: GenericService;
+  protected activatedRoute: ActivatedRoute;
+  protected elementRef: ElementRef;
+  protected fb: FormBuilder;
+
+  protected nested: boolean = false;
+
+  constructor(){
+    this.genericService = inject(GenericService)
+    this.activatedRoute = inject(ActivatedRoute)
+    this.elementRef     = inject(ElementRef)
+    this.fb             = inject(FormBuilder)
+  }
+
+  /** Lista de TableFields a serem invocados de acordo com sua configuração.
+   * Automaticamente preenchido com service.lstTableFieldsView ou service.lstTableFields quando não informado
+    */
+  @Input() lstTableFields: TableField[] = [];
+  @Input() public redirectPath: string | null = "/view/:id"
+  
+  
+  @ViewChild('.wrapper') Wrapper: HTMLElement;
+  async ngOnInit() {
+    if(this.lstTableFields.length == 0){
+      if(this.service.lstTableFieldsView.length != 0){
+        this.lstTableFields = this.service.lstTableFieldsView;
+      }else{
+        this.lstTableFields = this.service.lstTableFields;
+      }
+    }
+
+    if(this.id == null){
+      this.id = this.genericService.GetId(this.activatedRoute, 0);
+    }
+    
+    if(!this.service){ console.warn("[ View service is not valid! ]"); }
+    if (instanceOfViewWillCreateForm(this)) { this.OnViewWillCreateForm() }
+    await this.CreateForm();
+    if (instanceOfViewDidCreateForm(this)) { this.OnViewDidCreateForm() }
+  
+    if(this.elementRef && this.elementRef.nativeElement && this.elementRef.nativeElement.parentElement){
+      this.nested = (this.elementRef.nativeElement.parentElement.tagName as string).toUpperCase() != "ION-CONTENT";
+    }else{
+      this.nested = true;
+    }
+
+    await this.Refresh();
+    await this.FocusOnFirstField();
+
+  }
+
+  @ViewChildren(CustomInput) lstCustomInputs: QueryList<CustomInput<any>>;
+  async FocusOnFirstField(): Promise<void> {
+    try{
+      await Timeout(100);
+      this.lstCustomInputs.first.setFocus(null);
+    }catch{}
+  }
+
+  @Output('ViewDidRefresh') ViewDidRefreshEmitter: EventEmitter<void> = new EventEmitter<void>();
+  async Refresh() {
+    this.loading = true;
+    try{
+      await this.Load();
+    }finally{ }
+    this.loading = false;
+    this.ViewDidRefreshEmitter.emit();
+  }
+
+  async Load(): Promise<void>{
+    if(!this.id){ return; }
+    const res = await firstValueFrom(this.service.Get(this.id));
+    this.frm.patchValue(res);
+  }
+
+  frm: FormGroup;
+  async CreateForm() {
+    this.frm = TableFieldFormBuilder.create(this.lstTableFields, this.fb);
+    await this.LoadIdComparison();
+  }
+
+  async LoadIdComparison(): Promise<void> {
+    try{
+      const data: RouteData = await firstValueFrom(this.activatedRoute.data) as RouteData;
+      if(!data){ return; }
+      const id   = this.genericService.GetId(this.activatedRoute, data.idPreloaderConfiguration.routeDepth);
+      
+      if(!id){ return; }
+
+      this.frm.controls[data.idPreloaderConfiguration.propertyName].setValue(id);
+      this.lstTableFields.find(p => p.index == data.idPreloaderConfiguration.propertyName).disabled = true;
+    }catch{ }
+  }
+
+  /** Emite o id da entidade salva apos o salvamento */
+  @Output('Save') SaveEmitter: EventEmitter<number> = new EventEmitter<number>();
+  async Save() {
+    await lastValueFrom(this.service.Save(this.frm, this));
+    this.SaveEmitter.emit(this.id);
+  }
+
+  public get BackRoute(){
+    const fullRoute = window.location.pathname.split('/')
+
+    const li = fullRoute[fullRoute.length - 1];
+    var offset = 1;
+    if(Number(li)){ offset++; }
+    let route: string[] = []
+    for(let i = 0; i < fullRoute.length - offset; i++){ route.push(fullRoute[i]); }
+    return route.join('/');
+  }
+
+  public GetCurrentRouting(): ActivatedRoute { return this.activatedRoute; }
+
+  protected navController: NavController;
+  protected NavigateToList(): void{ this.navController.navigateBack(this.BackRoute); }
+
+
+  @ViewChild(HeaderViewComponent) HeaderViewComponentElement: HeaderViewComponent;
+
+  @HostListener('window:keydown',['$event'])
+  onKeyPress($event: KeyboardEvent) {
+    if(!(this.elementRef.nativeElement.contains(document.activeElement) || document.activeElement == this.elementRef.nativeElement)){
+      return;
+    }
+    if($event.key == 'Escape'){
+      this.HeaderViewComponentElement.Back($event);
+      $event.preventDefault();
+      return;
+    }
+    if(($event.ctrlKey || $event.metaKey) && ($event.key == 'Enter')){
+      this.Save();
+      $event.preventDefault();
+      return;
+    }
+    if($event.altKey && $event.key == 'Insert'){
+      this.HeaderViewComponentElement.New();
+      $event.preventDefault();
+      return;
+    }
+  }
+}
+
+export interface ViewWillCreateForm{
+  OnViewWillCreateForm(): void | any;
+} 
+function instanceOfViewWillCreateForm(object: any): object is ViewWillCreateForm {
+  return 'OnViewWillCreateForm' in object;
+}
+export interface ViewDidCreateForm {
+  OnViewDidCreateForm(): void | any;
+} 
+function instanceOfViewDidCreateForm(object: any): object is ViewDidCreateForm {
+  return 'OnViewDidCreateForm' in object;
+}
+