# UNIComponentsLibrary

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.0.

## Code scaffolding

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

```bash
ng generate component component-name
```

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

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build UNI-components-library
```

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:
   ```bash
   cd dist/uni-components-library
   ```

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

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

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

```bash
ng e2e
```

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

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.




## Usage

### 1. Import the Module

In your Angular components import modules like this:

\`\`\`ts
import { UniversalAlert } from 'uni-components-library';

@Component({
  selector: 'app-root',
  imports: [
    UniversalAlert,
    // ...
  ],
  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 "uni-components-library/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.

---