npm package: @goldenhippo/gh-elements
Description: A standalone Angular component library for Hippo Funnel
Author: Golden Hippo
Latest version: 1.1.2

# GH Elements - Angular Component Library

A standalone Angular component library for embedding Vidalytics videos and displaying terms and conditions in your Angular applications.

## Installation

```bash
npm install @goldenhippo/gh-elements
```

## Components

### Vidalytics Component

1. Import the component in your Angular module or standalone component:

```typescript
import { VidalyticsComponent } from '@goldenhippo/gh-elements';

@Component({
  standalone: true,
  imports: [VidalyticsComponent],
  // ... other component metadata
})
```

2. Use the component in your template:

```html
<element-vidalytics
  [vidalyticsEmbedId]="'your_video_id'"
  [desktopTime]="940"
  [mobileTime]="120"
  [testButton]="false"
  [elementClass]="'your-custom-class'"
  [videoPlayerClass]="'your-player-class'"
  [elementStyle]="{ 'width': '100%', 'height': 'auto' }"
  [videoPlayerStyle]="{ 'width': '100%', 'height': 'auto' }">
</element-vidalytics>
```

#### Vidalytics Input Properties

| Property | Type | Required | Default | Description |
|----------|------|----------|---------|-------------|
| `vidalyticsEmbedId` | string | Yes | - | The ID of your Vidalytics video |
| `desktopTime` | number | No | 940 | Time in seconds for desktop view |
| `mobileTime` | number | No | 120 | Time in seconds for mobile view |
| `testButton` | boolean | No | false | Whether to show test button |
| `elementClass` | string | No | - | Custom class for the container |
| `videoPlayerClass` | string | No | - | Custom class for the video player |
| `elementStyle` | object | No | - | Custom styles for the container |
| `videoPlayerStyle` | object | No | - | Custom styles for the video player |

### Terms and Conditions Component

1. Import the component in your Angular module or standalone component:

```typescript
import { TermsAndConditionsComponent } from '@goldenhippo/gh-elements';

@Component({
  standalone: true,
  imports: [TermsAndConditionsComponent],
  // ... other component metadata
})
```

2. Use the component in your template:

```html
<element-terms-and-conditions
  [elementClass]="'terms-and-conditions-container'"
  [contentClass]="'terms-and-conditions-content'"
  [elementStyle]="{ 'max-width': '800px', 'margin': '0 auto' }"
  [contentStyle]="{ 'font-size': '14px', 'line-height': '1.6' }"
  [customContent]="'Your custom terms content here'"
  [isSubscription]="true"
  [termsLink]="'/terms'"
  [privacyLink]="'/privacy'"
  [subscriptionTermsLink]="'/subscription-terms'"
  [isPurchaseAvailable]="true"
  [subscriptionPageLink]="'/subscription'"
  [supportEmail]="'support@example.com'"
  [subscriptionPrice]="29.99"
  [offerPrice]="19.99">
</element-terms-and-conditions>
```

#### Terms and Conditions Input Properties

| Property | Type | Required | Default | Description |
|----------|------|----------|---------|-------------|
| `elementClass` | string | No | 'terms-and-conditions-container' | Custom class for the container |
| `elementStyle` | object | No | {} | Optional styles for the container |
| `contentClass` | string | No | 'terms-and-conditions-content' | Optional class for the content |
| `contentStyle` | object | No | {} | Optional styles for the content |
| `customContent` | string | No | - | Custom terms and conditions content |
| `template` | string | No | 'defaultTemplate' | The template name to use |
| `isSubscription` | boolean | No | false | Whether this is for a subscription |
| `termsLink` | string | Yes | - | Link to the terms and conditions |
| `privacyLink` | string | Yes | - | Link to the privacy policy |
| `subscriptionTermsLink` | string | No | - | Link to the subscription terms (required if isSubscription is true) |
| `isPurchaseAvailable` | boolean | No | true | Whether purchase is available |
| `subscriptionPageLink` | string | Yes | - | Link to the subscription page |
| `supportEmail` | string | Yes | - | Support email address |
| `subscriptionPrice` | number | No | - | Subscription price |
| `offerPrice` | number | No | - | Offer price |

## Compatibility

This package is compatible with Angular versions 15 through 19.

## Development

### Building the Library

```bash
npm run build:lib
```

### Running Tests

```bash
npm test
```

### Storybook

To view the components in Storybook:

```bash
npm run storybook
```

## License

MIT

## Repository

[GitHub Repository](https://github.com/goldenhippo/gh-elements)