<sub><sup>Internal / Documentation / Readme</sup></sub>

# nx-components

This library contains the new component library. It's buildable and publishable. Buildable means that when used within
the monorepo the build process will be faster since compiled components can be cached and incrementally built. Publishable
means that the library can be packaged and published to npm or artifactory for use with either other internal projects
or be made available for partners.

## Public API

All components should be exported from `src/index.ts` in the root of the library. This is the public API for the library;
components shouldn't be imported directly from `src/libs/*` or else they won't be pre-compiled.

## Usage

To use the component library within the monorepo import from the `nx-components` path like this
`import { NxExampleComponent } from 'nx-components'`.

To use the component library from the published package from outside the monorepo import from the `@networkoptix/nx-components`
namespace like this `import { NxExampleComponent } from '@networkoptix/nx-components'`.

TODO:
- [ ] Need to add usage instructions and some examples for web component versions.

## Conventions

- All components should be prefixed with `nx`.
- **Future** - All web components should be prefixed with `nxwc` to prevent conflicts with the Angular components.
- All components should be exported from `src/index.ts`.
- Components should be compatible with zoneless change detection so should use OnPush change detection strategy and
use reactive primitives such as signals and observables for properties that can change.
- Documentation is automatically generated by compodoc so all components should have jsdoc comments for the component
itself and for the public api for the component such as inputs and outputs.
- All components should have at least base stories.
- Components shouldn't rely on any global styling.

TODO:

- [] Need to find the correct way to handle theming for all components on a page. Most likely with a service that is
`{ providedIn: 'platform' }`.
- [] Need to create a base component class that injects the service that provides theming and maybe a config partial that
gets passed into the `@Component` config for common properties like `changeDetection` and `encapsulation`.

## Styling Reset
New components will have lint rules to escape element global styling and prevent
use of global styling classes in templates

[] We should remove all ViewEncapsulation.None from components within the apps.

## Running tasks

Run `nx run nx-components:storybook` to run storybook.

Run `nx run nx-components:test` to execute the unit tests.

Run `nx run nx-components:lint` to execute linting.

Run `nx run nx-components:build` to build angular component library.

TODO:
- [] Create separate build script for building web components.
- [] Need to update readme with [CLOUD-15448](https://networkoptix.atlassian.net/browse/CLOUD-15448)
