npm package: @medha-analytics/onevoice
Description: OneVoice feedback library with direct color customization support
Author: Medha Analytics
Latest version: 1.2.2

# @medha-analytics/onevoice

Angular feedback form library with customizable theming support.

## Installation

```bash
npm install @medha-analytics/onevoice
```

## Basic Setup

### 1. Import the module in your app

```typescript
import { OneVoiceModule } from '@medha-analytics/onevoice';

@NgModule({
  imports: [
    OneVoiceModule.forRoot({
      backendUrl: 'https://your-api-url.com',
      applicationName: 'Your App Name',
      tenant: 'your-tenant'
    })
  ]
})
export class AppModule {}
```

### 2. Use the feedback form component

```html
<onevoice-feedback-form
  [prefillData]="prefillData"
  [lockedFields]="['application']"
  [standalone]="true"
  (onSubmitSuccess)="onSuccess($event)"
  (onSubmitError)="onError($event)"
  (onCancel)="onCancel()">
</onevoice-feedback-form>
```

## Custom Color Configuration

The library supports full color customization to match your application's theme.

### Available Color Properties

| Property | Description | Default (Light) |
|----------|-------------|-----------------|
| `primaryColor` | Primary brand color | `#1A6562` |
| `primaryBrandColor` | Brand accent color | `#1A6562` |
| `backgroundColor` | Form background | `#FFFFFF` |
| `textColor` | Primary text color | `#000000` |
| `secondaryColor` | Secondary/muted text | `#6B7280` |
| `buttonTextColor` | Button text color | `#FFFFFF` |
| `buttonBackgroundColor` | Button background | `#1A6562` |
| `buttonHoverBackgroundColor` | Button hover state | `#145250` |
| `borderColor` | Border color | `#E5E5EA` |
| `inputBackgroundColor` | Input field background | `#FAFAFA` |
| `inputTextColor` | Input text color | `#333333` |
| `inputBorderColor` | Input border color | `#E5E5EA` |
| `inputFocusBorderColor` | Input focus border | `#1A6562` |
| `errorColor` | Error/required indicator | `#E53E3E` |
| `successColor` | Success messages | `#38A169` |
| `warningColor` | Warning messages | `#D69E2E` |
| `linkColor` | Link color | `#1A6562` |
| `placeholderColor` | Placeholder text | `#9CA3AF` |
| `headerBackgroundColor` | Header background | `#FFFFFF` |
| `headerTextColor` | Header text color | `#111827` |

### Method 1: Configure in Module Setup

```typescript
OneVoiceModule.forRoot({
  backendUrl: 'https://your-api-url.com',
  applicationName: 'Your App Name',
  ui: {
    colors: {
      primaryColor: '#1A6562',
      backgroundColor: '#FFFFFF',
      textColor: '#333333',
      buttonBackgroundColor: '#1A6562',
      buttonTextColor: '#FFFFFF',
      errorColor: '#E53E3E',
      // ... add more colors as needed
    }
  }
})
```

### Method 2: Dynamic Color Updates via Service

Use `OneVoiceService.setColors()` to dynamically update colors (e.g., for theme switching):

```typescript
import { OneVoiceService } from '@medha-analytics/onevoice';

@Component({...})
export class AppComponent {
  constructor(private oneVoiceService: OneVoiceService) {}

  switchToLightTheme() {
    this.oneVoiceService.setColors({
      backgroundColor: '#FFFFFF',
      textColor: '#333333',
      primaryColor: '#1A6562',
      inputBackgroundColor: '#FAFAFA',
      inputTextColor: '#333333',
      borderColor: '#E5E5EA',
      headerBackgroundColor: '#FFFFFF',
      headerTextColor: '#111827'
    });
  }

  switchToDarkTheme() {
    this.oneVoiceService.setColors({
      backgroundColor: '#1e1e1e',
      textColor: '#e6edf3',
      primaryColor: '#1A6562',
      inputBackgroundColor: '#2d2d2d',
      inputTextColor: '#e6edf3',
      borderColor: '#3a3a3a',
      headerBackgroundColor: '#1e1e1e',
      headerTextColor: '#e6edf3'
    });
  }
}
```

### CSS Variables

The library also sets CSS custom properties that you can use in your styles:

```css
/* Available CSS variables (set automatically) */
--onevoice-primaryColor
--onevoice-backgroundColor
--onevoice-textColor
--onevoice-buttonBackgroundColor
--onevoice-buttonTextColor
--onevoice-inputBackgroundColor
--onevoice-inputTextColor
--onevoice-borderColor
--onevoice-errorColor
/* ... and more */
```

## Required Field Indicators

To show asterisk (*) indicators for required fields, configure in module setup:

```typescript
OneVoiceModule.forRoot({
  backendUrl: 'https://your-api-url.com',
  applicationName: 'Your App Name',
  fields: {
    title: {
      required: true  // Shows * next to Title label
    },
    description: {
      required: true  // Shows * next to Description label
    },
    application: {
      prefill: 'Your App',
      locked: true    // Makes field read-only
    }
  }
})
```

## Field Configuration Options

| Option | Type | Description |
|--------|------|-------------|
| `required` | boolean | Show required indicator (*) |
| `label` | string | Custom label text |
| `placeholder` | string | Custom placeholder text |
| `visible` | boolean | Show/hide the field |
| `locked` | boolean | Make field read-only |
| `prefill` | string \| function | Pre-fill value |

## API Reference

### OneVoiceService Methods

| Method | Description |
|--------|-------------|
| `setColors(colors: ThemeColors)` | Update theme colors dynamically |
| `getColors(): ThemeColors` | Get current theme colors |
| `openFeedbackForm(options?)` | Open feedback form programmatically |
| `closeFeedbackForm()` | Close feedback form |

## Version History

- **1.2.0** - Added custom color configuration, `setColors()` method, required field indicators
- **1.1.0** - Initial theming support
- **1.0.0** - Initial release

## License

MIT