npm package: @gawtech/angular-components
Description: Componentes Angular desenvolvidos pela GawTech
Latest version: 2.0.6

# GawTech - Angular Components
[![npm version](https://img.shields.io/npm/v/@gawtech/angular-components.svg)](https://www.npmjs.com/package/@gawtech/angular-components)
[![Angular](https://img.shields.io/badge/Angular-19%2B-red)](https://angular.io/)
[![PrimeNG](https://img.shields.io/badge/PrimeNG-19%2B-blue)](https://primeng.org/)
[![npm downloads](https://img.shields.io/npm/dm/@gawtech/angular-components.svg)](https://www.npmjs.com/package/@gawtech/angular-components)
[![License: Proprietary](https://img.shields.io/badge/license-Proprietary-blue.svg)](./lib/LICENSE)

A modern, type-safe collection of Angular components built with **PrimeNG** and **Tailwind CSS**. 
Designed to accelerate enterprise development with production-ready, fully customizable components.

## ✨ **Features:**

- 🎯 **Type-Safe** - Full TypeScript support with strict typing
- 🧩 **Modular Architecture** - Import only what you need
- 🎨 **Theme-Ready** - Native PrimeNG theme integration
- ⚡ **Standalone Components** - Compatible with Angular's latest architecture
- 📱 **Responsive** - Mobile-first design with Tailwind CSS
- ♿ **Accessible** - WCAG compliant components

## ⚙️ System Requirements

| Dependency | Version | Required | Notes |
|------------|---------|----------|-------|
| **Angular** | `^19.2.0` | ✅ | Core framework |
| **Angular Forms** | `^19.2.0` | ✅ | Reactive forms support |
| **Angular Router** | `^19.2.0` | ✅ | For breadcrumb navigation |
| **PrimeNG** | `^19.1.3` | ✅ | UI component library |
| **PrimeNG Themes** | `^19.1.3` | ✅ | Theme system |
| **Tailwind CSS** | `^3.4.0` | ✅ | Utility-first CSS |
| **Tailwindcss-PrimeUI** | `^0.6.1` | ✅ | With [Tailwindcss-primeui](https://primeng.org/tailwind) |
| **RxJS** | `~7.8.0` | ✅ | Reactive programming |
| **TypeScript** | `~5.7.0` | ✅ | Type safety |

## 📦 Quick Start

### Installation

```bash
npm install @gawtech/angular-components
```

### 🛠️ Setup

1. **Install required peer dependencies:**

```bash
# Angular core packages
npm install @angular/core@^19 @angular/common@^19 @angular/forms@^19 @angular/router@^19 @angular/platform-browser@^19 rxjs@~7

# PrimeNG UI components and themes
npm install primeng@^19 @primeng/themes@^19

# Tailwind CSS integration
npm install tailwindcss@^3 tailwindcss-primeui@^0.6
```

2. **Configure your Angular application:**

```typescript
// app.config.ts
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... other providers
    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: Aura
      }
    })
  ]
};
```

3. **Import Tailwind CSS and PrimeNG styles:**
```css
/* styles.scss */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

4. **Create and configure tailwind.config.js:**

If you don’t have a Tailwind configuration yet, create it:

```bash
npx tailwindcss init
```

Then edit tailwind.config.js:
```js
import PrimeUI from 'tailwindcss-primeui';
import { GawtechUI } from '@gawtech/angular-components/tailwind';

export default {
  darkMode: ['selector', '[class*="app-dark"]'],
  content: [
    './index.html',
    './src/**/*.{html,ts}',
    "./node_modules/@gawtech/angular-components/**/*.{js,mjs,html,ts}",
  ],
  plugins: [PrimeUI, GawtechUI],
  theme: {
    extend: {},
    screens: {
      sm: '576px',
      md: '768px',
      lg: '992px',
      xl: '1200px',
      '2xl': '1920px',
    },
  },
};
```
> 💡 **Important:**  
> Including `./node_modules/@gawtech/angular-components/**/*.{js,mjs,html,ts}` in `content` ensures all Tailwind classes used by the components are generated correctly in your build.  
> Without this configuration, styles **may not appear or may break in production**.

### 🎉 **Setup Complete!**

Your Angular application is now fully configured and ready to use **GawTech Angular Components**!

You can now:
- ✅ Import and use any of the available components
- ✅ Customize themes and styling as needed
- ✅ Build production-ready applications

Check out the component documentation below to get started with implementation.

## 🧩 Available Components

| Component             | Description                           | Documentation                                                 |
| --------------------- | ------------------------------------- | ------------------------------------------------------------- |
| Breadcrumb            | Breadcrumb navigation component       | [📄 Breadcrumb README](lib/src/breadcrumb/README.md)         |
| Control Errors        | Standardized validation error display | [📄 Control Errors README](lib/src/control-errors/README.md) |
| Dynamic Form _(Beta)_ | Fully dynamic form generator          | [📄 Dynamic Form README](lib/src/dynamic-form/README.md)     |

## 🗺️ Roadmap

This library is under active development.
New components and features will be added in future releases.

## 📬 Support & Feedback

This library is distributed as a private package via npm.
If you encounter any issues, have feature requests, or would like to provide feedback, please contact us directly:

Email: contato@gawtech.com.br

We value your feedback and aim to continuously improve our component suite.

## 🔑 License

This library is proprietary software developed by **GawTech**.

- ✅ **Free to use** in your Angular projects
- ✅ **Commercial use** permitted
- ❌ **Source code** is not distributed
- ❌ **Redistribution** not permitted

For full terms, see the [LICENSE](./LICENSE) file.

---

**Built with ❤️ by [GawTech](https://github.com/GawTechOficial)**