GH Elements - Angular Component Library

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

Installation

npm install @goldenhippo/gh-elements

Components

Vidalytics Component

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

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

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

2. Use the component in your template:

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

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

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

2. Use the component in your template:

<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]="'[email protected]'"
  [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

npm run build:lib

Running Tests

npm test

Storybook

To view the components in Storybook:

npm run storybook

License

MIT

Repository

GitHub Repository