UNIComponentsLibrary

This project was generated using Angular CLI version 19.1.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 numo-ui-web

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

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/numo-ui-web

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.

Component Library Overview

This library contains reusable Angular components for forms, tables, layouts, widgets, and more. Each component is documented and previewable in Storybook. Below you will find a list of components currently included in the library, along with an indication of which are exported for use in external projects (as defined in public-api.ts).

📦 Eksportētās komponentes (Public API)

Šīs komponentes tiek eksportētas no bibliotēkas un ir pieejamas ārējai lietošanai:

| Komponente | Eksportēta (public-api.ts) | Storybook Stāsts | | ------------------ | :--------------------------: | :--------------: | | Forms | | | | Input | [c] | [c] | | Button | [c] | [c] | | Checkbox | [c] | [c] | | Checkbox Group | [c] | [c] | | Color Picker | [c] | [c] | | Dynamic Form | [c] | [c] | | File Upload | [c] | [c] | | Input Group | [c] | [c] | | Radio Button | [c] | [c] | | Radio Button Group | [c] | [c] | | Range Slider | [c] | [c] | | Select | [c] | [c] | | Select Button | [c] | [c] | | Textarea | [c] | [c] | | Time Picker | [c] | [c] | | Toggle Switch | [c] | [c] | | Tree Select | [c] | [c] | | Layouts | | | | Home | | [c] | | Time Planning | | [c] | | Tables | | | | Advanced Table | | [c] | | Dynamic Table | [c] | [c] | | Simple Table | | [c] | | Table (Widget) | [c] | [c] | | Widgets | | | | Info Card | [c] | [c] | | List | [c] | [c] | | Shortcut | [c] | [c] |

Additional Resources

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

Usage

1. Import the Module

In your Angular components import modules like this:

```ts import { NumoAlert } from 'numo-ui-web';

@Component({ selector: 'app-root', imports: [ NumoAlert, // ... ], templateUrl: './app.component.html', styleUrl: './app.component.scss' })

```

2. Include the SCSS Overrides (Optional)

If you want to apply the library’s SCSS overrides (for theming or variable redefinitions), you need to import them after any other theme or global styles. Typically, you do this in your global `styles.scss` (or `styles.css` if you’re not using SCSS):

```scss // Example for an Angular CLI project

// Import PrimeNG (or any other base theme) first @import '~@primeng/themes/aura/theme.css';

@use "primeicons/primeicons.css"; @use "material-symbols"; @use "tailwindcss";

// Then import your own global styles (optional) @use 'src/styles/global.scss';

// Finally, import the Uni Components Library SCSS overrides last @use "numo-ui-web/src/lib/theme/styles";

/_ You can add global styles to this file, and also import other style files _/ @tailwind base; @tailwind components; @tailwind utilities;

//Customaze here any other ovveride if needed. .css-xzp052 { padding: 30px 20px; } ```

Why last?
CSS variables follow the cascade rule: the last definition wins. By placing the library’s SCSS overrides last, you ensure that your custom or extended variables take precedence over the default ones.

3. Build and Run

Now your Angular app should recognize the Uni Components Library components and apply the overrides. Run:

```bash ng serve ```

Additional Notes

• If you’re using a different build setup (e.g., Storybook, custom Webpack, or Nx monorepo), the same principle applies: import the library’s SCSS after the main theme so it overrides the default variables.
• Check your Angular version to ensure compatibility with the library.
• Inspect dev tools if your overrides aren’t applying; verify the order of stylesheet imports in the final build.