@sapphire-ion/framework 1.2.63 → 1.3.1

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

@@ -0,0 +1,255 @@
+import { formatNumber } from '@angular/common';
+import { Component, computed, effect, Input, input, InputSignal, model, ModelSignal, OnInit, output, OutputEmitterRef, OutputRef, Signal, TemplateRef } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { InputDecimalConfiguration } from '../../inputs/input-decimal/input-decimal.configuration';
+import { InputSelectConfiguration } from '../../inputs/input-select/input.select.configuration';
+import { FormatTelefoneCelular } from '../../inputs/input-telefone/input-telefone.component';
+import { StorageService } from '../../../services/web/storage.service';
+import { FormatCpfCnpj } from '../../inputs/input-cpf-cnpj/input-cpf-cnpj.component';
+import { HttpService } from '../../../services/web/http.service'
+import { TableField } from '../../../classes/inputs/table-field';
+import { Comparison, CompileLstTableField } from '../../../classes/comparison/comparison';
+import { FormatCep } from '../../inputs/input-cep/input-cep.component';
+import { InputType } from '../../inputs/input-type';
+import { Utils } from '../../../services/utils.service';
+
+type CSSStyleStringGenerator = (index: string, object: any) => string;
+
+@Component({
+  selector: 'default-table',
+  templateUrl: './default-table.component.html',
+  styleUrls: ['./default-table.component.scss'],
+})
+export class DefaultTableComponent<Service extends HttpService, T = any> implements OnInit {
+
+  @Input() acoesTemplate: TemplateRef<any>;
+  /** Template de ações, deve ser um elemento ```<ng-template>``` */
+  // acoesTemplate: InputSignal<TemplateRef<any>> = input<TemplateRef<any>>();
+
+  /** Service a ser utilizado na listagem */
+  service: InputSignal<Service> = input<Service>();
+
+  total: ModelSignal<number> = model<number>(0);
+
+  /** Número de items máximo (usando two way data binding) */
+  limit: ModelSignal<number> = model<number>();
+
+  /** Valor da pagina, setado = 1 quando troca-se o valor de limite de paginas (usando two way data binding) */
+  page: ModelSignal<number> = model<number>(1);
+
+  /** Propriedade de ordenação (usando two way data binding) */
+  orderByProperty: ModelSignal<string | null> = model<string | null>(null);
+    
+  /** Propriedade de ordenação
+   * Se = true  Ordenará de menor ao maior 
+   * Se = false Ordenará de maior ao menor (usando two way data binding) */
+  ascending: ModelSignal<boolean> = model<boolean>(true);
+
+  /** Filtros (usando two way data binding) */ 
+  filter: ModelSignal<Comparison[]> = model<Comparison[]>([]);
+
+  /** Evento emitido quando um dos dados é ativado. Emite o id do dado */  
+  ativar : OutputEmitterRef<number> = output<number>();
+  refresh: OutputEmitterRef<void> = output<void>();
+
+
+  loading: ModelSignal<boolean> = model<boolean>(false);
+
+  /** Lista de dados a ser exibidos */
+  items: ModelSignal<T[]> = model<T[]>([]);
+
+  /** Lista de campos a ser exibidos */
+  lstTableFields: ModelSignal<TableField[]> = model<TableField[]>([]);
+  lstTableFieldsAvailable: Signal<AvailableTableField[]> = computed<AvailableTableField[]>(() => { 
+    return this.lstTableFields().filter(p => !p.hidden).map(tf => {
+      return new AvailableTableField(
+        tf, 
+        this.ascending() && this.orderByProperty() == tf.index, 
+        !this.ascending() && this.orderByProperty() == tf.index
+      );
+    });
+  });
+
+  /** Remove os filtros no cabeçalho da tabela  */
+  noFilters: InputSignal<boolean> = input<boolean>(false);
+
+  /** Aplica classes de CSS na coluna de acirdo com o retorno da função passada como parametro  */
+  columnClass: InputSignal<CSSStyleStringGenerator | null> = input<CSSStyleStringGenerator | null>(null);
+
+  /** Aplica style de CSS na coluna de acirco com o retorno da função passada como parametro  */
+  columnStyle: InputSignal<CSSStyleStringGenerator | null> = input<CSSStyleStringGenerator | null>(null);
+
+  /** Remove a paginação da listagem */
+  noPagination: InputSignal<boolean> = input<boolean>(false);
+
+  /** Caminho de redirecionamento do item */
+  itemPath: InputSignal<string> = input<string>('view/:id');
+  itemClick: OutputEmitterRef<{item: T, field: TableField}> = output<{item: T, field: TableField}>();
+
+  InputType = InputType;
+
+  constructor(
+    public storageService : StorageService,
+    private activatedRoute: ActivatedRoute,
+    private router        : Router,
+  ) { 
+    effect(() => {
+      for (const tf of this.lstTableFields().filter(p => p.type == InputType.Select)) {
+        (tf.configuration as InputSelectConfiguration).loader.Refresh().then(() => this.SetLstRows());
+      }
+      this.SetLstRows();
+    });
+  }
+
+Redirect(field: TableField | undefined, item: T): void {
+  if (field == null) {
+    return;
+  }
+  this.itemClick.emit({ item, field });
+  if (field.index == 'ativo') {
+    return;
+  }
+  if (field.type == 'File') {
+    return;
+  }
+  if (this.itemPath()) {
+    const id = item['id'];
+    const path = this.itemPath().replace(":id", id.toString());
+    this.router.navigate([`./${path}`], { relativeTo: this.activatedRoute })
+  }
+}
+
+  SetLstRows(){ 
+    this.lstRows = this.items().map(item => {
+      return new DefaultTableRow<T>(
+        item, 
+        item['id'],
+        this.GetColumns(item),
+        '',
+        '',
+      );
+    });
+  }
+  
+  lstRows: DefaultTableRow<T>[] = []; 
+
+  GetColumns(item: T): DefaultTableColumn[] {
+    return this.lstTableFields().filter(p => !p.hidden).map(tf => {
+      const value = item[tf.index];
+      const column = new DefaultTableColumn(value, tf);
+      column.class = this.columnClass() ? this.columnClass()(tf.index, item) : '';
+      column.style = this.columnStyle() ? this.columnStyle()(tf.index, item) : '';
+      
+      if(!value){ 
+        column.label = '-' 
+        return column;
+      }
+      
+      if(tf.type == InputType.Bool){
+        column.label = "<bool>"
+      } else
+      if(tf.type == InputType.Cep){
+        column.label = FormatCep(value);
+      } else
+      if(tf.type == InputType.Color){
+        column.label = value;
+      } else
+      if([InputType.Cpf, InputType.Cnpj, InputType.CpfCnpj].includes(tf.type)){
+        column.label = FormatCpfCnpj(value);
+      } else
+      if(tf.type == InputType.DateTime){
+        column.class += ' font-mono';
+        column.label = Utils.DateISOToDDMMYYYYHHMM(value);
+      } else
+      if(tf.type == InputType.Date){
+        column.class += ' font-mono';
+        column.label = Utils.DateISOToDDMMYYYY(value);
+      } else
+      if(tf.type == InputType.Time){
+        column.class += ' font-mono';
+        column.label = value;
+      } else
+      if([InputType.Decimal, InputType.Decimal, InputType.Currency, InputType.Number].includes(tf.type)){
+        const configuration: InputDecimalConfiguration = tf.configuration;
+        column.label = [
+          configuration.prefix, 
+          formatNumber(value as number, 'pt-BR', `1.${configuration.precision}-${configuration.precision}`),
+          configuration.sufix, 
+        ].join(' ');
+      } else
+      if(tf.type == InputType.File){
+        column.label = '<file>';
+      } else
+      if(tf.type == InputType.Icon){
+        column.label = 'icon';
+      } else
+      if(tf.type == InputType.Select){
+        column.label = (tf.configuration as InputSelectConfiguration).loader.GetLabel(value);
+        column.loading = !(tf.configuration as InputSelectConfiguration).loader.isLoaded;
+      } else
+      if([InputType.String, InputType.TextArea].includes(tf.type)){
+        column.label = value
+      } else
+      if([InputType.Telefone, InputType.Celular, InputType.TelefoneCelular].includes(tf.type)){
+        column.label = FormatTelefoneCelular(value);
+      }
+
+      return column;
+    });
+  }
+
+  ngOnInit() { this.SetLstRows(); }
+
+  SwitchOrder(tf: TableField): void{
+    if(this.orderByProperty() != tf.index){
+      this.orderByProperty.set(tf.index);
+      this.ascending.set(true);
+    } else 
+    if(this.ascending()){
+      this.ascending.set(false);
+    } else{ 
+      this.orderByProperty.set(null); 
+    }
+    this.refresh.emit();
+  }
+
+  ChangeFilter(): void{
+    this.filter.set(CompileLstTableField(this.lstTableFields()));
+    this.page.set(1);
+    this.refresh.emit();
+  }
+
+  Ativar(id: number): void{
+    this.ativar.emit(id);
+  }
+}
+
+class DefaultTableRow<T>{
+  constructor(
+    public item: T,
+    public id: number | undefined,
+    public lstColumns: DefaultTableColumn[],
+    public acoesClass: string = '',
+    public acoesStyle: string = '',
+  ){}
+} 
+
+class DefaultTableColumn{
+  public label: string | null
+  public loading: boolean = false;
+  public class: string = '';
+  public style: string = '';
+  constructor(
+    public value: any = null,
+    public tf: TableField,
+  ){}
+}
+
+class AvailableTableField{
+  constructor(
+    public tf: TableField,
+    public ascending: boolean,
+    public descending: boolean,
+  ){}
+}

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

@@ -0,0 +1,69 @@
+<div #anchor class="h-5 aspect-square flex items-center justify-center cursor-pointer">
+  <ion-icon name="filter-circle" (click)="popover.present($event)" class="text-xl align-sub size-full" [color]="isFilterActive ? 'secondary' : 'medium' "></ion-icon>
+</div>
+
+<ion-popover class="th-filter" fill="solid" #popover triggerAction="click" (onWillDismiss)="WillDismiss()">
+  <ng-template>
+    <div class="w-72 flex flex-col gap-2 p-2" >
+      @if(!['Select', 'Bool', 'String', 'TextArea', 'Cpf', 'Cnpj', 'CpfCnpj', 'Cep'].includes(field.type)){
+        <ion-label class="w-full flex items-center justify-center">  Filtro - {{field.header}} </ion-label>
+      }
+      @switch (field.type) {
+        @case ('String') {
+          <input-string [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}" (blur)="Change()"></input-string>
+        }
+        @case ('Number') {
+          <div class="grid grid-cols-1 gap-2">
+            <input-number (change)="Change()" [(ngModel)]="modelMinimum" label="Valor Mínimo" [configuration]="field.configuration"></input-number>
+            <input-number (change)="Change()" [(ngModel)]="modelMaximum" label="Valor Maximo" [configuration]="field.configuration"></input-number>
+          </div>
+        }
+        @case ('Decimal') {
+          <div class="grid grid-cols-1 gap-2">
+            <input-decimal (change)="Change()" [(ngModel)]="modelMinimum" label="Valor Mínimo" [configuration]="field.configuration"></input-decimal>
+            <input-decimal (change)="Change()" [(ngModel)]="modelMaximum" label="Valor Maximo" [configuration]="field.configuration"></input-decimal>
+          </div>
+        }
+        @case ('Currency') {
+          <div class="grid grid-cols-1 gap-2">
+            <input-currency (change)="Change()" [(ngModel)]="modelMinimum" label="Valor Mínimo" [configuration]="field.configuration"></input-currency>
+            <input-currency (change)="Change()" [(ngModel)]="modelMaximum" label="Valor Maximo" [configuration]="field.configuration"></input-currency>
+          </div>
+        }
+        @case ('Select') {
+          <input-select (change)="Change()" [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}" [configuration]="configuration"></input-select>
+        }
+        @case ('TextArea') {
+          <input-string (change)="Change()" [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}"></input-string>
+        }
+        @case ('Bool') {
+          <input-select (change)="Change()" [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}" placeholder="" [configuration]="configuration"></input-select>
+        }
+        @case ('Date') {
+          <div class="size-full grid grid-cols-1 gap-2">
+            <input-date (change)="Change()" [(ngModel)]="modelMinimum" label="Data Mínima" [configuration]="configuration"></input-date>
+            <input-date (change)="Change()" [(ngModel)]="modelMaximum" label="Data Maxima" [configuration]="configuration"></input-date>
+          </div>
+        }
+        @case ('DateTime') {
+          <div class="grid grid-cols-1 gap-2">
+            <input-date-time (change)="Change()" [(ngModel)]="modelMinimum" label="Data Mínima" [configuration]="configuration"></input-date-time>
+            <input-date-time (change)="Change()" [(ngModel)]="modelMaximum" label="Data Maxima" [configuration]="configuration"></input-date-time>
+          </div>
+        }
+        @case("Cep") {
+          <input-cep (change)="Change()" [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}"></input-cep>
+        }
+        @case ('Cpf') {
+          <input-cpf (change)="Change()" [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}"></input-cpf>
+        }
+        @case ('Cnpj') {
+          <input-cnpj (change)="Change()" [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}"></input-cnpj>
+        }
+        @case ('CpfCnpj') {
+          <input-cpf-cnpj (change)="Change()" [(ngModel)]="model" class="th-select" label="Filtro - {{field.header}}"></input-cpf-cnpj>
+        }
+      }
+    </div>
+  </ng-template>
+</ion-popover>

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

@@ -0,0 +1,205 @@
+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';
+import { ComparisonValueType } from '../../../../classes/comparison/comparison-value-type';
+
+
+@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.field.type == InputType.Date) {
+      if (this.modelMinimum) {
+        this.modelMinimum = this.modelMinimum.split("T")[0] + "T00:00:00";
+      }
+      if (this.modelMaximum) {
+        this.modelMaximum = this.modelMaximum.split("T")[0] + "T23:59:59";
+      }
+    }
+
+    const valueType = (this.field.type == InputType.DateTime)
+        ? ComparisonValueType.DateTime
+        : ComparisonValueType.Date;
+
+    let ComparisonList: Comparison[] = [];
+
+    if (this.modelMinimum) {
+      let c = new DateProperty(this.field.index)
+                  .GreaterThanOrEqual(this.modelMinimum);
+
+      c.valueType = valueType;  
+      ComparisonList = [c];
+    }
+
+    if (this.modelMaximum) {
+      let c = new DateProperty(this.field.index)
+                  .LessThanOrEqual(this.modelMaximum);
+
+      c.valueType = valueType;  
+      if (ComparisonList.length) {
+        ComparisonList.push(c);
+      } else {
+        ComparisonList = [c];
+      }
+    }
+
+    this.field.filter = ComparisonList;
+    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>