@sapphire-ion/framework 0.30.27 → 0.30.28

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

@@ -0,0 +1,121 @@
+
+import { Component, effect, ElementRef, Input, model, ModelSignal, OnInit } 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/generics.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[]>([]); 
+  
+  /** 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;
+    }
+  }
+
+  async Refresh(event?: RefresherCustomEvent): Promise<void> {
+    this.loading = true;
+    try{
+      await this.Load();
+    }
+    finally{ }
+
+    if(event){ event.target.complete(); }
+    this.loading = false;
+  }
+  
+  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;
+  }
+}

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

@@ -0,0 +1,52 @@
+<div id="pagination" class="flex items-center rounded-b-2xl px-4 py-2 portrait:flex-col">
+  <div class="w-full h-full items-center justify-start flex portrait:justify-center">
+    <ion-spinner [hidden]="!(loading && lstPages.length == 0)"></ion-spinner>
+    <ion-text [hidden]="loading && lstPages.length == 0">
+      <div class="flex">
+        Mostrando &nbsp;
+        <ion-skeleton-text *ngIf="loading" [animated]="true" style="width: 2ch"></ion-skeleton-text>
+        <b *ngIf="!loading">{{limit * page - limit + length}}</b>  &nbsp;
+        de 
+        @if (total != null) {
+          <b>&nbsp; {{total}} &nbsp;</b> items
+        }
+        @else{
+          <b>&nbsp; - &nbsp; </b> items
+        }
+      </div>
+    </ion-text>
+  </div>
+  <div class="w-full h-full items-center justify-end flex portrait:justify-center" *ngIf="total != null">
+    <button class="flex items-center" [disabled]="loading" (click)="PageSub()">
+      <ion-icon [ngClass]="{'opacity-20': page == 1}" name="chevron-back" class="cursor-pointer default transition"></ion-icon>
+    </button>
+
+    <ion-spinner *ngIf="loading && lstPages.length == 0"></ion-spinner>
+
+    <button [disabled]="loading" class="page" *ngFor="let item of lstPages" [ngClass]="{ 'selected' : page == item }" (click)="SetPage(item)"> {{item}} </button>
+
+    <button class="flex items-center" [disabled]="loading" (click)="PageAdd()">
+      <ion-icon [ngClass]="{'opacity-20': page == TotalPages }" name="chevron-forward" class="cursor-pointer default transition"></ion-icon>
+    </button>
+
+    @if (TotalPages > 5) {
+      <button [disabled]="loading" class="page" [id]="pop_id"><ion-icon name="search"></ion-icon></button>
+      <ion-popover [trigger]="pop_id" triggerAction="click">
+        <ng-template>
+          <ion-content>
+            <div class="grid grid-cols-10 pl-3">
+              <div class="col-span-8 pb-2">
+                <ion-input class="number-class" [(ngModel)]="_page" type="Number" labelPlacement="stacked" label="Página [Max. {{TotalPages}}]"></ion-input>
+              </div>
+              <div class="col-span-2">
+                <ion-button [disabled]="loading" class="size-full" size="small" (click)="SetPageManual()" style="--border-radius: 0rem">
+                  <ion-icon class="w-4 aspect-square" slot="icon-only" name="checkmark-circle"></ion-icon>
+                </ion-button>
+              </div>
+            </div>
+          </ion-content>
+        </ng-template>
+      </ion-popover>
+    }
+    </div>
+</div>

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

@@ -0,0 +1,118 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { GenericService } from '../../../services/generics.service';
+import { Utils } from '../../../services/utils.service';
+
+/** Componente de paginação padrão  */
+@Component({
+  selector: 'default-pagination',
+  templateUrl: './default-pagination.component.html',
+  styleUrls: ['./default-pagination.component.scss'],
+})
+export class DefaultPaginationComponent  implements OnInit {
+
+
+  total: number = 0;
+  limit: number | null = 0;
+  /** Valor total de dados */
+  @Input('total') set _total(value: number){  
+    this.total = value;
+    this.TotalPages = this.GetTotalPages();
+    this.lstPages = this.GetlstPages();
+  };
+  /** Limite de páginas */
+  @Input('limit') set _limit(value: number | null){ 
+    this.limit = value;
+    this.TotalPages = this.GetTotalPages();
+    this.lstPages = this.GetlstPages();
+  };
+
+  /** Quantidade de dados em tela */
+  @Input() length: number;
+  @Input() loading: boolean;
+  
+  /** Pagina atual (usando two way data binding) */
+  @Input() page: number;
+  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+  
+  /** Evento emitido na mudança de valores (Pagina) */
+  @Output('change') changeEmitter: EventEmitter<void> = new EventEmitter<void>();
+  
+  constructor(
+    private genericService: GenericService
+  ) { }
+
+  ngOnInit() {}
+  pop_id: string = "popover-id-" + Utils.GenerateGUID();
+
+  GetlstPages(): number[] {
+    if(!this.TotalPages){ return []; }
+    var startIndex: number;
+    var start: number[] = [];
+
+    startIndex = this.page - 1;
+
+    var _: number[] = [];
+    for(let i = this.TotalPages - 4; i <= this.TotalPages ; i++){
+      if(i > 0){
+        _.push(i);
+      }
+    }
+
+    for(let i = startIndex; i <= this.TotalPages && i < startIndex + 5; i++){
+      if(i > 0){
+        start.push(i);
+      }
+    }
+    if(startIndex == 0 && this.TotalPages >= 5){
+      start.push(5);
+    }
+
+    if(start[0] > _[0]){
+      return _;
+    }
+
+    return start;
+  }
+
+  GetTotalPages(): number{
+    return this.limit ? Math.ceil(this.total / this.limit) : Math.ceil(this.total / this.total)
+  }
+
+  lstPages  : number[] = [];
+  TotalPages: number = 0;
+
+  PageAdd(): void{
+    if(this.page + 1 > this.TotalPages){ return; }
+    this.SetPage(this.page + 1);
+  }
+  
+  PageSub(): void{
+    if(this.page - 1 < 1){ return; }
+    this.SetPage(this.page - 1);
+  }
+
+  SetPage(value: number): void{
+    if(value != this.page){
+      this.pageChange.emit(value);
+      this.EmitChange()
+
+      setTimeout(() => {
+        this.TotalPages = this.GetTotalPages();
+        this.lstPages = this.GetlstPages();
+      }, 100);
+    }
+  }
+
+  _page: number;
+  SetPageManual(){
+    if(this._page && this._page > 0 && this._page <= this.TotalPages){
+      this.SetPage(this._page);
+    }else{
+      this.genericService.PresentToast("Página inválida")
+    }
+  }
+
+  EmitChange(): void{
+    this.changeEmitter.emit();
+  }
+}

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

@@ -0,0 +1,105 @@
+<section class="w-full h-full rounded-2xl flex flex-col overflow-y-hidden relative" [ngClass]="{ 'loading' : loading }">
+    
+    <div class="unique-conteiner default-transition" [ngClass]="{'!-z-50 !-translate-y-12 !opacity-0': !loading }">
+        <loading [type]="2"></loading>
+    </div>
+    <div class="unique-conteiner default-transition" [ngClass]="{'!-z-50 !-translate-y-12 !opacity-0': items.length != 0 || loading }">
+        <b><ion-icon class="align-sub" name="remove-circle"></ion-icon> Sem dados</b>
+    </div>
+
+    <div id="wrapper" class="relative overflow-y-auto w-full grow-0 mb-auto pb-2">
+        <table class="z-20">
+            <thead>
+                <tr>
+                    <th scope="col" class="px-3 !h-10" *ngIf="acoesTemplate">
+                        <span>Ações</span>
+                    </th>
+                    @for (field of lstTableFields; let i = $index; track i) {
+                        @if (!field.hidden) {
+                            <th scope="col" class="p-2 px-3" id="th-filter-select">
+                                <div class="flex items-center justify-start h-full" style="white-space: var(--ion-table-filter-wrap);"> 
+                                    @if(!noFilters){
+                                        <th-filter *ngIf="(field.type != InputTypeFile) && !(field.filter && field.disabledChange()) && !noFilters"
+                                        [field]="field"
+                                        (change)="ChangeFilter()"
+                                        ></th-filter>
+                                    }
+                                    <span>{{field.header}}</span>
+
+                                    <a *ngIf="!(!(field.type != InputTypeFile) && !(field.filter && field.disabledChange())) && !noFilters" class="order-switch h-5 flex items-center justify-center px-1 ml-2 shrink-0 cursor-pointer rounded-2xl" (click)="SwitchOrder(field)" [ngClass]="{ 'ordering-asc' : orderByProperty == field.index && ascending, 'ordering-desc' : orderByProperty == field.index && !ascending}">
+                                        <ion-icon id="up"   name="arrow-up"   class="-mt-1"></ion-icon>
+                                        <ion-icon id="down" name="arrow-down" class="-ml-1 -mb-1"></ion-icon>
+                                    </a>
+                                </div>
+                            </th>
+                        }
+                    }
+                </tr>
+            </thead>
+            <tbody>
+                <tr [hidden]="loading" *ngFor="let item of items">
+                    @if(acoesTemplate){
+                        <td class="whitespace-nowrap py-1 px-3" [style]="GetTdStyle('Acoes', item)" >
+                            <ng-container *ngTemplateOutlet="acoesTemplate; context: { $implicit: item }"></ng-container>
+                        </td>
+                    }
+
+                    @for (field of lstTableFields; track $index) {
+                        @if (!field.hidden) {
+                            <td class="px-3 py-2" 
+                                [ngClass]="GetTdClasses(field, item)" 
+                                [style]="GetTdStyle(field, item)" 
+                                (click)="Redirect(field, item)"
+                                style="white-space: var(--ion-table-row-wrap);"
+                            >
+                                @if (field.index == 'ativo') {
+                                    <div class="w-full h-full flex items-center justify-start" [routerLink]="null">
+                                        <ion-toggle [checked]="item[field.index]" [disabled]="loading" (ionChange)="Ativar(item.id)" ></ion-toggle>
+                                    </div>
+                                } @else {
+                                    @switch (field.type) {
+                                        @case ("Bool") {
+                                            @if (field.configuration.type == "toggle") {
+                                                <div class="-full h-full flex items-center justify-start">
+                                                    <ion-toggle [checked]="item[field.index]" [disabled]="true"></ion-toggle>
+                                                </div>
+                                            }
+                                            @else {
+                                                <div class="-full h-full flex items-center justify-start">
+                                                    <ion-checkbox [checked]="item[field.index]" [disabled]="true"></ion-checkbox>
+                                                </div>
+                                            }
+                                        }
+                                        @case ("File") {
+                                            <download-button [(ngModel)]="item[field.index]" [configuration]="field.configuration"></download-button>
+                                        }
+                                        @case ("Select") {
+                                            {{GetSelectLabel(item, field)}}
+                                        }
+                                        @default {
+                                            {{GetField(item, field)}} 
+                                        }
+                                    }
+                                }
+                            </td>
+                        }
+                    }
+                </tr>
+
+                <ng-content select="[slot=item-end]"></ng-content>
+            </tbody>
+        </table>
+    </div>
+    @if(!noPagination){
+        <div class="shrink-0 mt-auto w-full">
+            <default-pagination
+                [page]="page"
+                (pageChange)="EmitPage($event)"
+                [total]="total"
+                [limit]="limit"
+                [length]="items.length"
+                [loading]="loading"
+            ></default-pagination>
+        </div>
+    }
+</section>

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

@@ -0,0 +1,197 @@
+import { Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { formatNumber  } from '@angular/common';
+
+import { Comparison, CompileLstTableField } from '../../../classes/comparison/comparison';
+import { InputDecimalConfiguration } from '../../../components/inputs/input-decimal/input-decimal.configuration';
+import { InputSelectConfiguration } from '../../../components/inputs/input-select/input.select.configuration';
+import { StorageService } from '../../../services/web/storage.service';
+import { HttpService } from '../../../services/web/http.service';
+import { TableField } from '../../../classes/inputs/table-field';
+import { InputType } from '../../inputs/input-type';
+import { Utils } from '../../../services/utils.service';
+
+/** Componente de tabela padrão */
+@Component({
+  selector: 'default-table',
+  templateUrl: './default-table.component.html',
+  styleUrls: ['./default-table.component.scss'],
+})
+export class DefaultTableComponent<T extends HttpService> implements OnInit {
+  
+  /** Service a ser utilizado na listagem */
+  @Input('service') defaultService: T;
+/** Template de ações, deve ser um elemento ```<ng-template>``` */
+  @Input() acoesTemplate: TemplateRef<any>;
+
+  //#region [ Pagination ]
+  /** Valor total de dados */
+  @Input() total: number;
+
+  /** Número de páginas máximo (usando two way data binding) */
+  @Input() limit: number;
+  @Output() limitChange: EventEmitter<number> = new EventEmitter<number>();
+  
+  /** 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>();
+  
+  /** Propriedade de ordenação (usando two way data binding) */
+  @Input() orderByProperty: string | null;
+  @Output() orderByPropertyChange: EventEmitter<string | null> = new EventEmitter<string | null>();
+  
+  /** Propriedade de ordenação
+   * Se = true  Ordenará de menor ao maior 
+   * Se = false Ordenará de maior ao menor (usando two way data binding) */
+  @Input() ascending: boolean;
+  @Output() ascendingChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+  //#endregion [ Pagination ]
+
+  /** Filtros (usando two way data binding) */  
+  @Input('filter') filter: Comparison[] = [];
+  @Output() filterChange: EventEmitter<Comparison[]> = new EventEmitter<Comparison[]>();
+  
+  /** Evento emitido quando um dos dados é ativado. Emite o id do dado */  
+  @Output('ativar') ativarEmitter: EventEmitter<number> = new EventEmitter<number>;
+  @Output('refresh') refreshEmitter: EventEmitter<void> = new EventEmitter<void>();
+  @Input() loading: boolean;
+
+  /** Lista de dados a ser exibidos */
+  @Input() items: any[] = [];
+  
+  /** Lista de campos a ser exibidos */
+  @Input() lstTableFields: TableField[] = [];
+
+  /** Remove os filtros no cabeçalho da tabela  */
+  @Input() noFilters: 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;
+  /** Remove a paginação da listagem */
+  @Input() noPagination: boolean = false;
+  /** Caminho de redirecionamento do item */
+  @Input() itemPath: string | null = "view/:id"
+  InputTypeFile = InputType.File
+
+  constructor(
+    public storageService : StorageService,
+    private activatedRoute: ActivatedRoute,
+    private router        : Router,
+  ) { }
+
+  @Output('ItemClick') ItemClickEventEmitter: EventEmitter<any> = new EventEmitter<any>();
+
+  Redirect(field: TableField, item: any): void{
+    if(field.index == 'ativo'){
+      return;
+    }else
+    if(field.type  == 'File'){
+      return;
+    }else{
+      if(this.itemPath){
+        const id = item.id; 
+        const path = this.itemPath.replace(":id", id.toString());
+        this.router.navigate([`./${path}`], { relativeTo: this.activatedRoute })
+      }
+    }
+    this.ItemClickEventEmitter.emit(item);
+  }
+
+  ngOnInit() {
+    if(this.defaultService && this.lstTableFields.length == 0){
+      this.lstTableFields = this.defaultService.lstTableFields;
+    }
+    if(this.lstTableFields.length == 0){ console.warn("[ Warning! ] [ Table configuration is empty]") }
+
+    this.lstTableFields.filter(tf => tf.configuration instanceof InputSelectConfiguration).forEach(tf => tf.configuration.loader.Refresh());
+  }
+
+  SwitchOrder(field: TableField): void{
+    if(this.orderByProperty != field.index){
+      this.orderByProperty = field.index;
+      this.ascending = true;
+    }
+    else if(this.ascending){
+      this.ascending = false;
+    }
+    else{ this.orderByProperty = null; }
+
+    this.orderByPropertyChange.emit(this.orderByProperty)
+    this.ascendingChange.emit(this.ascending);
+
+    this.EmitChange();
+  }
+
+  EmitPage(value: number): void{
+    this.pageChange.emit(value);
+    this.EmitChange()
+  }
+
+  EmitChange(): void{
+    this.refreshEmitter.emit();
+  }
+
+  GetField(item: any, field : TableField): any{
+    const value = item[field.index];
+    const type = field.type;
+    if(['Number','Decimal','Currency'].includes(type)){
+      const config: InputDecimalConfiguration = (field.configuration as InputDecimalConfiguration)
+      return config.prefix + ' ' + formatNumber(value, "pt-BR", `1.${config.precision}-${config.precision}`) + ' ' + config.sufix;
+    }else
+    if(type == 'DateTime'){
+      if(!value){ return "-"; }
+      return Utils.DateISOToDDMMYYYYHHMM(value);
+    }else
+    if(type == 'Date'){
+      if(!value){ return "-"; }
+      return Utils.DateISOToDDMMYYYY(value);
+    } 
+    return value;
+  }
+
+  GetSelectLabel(item: any, tField: TableField): string{
+    const configuration: InputSelectConfiguration = tField.configuration;
+    if(!configuration.multiple){
+      return configuration.loader.GetLabel(this.GetField(item, tField));
+    }else{
+      const values = this.GetField(item, tField);
+      if(values && values.length > 0){
+        return values.map(v => configuration.loader.GetLabel(v)).join(", ");
+      }else{
+        return "";
+      }
+    }
+  }
+
+  GetTypeOf(val): string{
+    return typeof(val)
+  }
+
+  Ativar(id): void{
+    this.ativarEmitter.emit(id);
+  }
+
+  ChangeFilter(): void{
+    this.filterChange.emit(CompileLstTableField(this.lstTableFields));
+    this.refreshEmitter.emit();
+  }
+
+  GetTdClasses(field, item): string{
+    var classes : string = "";
+    if(['DateTime', 'Time', 'Date'].includes(field.type)){
+      classes += 'font-mono ';
+    }
+    if(this.columnClass){
+      classes += this.columnClass(field.index, item);
+    }
+    return classes;
+  }
+  GetTdStyle(field, item): string{
+    if(this.columnStyle){
+      return this.columnStyle(field, item);
+    }
+    return "";
+  }
+}

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

@@ -0,0 +1,61 @@
+<div class="h-5 aspect-square mr-1 flex items-center justify-center cursor-pointer">
+  <ion-icon id="{{guid}}-trigger" name="filter-circle" class="text-xl align-sub size-full" [color]="isFilterActive ? 'secondary' : 'medium' "></ion-icon>
+</div>
+
+<ion-popover [keepContentsMounted]="true" class="popover-filter" trigger="{{guid}}-trigger" triggerAction="click">
+  <ng-template>
+    <ion-card class="m-0 !border-0 bg-primary/30">
+      <ion-card-header class="bg-transparent">
+        <ion-card-title class="text-center text-sm">
+          Filtro - {{field.header}}
+        </ion-card-title>
+      </ion-card-header>
+      <ion-card-content [ngClass]="{'!p-0': ['Select', 'Bool', 'String', 'TextArea'].includes(field.type)}" class="!p-2 bg-light rounded-t-2xl">
+        @switch (field.type) {
+          @case ('String') {
+            <input-string [(ngModel)]="model" class="th-select" label="" (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="" [configuration]="configuration"></input-select>
+          }
+          @case ('TextArea') {
+            <input-string (change)="Change()" [(ngModel)]="model" class="th-select" label=""></input-string>
+          }
+          @case ('Bool') {
+            <input-select (change)="Change()" [(ngModel)]="model" class="th-select" label="" 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>
+          }
+        }
+      </ion-card-content>
+    </ion-card>
+  </ng-template>
+</ion-popover>