# VerbenNgUi

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.

## Workflow Designer

The visual workflow editor (`<lib-workflow-designer>`) is the largest and most
intricate component in this library, and it has its own documentation set:

📖 **[Workflow Designer docs](./src/lib/components/workflow-designer/docs/README.md)**

- [Integration guide](./src/lib/components/workflow-designer/docs/07-integration.md)
  — installing, peer deps, the required `ENVIRONMENT` provider, styles.
- [API reference](./src/lib/components/workflow-designer/docs/08-api-reference.md)
  — types, component I/O, HTTP endpoints.
- [Development workflow](./src/lib/components/workflow-designer/docs/09-development.md)
  — running, building, testing, and the rules for changing it safely.

Read the integration guide before embedding it; the module requires an
`ENVIRONMENT` provider and a reachable Workflow API, and fails at construction
without them.

## Theming

This library is theme-aware: its component styles read the `verben-ng-ui`
`--vbn-*` CSS custom properties instead of hardcoded colors, so it automatically
follows whatever theme the host application configures. It ships **no** theme
config of its own (no `theme.css`, no `forRoot()`) — that is the host app's job.

**Host requirement:** the consuming application must load
`node_modules/verben-ng-ui/styles/theme.css` (which requires `verben-ng-ui@>=1.3.0`,
matching this library's peer dependency). See that package's `INTEGRATION.md` for
the full multi-layer setup. Colors unique to the workflow designer canvas are
intentionally left as-is (they are functional diagram colors, not brand tokens).

## Code scaffolding

Run `ng generate component component-name --project verben-workflow-ui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project verben-workflow-ui`.

> Note: Don't forget to add `--project verben-workflow-ui` or else it will be added to the default project in your `angular.json` file.

## Build

Run **`npm run build:lib`** from the workspace root. Artifacts land in `dist/`.

> Use the script, not a bare `ng build verben-workflow-ui`. The script runs two
> steps — the Angular build *and* a separate postcss pass (`build:lib:styles`)
> that compiles `src/styles/styles.css` into `dist/`. Skipping the second step
> produces a package that installs and imports cleanly but renders completely
> unstyled.

## Publishing

After `npm run build:lib`, go to `cd dist/verben-workflow-ui` and run
`npm publish`. Verify `dist/verben-workflow-ui/styles/styles.css` exists first —
if it doesn't, the styles step didn't run.

## Running unit tests

Run `ng test verben-workflow-ui` to execute the unit tests via [Karma](https://karma-runner.github.io).

> ⚠️ **The suite does not currently run.** The Karma builder bundles every
> `*.spec.ts` in the workspace, and two broken specs fail the whole bundle. See
> [the development doc](./src/lib/components/workflow-designer/docs/09-development.md#4-testing--read-this-before-trusting-any-result)
> for which specs and why it matters.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.