Sticky Notes Library

An Angular library for managing sticky notes with rich text editing capabilities. This library provides a standalone component that allows users to create, edit, and delete notes associated with specific pages or records.

Features

• 📝 Rich text editor for notes with formatting options
• 💾 Create, update, and delete notes
• 🔒 View-only mode support
• 🎨 Customizable labels and messages
• 📦 Standalone component (works with Angular 21+)
• 🔄 Reactive forms integration
• 🌐 RESTful API integration

Requirements

• Node.js: ^16.14.0 or >=18.13.0
• Angular: >=16.0.0 (recommended: >=21.0.0)
• npm: >=6.0.0

Installation

Install the library via npm:

npm install sticky-notes-lib

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install @angular/common @angular/core @angular/forms primeng primeicons quill rxjs

For specific versions:

• Angular 16+: npm install @angular/common@^16.0.0 @angular/core@^16.0.0 @angular/forms@^16.0.0
• Angular 21+: npm install @angular/common@^21.2.0 @angular/core@^21.2.0 @angular/forms@^21.2.0
• PrimeNG: npm install primeng@^15.0.0 primeicons@^6.0.0
• Quill: npm install quill@^2.0.0
• RxJS: npm install rxjs@^7.8.0

Usage

1. Import the Component

Since this is a standalone component, you can import it directly in your component:

import { Component } from '@angular/core';
import { StickyNotesComponent } from 'sticky-notes-lib';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [StickyNotesComponent],
  template: `
    <lib-sticky-notes-component
      [id]="recordId"
      [pageCode]="'MY_PAGE'"
      [title]="'My Notes'"
      [viewOnly]="false">
    </lib-sticky-notes-component>
  `
})
export class MyComponent {
  recordId = 123;
}

2. Configure the Request Service

The library uses a RequestService to make API calls. You need to configure the base URL in your application:

import { Component, OnInit } from '@angular/core';
import { RequestService } from 'sticky-notes-lib';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent implements OnInit {
  constructor(private requestService: RequestService) {}

  ngOnInit() {
    // Set your API base URL
    this.requestService.setBaseUrl('https://your-api-domain.com');
  }
}

3. Component Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | id | number | undefined | The ID of the record/page to associate notes with | | pageCode | string | undefined | A unique code identifying the page/context | | title | string | '' | Title displayed in the notes dialog | | viewOnly | boolean | false | If true, notes cannot be edited or deleted |

4. API Endpoints

The library expects the following API endpoints:

• GET /api/notes?id.equals={id}&pageCode.equals={pageCode} - Get notes by ID and page code
• POST /api/notes - Create a new note
• PUT /api/notes/{id} - Update an existing note
• DELETE /api/notes/{id} - Delete a note

5. Services

The library exports the following services that you can use:

RequestService

Central HTTP service for API calls:

import { RequestService } from 'sticky-notes-lib';

constructor(private requestService: RequestService) {}

// Set base URL
this.requestService.setBaseUrl('https://api.example.com');

// Make requests
this.requestService.get('/endpoint', { param: 'value' });
this.requestService.post('/endpoint', { data: 'value' });

Loading Service

Global loading state management:

import { Loading } from 'sticky-notes-lib';

constructor(private loading: Loading) {
  this.loading.isLoading.subscribe(isLoading => {
    console.log('Loading:', isLoading);
  });
}

CommonMessageService

Toast message service (requires PrimeNG MessageService):

import { CommonMessageService } from 'sticky-notes-lib';

constructor(private messageService: CommonMessageService) {}

this.messageService.success('add', 'Note saved successfully!');
this.messageService.error('add', 'Failed to save note');

Example

Full example with all features:

import { Component } from '@angular/core';
import { StickyNotesComponent, RequestService } from 'sticky-notes-lib';

@Component({
  selector: 'app-customer-details',
  standalone: true,
  imports: [StickyNotesComponent],
  template: `
    <div class="customer-details">
      <h1>Customer Details</h1>

      <lib-sticky-notes-component
        [id]="customerId"
        [pageCode]="'CUSTOMER_DETAILS'"
        [title]="'Customer Notes'"
        [viewOnly]="!canEdit">
      </lib-sticky-notes-component>
    </div>
  `
})
export class CustomerDetailsComponent {
  customerId = 12345;
  canEdit = true;

  constructor(private requestService: RequestService) {
    this.requestService.setBaseUrl('https://api.myapp.com');
  }
}

Development

Building the Library

To build the library for development:

npm run build:lib

To build and watch for changes:

npm run build:lib:watch

Testing

Run unit tests:

ng test sticky-notes-lib

Publishing

1. Build the library:

   npm run build:lib

2. Navigate to the dist folder:

   cd dist/sticky-notes-lib

3. Publish to npm:

   npm publish

Or use the pack script to create a tarball:

npm run pack:lib

License

MIT

Support

For issues and feature requests, please visit the GitHub repository.