NgxSmzUi

This project was generated using Angular CLI version 19.2.0.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the library, run:

ng build ngx-smz-ui

This command will compile your project, and the build artifacts will be placed in the dist/ directory.

PDF export setup

SmzDocumentBuilder and smz-document-viewer use html2pdf.js and jspdf as peer dependencies. Install them in the host application:

npm install html2pdf.js@^0.14.0 jspdf@^4.2.0

Do not add html2pdf.bundle.js to angular.json → scripts. The library imports html2pdf.js as an ES/CJS module; the Angular bundler resolves html2canvas, jspdf, and dompurify from node_modules.

If the build warns about CommonJS dependencies, add them to allowedCommonJsDependencies in angular.json:

[
  "html2pdf.js",
  "html2canvas",
  "jspdf",
  "dompurify",
  "canvg",
  "raf",
  "core-js",
  "rgbcolor"
]

See the demos app route /document for working examples of the html2pdf renderer.

Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the dist directory:

   cd dist/ngx-smz-ui

2. Run the npm publish command to publish your library to the npm registry:

   npm publish

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

ng test

Running end-to-end tests

For end-to-end (e2e) testing, run:

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

smz-form-group: eventos de alteração e statusChanges

O seletor smz-form-group expõe três saídas (@Output) que parecem relacionadas, mas respondem a gatilhos e comparações diferentes. Todas emitem SmzFormsResponse (o mesmo retorno de getData()), com data, isValid, hasUnsavedChanges, validationMessagesByField, etc.

statusChanges

• O que é: um EventEmitter do componente — não é o statusChanges do FormGroup do Angular exposto diretamente no template.
• Quando dispara: após o FormGroup notificar mudança de status, com debounce (config.behaviors.debounceTime, padrão 400 ms). Nesse ciclo o componente roda validação customizada (customValidator), customBehavior, visibilidade e avisos, e em seguida emite o payload atual.
• Também no carregamento: na primeira carga, em geral emite uma vez com os dados iniciais, exceto se config.behaviors.skipEmitChangesOnLoad estiver ativo ou se runCustomFunctionsOnLoad alterar esse fluxo.
• Uso típico: reagir a cada ciclo de revalidação/reprocessamento do formulário (ex.: sincronizar UI com erros globais ou com o resultado de customBehavior).

initialStateChanged

• O que significa: o snapshot atual dos dados (serializado) é diferente do estado inicial guardado quando o formulário realizou resetState() (por exemplo logo após a montagem ou após você restaurar a linha base com APIs do componente).
• hasUnsavedChanges: no SmzFormsResponse emitido/atualizado, esse flag está alinhado a “mudou em relação ao estado inicial”.
• Uso típico: habilitar “Salvar” apenas quando há alterações em relação ao registro/modelo original, ou alertar que há rascunho não persistido desde a última baseline.

previousStateChanged

• O que significa: o snapshot atual dos dados é diferente do estado no ciclo anterior de updateHasChanges() (internamente compara com o último valor conhecido antes de atualizar essa cópia).
• Contraste com initialStateChanged: não olha apenas para o “primeiro estado após load”, e sim para “mudou desde a última vez que o componente avaliou mudanças” — granularidade passo a passo a cada ciclo que chama updateHasChanges.
• Uso típico: lógicas que precisam detectar variações incrementais entre emissões consecutivas (por exemplo atualizar apenas um campo derivado quando algo mudou desde o último processamento).

Emitir todas as saídas no primeiro load

Com config.behaviors.emitAllOutputsOnLoad === true, no carregamento o componente pode emitir initialStateChanged, previousStateChanged e statusChanges com o mesmo getData(), para inicializar fluxos que dependem desses handlers sem esperar o primeiro debounce interativo.

Resumo rápido

| Evento | Comparado com | Gatilho principal | |-------------------------|-----------------------------------------------------|----------------------------------------------------------------| | statusChanges | (não é comparação de snapshot) | Ciclo pós mudança de status do formulário (+ debounce) + carga inicial conforme comportamentos | | initialStateChanged | Baseline da última resetState() / estado inicial | Mudança do payload atual em relação a esse baseline | | previousStateChanged | Snapshot do ciclo anterior de updateHasChanges | Mudança desde o último processamento de “has changes” |

Para detalhes de implementação (ordem das chamadas, emitChanges, runStatusChangesOnConfigUpdate, etc.), consulte form-group.component.ts e form-viewdata.ts.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.