ngx-voicely-cx/README.md

A feedback collection widget for Angular applications

# NgxVoicelyCx

A customizable feedback form component for Angular applications with star ratings, tag input, and more.

## Installation

```bash
npm install ngx-voicely-cx
```

## Features

- ⭐ Star ratings for multiple categories (Ease of Use, Performance, Design)
- 🏷️ Tag-based input for collecting feature suggestions
- 💬 Text area for detailed feedback
- 🎨 Customizable labels and placeholders
- 🧩 Standalone component for easy integration
- 📦 All styles included - no need to add Angular Material separately

## Usage

### 1. Import the module in your application

```typescript
// In your app.module.ts or any feature module
import { VoicelyCxModule } from 'ngx-voicely-cx';

@NgModule({
  imports: [
    // ... other imports
    VoicelyCxModule
  ]
})
export class AppModule { }
```

Or if using standalone components:

```typescript
// In your component
import { Component } from '@angular/core';
import { FeedbackFormComponent } from 'ngx-voicely-cx';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FeedbackFormComponent],
  template: `
    <lib-feedback-form 
      (formSubmit)="onFeedbackSubmit($event)">
    </lib-feedback-form>
  `
})
export class AppComponent {
  onFeedbackSubmit(data: any) {
    console.log('Feedback received:', data);
    // Process the feedback
  }
}
```

### 2. Use the component in your template

```html
<lib-feedback-form
  title="We'd love your feedback!"
  subtitle="Please help us improve our service"
  [labels]="customLabels"
  (formSubmit)="handleFeedback($event)">
</lib-feedback-form>
```

### 3. Handle the feedback in your component

```typescript
import { Component } from '@angular/core';
import { FeedbackFormData, FeedbackFormLabels } from 'ngx-voicely-cx';

@Component({
  selector: 'app-feedback-page',
  templateUrl: './feedback-page.component.html'
})
export class FeedbackPageComponent {
  // Optional custom labels
  customLabels: FeedbackFormLabels = {
    easeOfUse: 'How easy was it to use our platform?',
    performance: 'How would you rate our platform speed?',
    design: 'How would you rate our visual design?',
    missingFeatures: 'What features do you wish we had?',
    missingFeaturesPlaceholder: 'Type a feature and press Enter',
    thoughts: 'Additional thoughts',
    thoughtsPlaceholder: 'Share any other feedback you have for us',
    submitButton: 'Send Feedback'
  };

  handleFeedback(data: FeedbackFormData): void {
    console.log('Received feedback:', data);
    // data = {
    //   easeOfUse: 4,
    //   performance: 5,
    //   design: 3,
    //   missingFeatures: ['Dark mode', 'Export to PDF'],
    //   thoughts: 'Overall a great platform!'
    // }
    
    // Send to your API, etc.
  }
}
```

## API Reference

### Inputs

| Input | Type | Description |
|-------|------|-------------|
| `title` | string | Form title. Default: "Feedback Form" |
| `subtitle` | string | Optional subtitle |
| `labels` | FeedbackFormLabels | Customize all text labels |

### Outputs

| Output | Type | Description |
|--------|------|-------------|
| `formSubmit` | EventEmitter<FeedbackFormData> | Emits when form is submitted |

### Interfaces

```typescript
interface FeedbackFormLabels {
  easeOfUse: string;
  performance: string;
  design: string;
  missingFeatures: string;
  missingFeaturesPlaceholder: string;
  thoughts: string;
  thoughtsPlaceholder: string;
  submitButton: string;
}

interface FeedbackFormData {
  easeOfUse: number;      // 1-5 rating
  performance: number;    // 1-5 rating
  design: number;         // 1-5 rating
  missingFeatures: string[];
  thoughts: string;
}
```

## License

MIT