Smartec Consent Manager - Angular Library

A customizable consent manager for Angular applications that provides GDPR-compliant cookie consent management with a floating action button and configurable dialog.

Features

• Floating action button with configurable tooltip
• Customizable consent dialog
• Persistent consent preferences (using localStorage)
• GDPR compliant design
• Built with Angular Material
• Easy integration with Angular applications

Installation

1. Install the package:

npm install smartec-consent-manager --save --legacy-peer-deps

2. Import the component in your application:

import { SmartecConsentManagerComponent } from 'smartec-consent-manager';

3. Add the component to your app template:

<smartec-consent-manager-manager [tooltipText]="'Administrar preferencias de cookies'"></smartec-consent-manager-manager>

Usage

Basic Usage

<smartec-consent-manager-manager></smartec-consent-manager-manager>

Customizing Tooltip

<smartec-consent-manager-manager [tooltipText]="'Administrar preferencias de cookies'"></smartec-consent-manager-manager>

Or with a component property:

// In your component
consentTooltip = 'Custom tooltip text';

<smartec-consent-manager-manager [tooltipText]="consentTooltip"></smartec-consent-manager-manager>

Customizing Default Consent Preferences

You can customize the default consent preferences by providing your own implementation of the ConsentService:

import { Injectable } from '@angular/core';
import { ConsentService } from 'smartec-consent-manager';

@Injectable()
export class CustomConsentService extends ConsentService {
  getDefaultPreferences() {
    return {
      necessary: true,
      analytics: true, // Default to true for analytics
      marketing: false,
      preferences: true
    };
  }
}

Then provide it in your module:

@NgModule({
  providers: [
    { provide: ConsentService, useClass: CustomConsentService }
  ]
})
export class AppModule { }

Styling

The floating button position can be customized by overriding these CSS variables in your global styles:

:root {
  --smartec-consent-manager-fab-bottom: 20px;
  --smartec-consent-manager-fab-right: 20px;
  --smartec-consent-manager-fab-z-index: 1000;
}

Development

Building the Library

1. Navigate to the project root:

cd C:\dev\ng\smartec-consent-manager

2. Build the library:

ng build smartec-consent-manager

Publishing the Library

1. After building, navigate to the dist folder:

cd C:\dev\ng\smartec-consent-manager\projects\smartec-consent\dist

2. Publish to npm:

npm publish

Publishing Tips

1. Make sure you're logged in to npm:

npm login

2. Update the version in projects/smartec-consent-manager/package.json before publishing:

npm version patch  # or minor, major

3. If publishing to a private registry, use:

npm publish --registry http://your-registry-url

Dependencies

This library requires:

• Angular (v12+ recommended)
• Angular Material
• @angular/cdk
• @angular/animations