@medha-analytics/onevoice

Angular feedback form library with customizable theming support.

Installation

npm install @medha-analytics/onevoice

Basic Setup

1. Import the module in your app

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

<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

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):

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:

/* 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:

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