@agility-luhn/ui-angular

Componentes Angular do LUHN dirigidos pelo metadata retornado pelo endpoint GET {entity}/$describe.

Uso

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideLuhnUi } from '@agility-luhn/ui-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideLuhnUi({ baseUrl: '/api' })
  ]
};

<luhn-data-form
  entity="comercial/cliente"
  [id]="clienteId"
  (save)="onSave($event)"
  (cancelled)="voltar()" />

Componentes

• luhn-data-form — monta dinamicamente um FormGroup a partir do $describe e faz GET/POST/PUT/PATCH no endpoint correto da entidade. Renderiza inputs PrimeNG por tipo e respeita metadados de UI declarados no DSL.

Widgets suportados

O componente luhn-data-form interpreta o campo widget do describe (que pode ser forçado no DSL via annotation @widget).

| Widget | Componente PrimeNG | |--------|--------------------| | text / textarea | <textarea pTextarea> | | string | <input pInputText> | | password | <p-password> | | email | <input type="email"> | | url | <input type="url"> | | image | <input type="text"> (URL da imagem) | | integer | <p-inputNumber> sem casas decimais | | decimal | <p-inputNumber mode="decimal"> | | money | <p-inputNumber mode="currency" currency="BRL"> | | boolean / switch | <p-toggleswitch> | | date | <p-datepicker> | | datetime | <p-datepicker showTime> | | time | <p-datepicker timeOnly> | | enum / select | <p-select> ou <p-selectbutton> (≤3 opções) | | reference / lookup | <p-select> com busca OData | | json | <textarea> |

Metadados respeitados

O formulário lê e aplica os seguintes metadados do $describe:

• required — asterisco e Validators.required.
• readOnly — controle desabilitado.
• hidden — campo não renderizado.
• size — maxlength para textos.
• placeholder — placeholder do input.
• icon — ícone ao lado do label.
• help / summary — tooltip de ajuda.
• min / max — validadores de range para numéricos.
• step — step do <p-inputNumber>.
• fractionDigits — casas decimais para decimal.
• mask — máscara Delphi aplicada em tempo real.
• visibleWhen — expressão condicional de visibilidade.
• calculated — valor computado a partir de expressão.

Configuração de UI por entidade

O DSL permite declarar blocos ui para business:

ui cliente
  form
    layout vertical
    group cadastro "Cadastro"
      style card
      columns 2
      fields nome, fantasia, tipoPessoa
  grid
    defaultPageSize 25
    defaultColumns nome, fantasia, tipoPessoa

Layouts suportados:

• auto — grid responsivo (padrão).
• vertical — um campo por linha.
• inline — repassado ao describe; interpretação futura.

Annotations de campo

Exemplos de annotations reconhecidas pelo compilador e consumidas pelo form:

business cliente "Cliente"
  @widget "password"
  @placeholder "Digite a senha"
  @help "Senha com no mínimo 8 caracteres"
  senha: string 100 "Senha"

  @hidden
  tokenInterno: string 255

  @readOnly
  @widget "textarea"
  observacoes: text "Observações"

  @min 0
  @max 100
  score: number "Score"