@masterkeymaterial/ui 0.0.1 → 0.0.2

package/src/fields/Formulario/Formulario.ts

@@ -0,0 +1,1056 @@
+import { computed, signal, Type, WritableSignal } from "@angular/core";
+import { IKV, IKV_ext, ITipoBotao, ITiposTema } from '../../interfaces/interfaces';
+import { LibUtil, LOG } from "../../util/util";
+
+export class Formulario {
+
+  campos = signal<IFields<any>>({});
+  listaCampos = computed<IFieldComponent<any>[]>(() => Object.values(this.campos()));
+  listaErrors = computed<string[]>(() => {
+    let errors: string[] = [];
+    for (const key of Object.keys(this.campos())) {
+      const campoErros = this.campos()?.[key]?.errors;
+      if (campoErros && campoErros.length > 0) {
+        errors = [...errors, ...campoErros.map(e => `${String(key)}: ${e}`)];
+      }
+    }
+    return errors;
+  });
+  values = signal<any>({});
+  registredFields = signal<{ [key in keyof IFields<any>]: any }>({});
+
+  showTouched = signal<boolean>(false);
+  isEnviado: boolean = false;
+  isEnviando: boolean = false;
+  instance: any = null;
+
+  valido = computed(() => {
+    for (const key of Object.keys(this.campos())) {
+      const campo = this.campos()[key];
+      const errors = campo.errors;
+      if (errors && errors.length > 0) {
+        return false;
+      }
+    }
+    return true;
+  });
+  algumTocado = computed(() => {
+    return this.listaCampos().some(campo => campo.touched);
+  });
+
+  constructor(campos: IFields<any>, startValues: any = {}, instance: any = null) {
+    this.instance = instance;
+    let values: any = this._startValues(campos, startValues);
+    let camposStarted: IFields<any> = {};
+    for (const key of Object.keys(campos)) {
+      camposStarted[key] = {
+        ...campos[key],
+        touched: false,
+        invalid: false,
+        errors: [], // [Valide.msg.naoValidado]
+        ...LibUtil.formConfigs,
+      };
+    }
+    this.campos.set(camposStarted);
+    this.values.set(values);
+    this.obterOpcoes();
+    return this;
+  }
+
+  updateValues(newValues: any) {
+    if (LibUtil.classof(newValues) !== 'object') {
+      LOG(1, "❌ Formulario.updateValues deve receber um objeto.");
+    }
+    this.values.update(v => {
+      return { ...v, ...newValues }
+    });
+  }
+
+  removeValue(prop: keyof IFields<any>) {
+    this.values.update(v => {
+      if (v.hasOwnProperty(prop)) {
+        delete v[prop];
+      } else {
+        LOG(1, `❌ Formulario.removeValue: Propriedade '${String(prop)}' não existe nos valores.`);
+      }
+      return { ...v };
+    });
+  }
+
+  updateCampo(prop: keyof IFields<any>, newCampoData: Partial<IFieldComponent<any>>) {
+    if (newCampoData.hasOwnProperty('errors')) {
+      newCampoData.invalid = (newCampoData.errors && newCampoData.errors.length > 0);
+    }
+    this.campos.update(c => {
+      if (c[prop]) {
+        c[prop] = { ...c[prop], ...newCampoData };
+      } else {
+        LOG(1, `❌ Formulario.updateCampo: Campo '${String(prop)}' não existe.`);
+      }
+      return { ...c };
+    });
+  }
+
+  setAllCamposPartial(newCampoData: Partial<IFieldComponent<any>>) {
+    if (newCampoData.hasOwnProperty('errors')) {
+      newCampoData.invalid = (newCampoData.errors && newCampoData.errors.length > 0);
+    }
+    this.campos.update(c => {
+      for (const key of Object.keys(c)) {
+        c[key] = { ...c[key], ...newCampoData };
+      }
+      return { ...c };
+    });
+  }
+
+  setAllValuesTo(value: any) {
+    this.values.update(v => {
+      for (const key of Object.keys(v)) {
+        v[key] = value;
+      }
+      return { ...v };
+    });
+  }
+
+  resetToStartValues() {
+    const campos = this.campos();
+    const startValues = this._startValues(campos);
+    this.values.set(startValues);
+  }
+
+  private _startValues(campos: IFields<any>, startValues: any = {}) {
+    let values: any = {};
+    for (const key of Object.keys(campos)) {
+      values[key] = campos[key].value ?? '';
+    }
+    values = { ...values, ...startValues };
+    return values;
+  }
+
+  setDisabledAll(disabled: boolean) {
+    this.setAllCamposPartial({ disabled });
+  }
+
+  setTouchedAll(touched: boolean) {
+    this.setAllCamposPartial({ touched });
+  }
+
+  async validar(): Promise<any> {
+    let camposComErros: string[] = [];
+    let camposPendentes: string[] = [];
+
+    // Executa validações diretamente nos campos registrados
+    for (const key of Object.keys(this.registredFields())) {
+      const campoComponent = this.registredFields()[key];
+      if (campoComponent && typeof campoComponent.executarValidacoes === 'function') {
+        try {
+          await campoComponent.executarValidacoes();
+        } catch (error) {
+          LOG(1, `❌ Erro ao validar o campo '${key}':`, error);
+        }
+      }
+    }
+
+    // Verifica cada campo para erros e pendências
+    for (const key of Object.keys(this.campos())) {
+      const campo = this.campos()[key];
+      if (campo.errors && campo.errors.length > 0) {
+        LOG(1, `❌ Erro de validação no campo '${key}':`, campo.errors);
+        camposComErros.push(key);
+      }
+      if (campo.pending) {
+        LOG(1, `⏳ Campo '${key}' ainda está pendente.`);
+        camposPendentes.push(key);
+      }
+    }
+
+    // Se houver campos pendentes ou com erros rejeita a validação
+    if (camposPendentes.length > 0) {
+      return Promise.reject(`${camposPendentes.length} Campos pendentes: ${camposPendentes.join(', ')}`);
+    }
+    if (camposComErros.length > 0) {
+      return Promise.reject(`${camposComErros.length} Campos com erros (inválidos): ${camposComErros.join(', ')}`);
+    }
+    return this.values();
+  }
+
+  private async obterOpcoes() {
+    let campos = this.campos();
+    for (const key of Object.keys(campos)) {
+      let campo = campos[key];
+      // Ignora campos que não são de seleção
+      if ([IField.AutoComplete, IField.Select].indexOf(campo.tipo) === -1) continue;
+      this.updateCampo(campo.prop, { pending: false });
+
+      // Inicializa o signal de opções se não existir
+      if (campo.options === undefined) campo.options = signal<IKV[]>([]);
+
+      // Opções atuais
+      const opcoesAtuais = campo.options?.();
+
+      // Se já houver opções E não estiverem vazias, não executa o refill neste momento
+      if (opcoesAtuais && opcoesAtuais.length > 0) continue;
+
+      // Um refill inicial será executado se definido
+      if (campo.refill) {
+        LOG(4, `🔄 Refill em '${key}'. Opções iniciais:`, opcoesAtuais);
+        this.updateCampo(campo.prop, { pending: true });
+        let options: IKV[] | null = null;
+        try {
+          options = await campo.refill(this);
+
+          // await LibUtil.wait(1000);
+          if (campo.mapear) {
+            options = await campo.mapear(options);
+          }
+          // let opcoesKV: IKV[] = this.conveterEntidadesParaKV(options, campo.servico.configService.propsDisplay);
+          if (options === null || LibUtil.classof(options) !== 'array') {
+            options = [];
+          }
+
+          // Só atualiza as opções se houver conteúdo, pois já está iniciado o signal.
+          if (options.length > 0) {
+            // campo.options.set(options);
+            this.updateCampo(campo.prop, { options: signal(options) });
+            LOG(3, `🔄 Refill em '${key}'. recebido:`, options);
+          }
+        } catch (error) {
+          LOG(1, `❌ Erro ao obter opções para o campo '${key}':`, error);
+        }
+        this.updateCampo(campo.prop, { pending: false });
+
+        // Se o onMatchOptionOnInit estiver definido, executa o onMatchOption com a opção correspondente ao valor atual do campo.
+        if (campo.onMatchOptionOnInit) {
+          const optionValue = options?.find(opt => opt.k === this.values()[campo.prop]);
+          if (campo.onMatchOption && optionValue) {
+            try {
+              campo.onMatchOption?.(this, optionValue);
+            } catch (err) {
+              LOG(1, `❌ Erro ao executar onMatchOption do campo '${key}'`, err);
+            }
+          }
+        }
+
+        // Ao concluir o refill executa afterRefill, se definido.
+        if (campo.afterRefill) {
+          await campo.afterRefill(this, options);
+        }
+      }
+    }
+  }
+
+  // Remove os valores que não estão nos campos e os tipos campos que não devem ter valor.
+  sanitizar() {
+    const campos = this.campos();
+    const valoresAtuais = this.values();
+    const novosValores: any = {};
+    const tiposSemValor = [IField.Display, IField.Button];
+    for (const key of Object.keys(campos)) {
+      if (key in valoresAtuais && tiposSemValor.indexOf(campos[key].tipo) === -1) {
+        novosValores[key] = valoresAtuais[key];
+      }
+    }
+    this.values.set(novosValores);
+  }
+
+  // Remove os valores que não estão nos campos ou que estão em campos desabilitados.
+  onlyAvailable() {
+    const novosValores: any = {};
+    const valoresAtuais = this.values();
+    const campos = this.campos();
+    for (const campo of Object.values(campos)) {
+      if (campo.prop in valoresAtuais && !campo.disabled) {
+        novosValores[campo.prop] = valoresAtuais[campo.prop];
+      }
+    }
+    this.values.set(novosValores);
+  }
+
+  save() {
+    if (this.instance && typeof this.instance.onSave === 'function') {
+      this.instance.onSave();
+    } else {
+      LOG(1, "❌ Formulario.save: instância não encontrada.");
+    }
+  }
+
+}
+
+
+
+/************************************************\\
+// Modo de uso														        \\
+//*************************************************/
+
+export interface IFields<T> {
+  [key: string]: IFieldComponent<T>;
+}
+
+/************************************************\\
+// Tipos de Campos disponíveis para uso	          \\
+//*************************************************/
+
+export enum IField {
+  AutoComplete = 'autocomplete',
+  Button = 'button',
+  Checkbox = 'checkbox',
+  Color = 'color',
+  Custom = 'custom',								// <== Componentes customizados para uma determinada área.
+  Date = 'date',
+  DateTime = 'datetime',
+  Display = 'display',							// Representa um campo apenas para exibição
+  Editor = 'editor',								// Texto multilinha e com Editor
+  Email = 'email',
+  Hidden = 'hidden',
+  Icon = 'icon',										// Combo de um texto que permite selecionar um icone instalado no sistema.
+  MultiFactor = 'multifactor',			// Combo de 6 campos texto para preenchimento individual por caracter.
+  MultiKV = 'multikv',              // Permite adicionar ou retirar itens em forma KV (Como usado nos seletores e no Importar)
+  MultiText = 'multitext',					// Lista com: Texto em unica linha.
+  Number = 'number',
+  Password = 'password',
+  Referencia = 'referencia',				// Campo que referencia um registro de outra entidade. Utilizado para exibir objetos recebidos de relacionamento.
+  Search = 'search',
+  Select = 'select',
+  Slide = 'slide',
+  Text = 'text',										// Texto em unica linha.
+  Textarea = 'textarea',						// Texto multilinha.
+  Time = 'time',										// Campo de hora (HH:MM)
+  Upload = 'upload', 								// (Padrão 1 Imagem)(Padrao Accept: ".png,.svg,.jpg,.jpeg,.gif")
+
+}
+
+/************************************************\\
+// Propriedades para Campos								        \\
+//*************************************************/
+
+export interface IFieldComponent<T> {
+  tipo: IField,											// [OBRIGATORIO] Tipo do campo.
+  prop: keyof T & string,						// [OBRIGATORIO] nome da propriedade a ser enviada e do controle do formulário.
+  value?: any,											// Valor do campo.
+  titulo?: string,									// nome do campo a ser exibido ao usuário (Display)
+  area?: string,										// Posição gridArea. Doc: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
+  icone?: string,										// Ícone a ser exibido no campo.
+  placeholder?: string,							// Texto exibido que não representam o valor.
+  style?: string,										// Estilos CSS a serem aplicados no campo.
+  classe?: string,									// Classes CSS a serem aplicadas no campo.
+  hideLabel?: boolean,							// Controla se o campo deve ocultar o label (titulo).
+  filter?: boolean,									// Padrão true. Indica se o campo será usado em filtros (em grids, por exemplo).
+  autofocus?: boolean,							// Define se o campo deve receber foco automaticamente ao ser exibido.
+  regras?: IRegra[],								// Regras de validação do campo.	
+  maxl?: number,										// Tamanho máximo do valor.
+  minl?: number,										// Tamanho mínimo do valor.
+  errors?: (string | undefined)[],	// Lista de mensagens de erro para o campo.
+  dica?: string,										// Texto de ajuda para o campo.
+  onInput?: (form: Formulario) => any;// Executada a cada alteração simples no campo.
+  onChange?: (form: Formulario) => any;// Executada ao fim de uma alteração no campo.
+
+  // Indicadores
+  readonly?: boolean,								// Indisponibiliza a edição.
+  need?: boolean,										// Valida se o campo está preenchido.
+  touched?: boolean,								// Indica se o campo foi tocado/editado.
+  disabled?: boolean,								// Indisponibiliza todos os controles.
+  invalid?: boolean,								// Indica se o campo está inválido.
+  empty?: boolean,									// Indica se o campo está vazio.
+  pending?: boolean,								// Indica que o campo está em estado de espera (loading).
+
+  // Configurações específicas por tipo de campo
+  tema?: ITiposTema,								// Tema do botão (para button,  etc).
+  tituloClicavel?: string,					// Título do botão (para button, slide, etc).
+  textoAtivo?: string,							// Texto quando ativo (para slide).
+  textoInativo?: string,						// Texto quando inativo (para slide).
+  tituloChave?: string,						  // Titulo para a chave (para multikv).
+  tituloValor?: string,						  // Titulo para o valor (para multikv).
+  rows?: number,										// Número de linhas (para textarea, select).
+  cols?: number,										// Número de colunas (para textarea).
+  mask?: string | ((valor?: string) => string),	// Máscara a ser aplicada ao valor.
+  options?: WritableSignal<IKV[]>// Opções para campos que possuem seleção (select, radio, etc).
+  multiple?: boolean,								// Permitir múltiplas seleções (para select, upload, etc).
+  canUnselect?: boolean,						// Permitir desselecionar a opção selecionada (para select, radio, etc).
+  componente?: Type<any>;						// Componente Angular personalizado para renderizar este campo. (para custom)
+  tipoBotao?: ITipoBotao;						// Tipo do botão (para button).
+  onClick?: (form: Formulario) => any;// Função chamada quando o campo é clicado (para button, etc).
+  afterRefill?: (form: Formulario, options: IKV[] | null) => any;// Função chamada após o refill do campo (para select, autocomplete, etc).
+  onMatchOption?: (form: Formulario, option?: IKV_ext) => any;	// Função chamada quando uma opção é selecionada (para autocomplete, select, etc).
+  onMatchOptionOnInit?: boolean,		// Indica se deve disparar onMatchOption ao iniciar o componente.
+  onComplete?: (form: Formulario, value: any) => any	// Função chamada quando o campo é completado (para multifactor, etc).
+  showHeader?: boolean,							// Define se o campo deve exibir o cabeçalho (header) com o título e ícone.
+  showToolbar?: boolean,						// Define se o campo deve exibir a toolbar de formatação (para editor).
+  accept?: string,									// Define os tipos de arquivos aceitos (para upload, dropzone, etc). ".png,.svg,.jpg,.jpeg,.gif"
+  refill?: (form: Formulario) => Promise<IKV[] | null>;	// Função que retorna os dados para popular o campo (para select, autocomplete, etc).
+  mapear?: (r: any) => Promise<IKV[] | null>;	// Função que mapeia o valor do campo para o formato esperado na submissão do formulário.
+  subFields?: IFields<any>; 				// Define os sub-campos (para multiobject).
+  isCollapsed?: () => boolean;			// Indica se o campo deve colapsar.
+  getDisplay?: (value: any, form?: Formulario) => any;	// Função para obter o valor a ser exibido no campo, normalmente no campo Referencia.
+  textEmpty?: string;								// Texto a ser exibido quando o campo estiver vazio (para select).
+}
+
+/************************************************\\
+// FASES																	        \\
+//*************************************************/
+
+export interface IFases<T> {
+  fases: IFaseCampos<T>[],
+  isLinear?: boolean,
+  orientation?: 'horizontal' | 'vertical',
+}
+
+export interface IFaseCampos<T> {
+  nome: string,
+  icone?: string | null,
+  completed?: boolean,
+  optional?: boolean,
+  hasErrors?: boolean,
+  errorMessage?: string,
+  campos: (IFaseCamposAgrupados<T> | keyof T & string)[],
+  disabled?: boolean,
+  gridMin?: string,	// Valor padrão para grid-template-columns mínimo das fases. Ex: "150px"
+  gridMax?: string,	// Valor padrão para grid-template-columns máximo das fases. Ex: "1fr"
+}
+
+export interface IFaseCamposAgrupados<T> {
+  campos: (keyof T & string)[],
+  titulo?: string,
+  area?: string,
+  tituloArea?: string,
+}
+
+/************************************************\\
+// CAMPOS SIMPLIFICADOS										        \\
+//*************************************************/
+
+export class CampoDe {
+
+  static AutoComplete<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.AutoComplete,
+      prop,
+      titulo,
+      ...config,
+    };
+  }
+
+  static Button<T>(prop: any, tituloClicavel: string, click: (form: Formulario) => void, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Button,
+      prop,
+      tituloClicavel,
+      onClick: click,
+      ...config,
+    }
+  }
+
+  static Checkbox<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Checkbox,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static Color<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Color,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static Cpf<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Text,
+      prop,
+      titulo,
+      mask: LibUtil.formats.cpf.mask,
+      placeholder: "000.000.000-00",
+      regras: [Regra.CPF()],
+      ...config,
+    }
+  }
+
+  static Cnpj<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Text,
+      prop,
+      titulo,
+      mask: LibUtil.formats.cnpj.mask,
+      placeholder: "00.000.000/0000-00",
+      regras: [Regra.CNPJ()],
+      ...config,
+    }
+  }
+
+  static CpfCnpj<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Text,
+      prop,
+      titulo,
+      mask: LibUtil.formats.cpf_cnpj.mask,
+      placeholder: "000.000.000-00 ou 00.000.000/0000-00",
+      maxl: 18,
+      // regras: [Regra.CPF_CNPJ()],
+      ...config,
+    }
+  }
+
+  static Custom<T>(prop: keyof T & string, componente: Type<any>, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Custom,
+      prop,
+      titulo,
+      componente,
+      ...config,
+    }
+  }
+
+  static Date<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Date,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static DateTime<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.DateTime,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static Display<T>(prop: any, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Display,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static Editor<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Textarea,
+      prop,
+      titulo,
+      area: 'auto / auto / span 2 / auto',
+      ...config,
+    }
+  }
+
+  static Email<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Email,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static Hidden<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Hidden,
+      need: false,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static Icon<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Icon,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static MultiFactor<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.MultiFactor,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static MultiKV<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.MultiKV,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static MultiText<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.MultiText,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static Number<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Number,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static Password<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Password,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static Referencia<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Referencia,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static Search<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Search,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static Select<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Select,
+      prop,
+      titulo,
+      ...config,
+    };
+  }
+
+  static Slide<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Slide,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static Upload<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Upload,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static Text<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Text,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static Textarea<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Textarea,
+      prop,
+      titulo,
+      rows: 15,
+      cols: 30,
+      ...config,
+    }
+  }
+
+  static Time<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Time,
+      prop,
+      titulo,
+      ...config,
+    }
+  }
+
+  static UploadImage<T>(prop: keyof T & string, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<T> {
+    return {
+      tipo: IField.Upload,
+      prop,
+      titulo,
+      accept: ".png,.svg,.jpg,.jpeg,.gif",
+      ...config,
+    }
+  }
+
+}
+
+/************************************************\\
+// FILTROS SIMPLIFICADOS									        \\
+//*************************************************/
+
+export class FiltroDe {
+
+  static Boolean<T>(prop: Extract<keyof T, string>, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<any> {
+    return {
+      ...CampoDe.Select<T>((prop as any), titulo, {
+        options: signal([{ k: "", v: "Todos" }, { k: "true", v: "Sim" }, { k: "false", v: "Não" }])
+      }),
+      ...config,
+    };
+  };
+
+  static Hidden<T>(prop: Extract<keyof T, string>, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<any> {
+    return CampoDe.Hidden<T>((prop as any), titulo, config);
+  };
+
+  /** Usar este FiltroTexto quando não for Hidden, Select ou Booleano */
+  static Text<T>(prop: Extract<keyof T, string>, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<any> {
+    return CampoDe.Text<T>((prop as any), titulo, config);
+  };
+
+  static Select<T>(prop: Extract<keyof T, string>, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<any> {
+    return {
+      ...CampoDe.Select<T>((prop as any), titulo),
+      ...config,
+    };
+  };
+
+  static Date<T>(prop: Extract<keyof T, string>, titulo?: string, config?: Partial<IFieldComponent<T>>): IFieldComponent<any> {
+    return {
+      ...CampoDe.Date<T>((prop as any), titulo),
+      ...config,
+    };
+  };
+
+}
+
+/************************************************\\
+// VALIDAÇÃO de campos										        \\
+//*************************************************/
+
+export enum IRegraTipo {
+  ApenasNumeros = "apenasNumeros",
+}
+
+export interface IRegra {
+  nome: string;
+  mensagem: string;
+  validar: (value: any) => boolean | Promise<boolean>;
+}
+
+export class Regra {
+
+  static ApenasNumeros(): IRegra {
+    return {
+      nome: IRegraTipo.ApenasNumeros,
+      mensagem: Regra.mensagens.apenasNumeros,
+      validar: (value: any): boolean => {
+        let s = value.replace(/(?![0-9])./g, "");
+        return value.length === s.length;
+      }
+    }
+  }
+
+  static ApenasLista(): IRegra {
+    return {
+      nome: "apenasLista",
+      mensagem: Regra.mensagens.apenasLista,
+      validar: (value: any): boolean => {
+        return Array.isArray(value);
+      }
+    }
+  }
+
+  static ApenasListaDeObjetos(): IRegra {
+    return {
+      nome: "apenasListaDeObjetos",
+      mensagem: Regra.mensagens.apenasListaDeObjetos,
+      validar: (value: any): boolean => {
+        if (!Array.isArray(value)) return false;
+        for (let item of value) {
+          if (typeof item !== 'object' || item === null) return false;
+        }
+        return true;
+      }
+    }
+  }
+
+  static EntreValores(min: number, max: number): IRegra {
+    return {
+      nome: "apenasEntre",
+      mensagem: Regra.mensagens.apenasEntre(min, max),
+      validar: (value: any): boolean => {
+        if (typeof value !== 'number') return false;
+        return value >= min && value <= max;
+      }
+    }
+  }
+
+  static TamanhoMinimo(qntCaracteres: number): IRegra {
+    return {
+      nome: "temSizeMin",
+      mensagem: Regra.mensagens.temSizeMin,
+      validar: (value: any): boolean => {
+        if (!value) return false;
+        return value.length >= qntCaracteres;
+      }
+    }
+  }
+
+  static TamanhoMaximo(qntCaracteres: number): IRegra {
+    return {
+      nome: "temSizeMax",
+      mensagem: Regra.mensagens.temSizeMax,
+      validar: (value: any): boolean => {
+        if (!value) return true;
+        return value.length <= qntCaracteres;
+      }
+    }
+  }
+
+  static ApenasLetras(): IRegra {
+    return {
+      nome: "temApenasLetras",
+      mensagem: Regra.mensagens.temApenasLetras,
+      validar: (value: any): boolean => {
+        if (!value) return true;
+        let s = value.replace(/(?![A-Za-z])./g, "");
+        return value.length === s.length;
+      }
+    }
+  }
+
+  static ApenasNumerosELetras(): IRegra {
+    return {
+      nome: "temApenasNumerosELetras",
+      mensagem: Regra.mensagens.temApenasNumerosELetras,
+      validar: (value: any): boolean => {
+        if (!value) return true;
+        let s = value.replace(/(?![0-9A-Za-z])./g, "");
+        return value.length === s.length;
+      }
+    }
+  }
+
+  static TemMaiuscula(): IRegra {
+    return {
+      nome: "temMaiuscula",
+      mensagem: Regra.mensagens.temMaiuscula,
+      validar: (value: any): boolean => {
+        if (!value) return true;
+        return /[A-Z]/.test(value);
+      }
+    }
+  }
+
+  static TemMinuscula(): IRegra {
+    return {
+      nome: "temMinuscula",
+      mensagem: Regra.mensagens.temMinuscula,
+      validar: (value: any): boolean => {
+        if (!value) return true;
+        return /[a-z]/.test(value);
+      }
+    }
+  }
+
+  static TemNumero(): IRegra {
+    return {
+      nome: "temNumero",
+      mensagem: Regra.mensagens.temNumero,
+      validar: (value: any): boolean => {
+        if (!value) return true;
+        return /[0-9]/.test(value);
+      }
+    }
+  }
+
+  static TemEspecial(): IRegra {
+    return {
+      nome: "temEspecial",
+      mensagem: Regra.mensagens.temEspecial,
+      validar: (value: any): boolean => {
+        if (!value) return true;
+        return /(?![0-9a-zA-Z])./.test(value);
+      }
+    }
+  }
+
+  static Email(): IRegra {
+    return {
+      nome: "isEmail",
+      mensagem: Regra.mensagens.isEmail,
+      validar: (value: any): boolean => {
+        if (!value) return true;
+        return LibUtil.formats.email.validate(value);
+      }
+    }
+  }
+
+  static Same(compareValue: any, mensagem?: string): IRegra {
+    return {
+      nome: "isSame",
+      mensagem: mensagem || Regra.mensagens.isSame,
+      validar: (value: any): boolean => {
+        return value === compareValue;
+      }
+    }
+  }
+
+  static SenhaForte(): IRegra {
+    return {
+      nome: "senhaForte",
+      mensagem: Regra.mensagens.senhaForte,
+      validar: (value: any): boolean => {
+        if (!value) return true;
+        const hasNumber = /[0-9]/.test(value);
+        const hasMaiuscula = /[A-Z]/.test(value);
+        const hasMinuscula = /[a-z]/.test(value);
+        const hasEspecial = /(?![0-9a-zA-Z])./.test(value);
+
+        return hasNumber && hasMaiuscula && hasMinuscula && hasEspecial;
+      }
+    }
+  }
+
+  static Unique(asyncValidate: (value: any) => Promise<boolean>): IRegra {
+    return {
+      nome: "isUnique",
+      mensagem: Regra.mensagens.isUnique,
+      validar: async (value: any): Promise<boolean> => {
+        return await asyncValidate(value);
+      }
+    }
+  }
+
+  static CepBR(): IRegra {
+    return {
+      nome: "isCepBR",
+      mensagem: Regra.mensagens.isCepBR,
+      validar: (value: any): boolean => {
+        if (!value) return true;
+        return /^([0-9]{2}[\.]?[0-9]{3}[-]?[0-9]{3})$/.test(value);
+      }
+    }
+  }
+
+  static CPF(): IRegra {
+    return {
+      nome: "isCPF",
+      mensagem: Regra.mensagens.isCPF,
+      validar: (value: any): boolean => {
+        if (!value) return true;
+        let c = 0;
+        let m1 = [10, 9, 8, 7, 6, 5, 4, 3, 2];
+        let m2 = [11, 10, 9, 8, 7, 6, 5, 4, 3, 2];
+        let cpf = LibUtil.apenasNumeros(value);
+        if (cpf.length != 11) { return false; }
+        let temp = cpf.slice(0, 9);
+        for (let i = 0; i < 9; i++) { c += Number(temp.charAt(i)) * m1[i]; }
+        let r = c % 11;
+        (r < 2) ? r = 0 : r = 11 - r;
+        temp += r.toString();
+        c = 0;
+        for (let i = 0; i < 10; i++) { c += Number(temp.charAt(i)) * m2[i]; }
+        r = c % 11;
+        (r < 2) ? r = 0 : r = 11 - r;
+        return cpf.charAt(10) == r.toString();
+      }
+    }
+  }
+
+  static CNPJ(): IRegra {
+    return {
+      nome: "isCNPJ",
+      mensagem: Regra.mensagens.isCNPJ,
+      validar: (value: any): boolean => {
+        if (!value) return true;
+        let digitCnpj = (cnpj: string) => {
+          let m1 = [5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2];
+          let m2 = [6, 5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2];
+          if (!cnpj) { return false; }
+          cnpj = LibUtil.apenasNumeros(cnpj);
+          if (cnpj.length != 14) { return false; }
+          let temp = cnpj.slice(0, 12);
+          let c = 0;
+          for (let i = 0; i < 12; i++) { c += Number(temp.charAt(i)) * m1[i]; }
+          let r = (c % 11);
+          (r < 2) ? r = 0 : r = 11 - r;
+          temp += r.toString();
+          c = 0;
+          for (let i = 0; i < 13; i++) { c += Number(temp.charAt(i)) * m2[i]; }
+          r = (c % 11);
+          (r < 2) ? r = 0 : r = 11 - r;
+          return cnpj.charAt(13) == r.toString();
+        }
+        return digitCnpj(value);
+      }
+    }
+  }
+
+  static ClickRequired(): IRegra {
+    return {
+      nome: "clickRequired",
+      mensagem: Regra.mensagens.clickRequired,
+      validar: (value: any): boolean => {
+        return value === true;
+      }
+    }
+  }
+
+  static Obrigatorio(): IRegra {
+    return {
+      nome: "obrigatorio",
+      mensagem: Regra.mensagens.obrigatorio,
+      validar: (value: any): boolean => {
+        if (value === null || value === undefined) return false;
+        if (typeof value === 'string' && value.trim() === '') return false;
+        if (Array.isArray(value) && value.length === 0) return false;
+        return true;
+      }
+    }
+  }
+
+  static mensagens = {
+    obrigatorio: "Campo Obrigatório.",
+    apenasNumeros: "Apenas Números.",
+    apenasLista: "O valor deve ser uma lista.",
+    apenasListaDeObjetos: "O valor deve ser uma lista de objetos.",
+    apenasEntre: (min: number, max: number) => `O valor deve estar entre ${min} e ${max}.`,
+    temSizeMin: "Tamanho Mínimo.",
+    temSizeMax: "Tamanho Excedido.",
+    temApenasNumeros: "Apenas Números.",
+    temApenasLetras: "Apenas Letras.",
+    temApenasNumerosELetras: "Apenas Números e Letras.",
+    temMaiuscula: "Faltou maiúscula.",
+    temMinuscula: "Faltou minúscula.",
+    temNumero: "Faltou numero.",
+    temEspecial: "Faltou caracter Especial.",
+    isEmail: "Email inválido.",
+    isSame: "Valores diferentes.",
+    senhaForte: "Senha Fraca.",
+    isUnique: "Já está em uso.",
+    isCepBR: "CEP inválido no Brasil.",
+    isCPF: "CPF inválido.",
+    isCNPJ: "CNPJ inválido.",
+    clickRequired: "Clique Necessário.",
+  }
+
+
+}