@presencelearning/documentation

Angular library for the clinical-documentation workflow shared across Presence frontends — session notes, appointment management, IEP-goal metrics tracking, evaluation recording, and the cross-window pop-out documentation surface.

Storybook Interactive component catalog — every documented component, with controls, design notes, and accessibility checks.

Features

• Standalone Angular components — DocumentationPanelComponent, DocumentationWindowComponent, DocumentationTabsComponent, session-notes editor, tracked metrics, appointment selection, evaluation recording, session-events timeline
• Abstract service contract — Consumer apps provide a concrete DocumentationService implementation for backend operations (fetch appointments, save records, IEP metric mutations, etc.); the library handles UI state, signal stores, and the NgRx pipeline
• Pop-out documentation window — Open a session in its own browser window via /documentation/window/:instanceId; survives parent-tab refresh and signs off back to the parent via BroadcastChannel
• Signal stores and NgRx — DocumentationAppointmentStore, DocumentationGlobalStore, DocumentationPolishNotesStore, AppointmentTabsStore, plus a full NgRx slice (documentationReducer, DocumentationActions, DocumentationEffects, selectors)
• AI note polishing — Polished SOAP-note suggestions surface in SessionNotesSuggestionComponent; consumers wire up the backend call
• Tracked metrics — IEP-goal metrics with score tracking, percent-correct computation, and dropdown/dialog selection UIs
• Cross-window broadcast — DocumentationBroadcastService and SessionEventsBroadcastService keep multiple open windows in sync

Installation

npm install @presencelearning/documentation

Peer dependencies

Install these in your application:

npm install @angular/common @angular/core @angular/forms @angular/animations @angular/router
npm install @angular/cdk @angular/material
npm install @ngrx/store @ngrx/effects @ngrx/signals @ngrx/entity
npm install rxjs

If you use EvaluationRecordingComponent and its sparkle animation, also install:

npm install @lottiefiles/dotlottie-web

Quick Start

1. Implement DocumentationService

The library requires a concrete implementation of the abstract DocumentationService — it defines every backend operation (fetching appointments, saving records, polishing notes, logging events, etc.).

import { Injectable, signal } from '@angular/core';
import { Observable, of } from 'rxjs';
import { DocumentationService, DocumentationAppointment } from '@presencelearning/documentation';

@Injectable({ providedIn: 'root' })
export class MyDocumentationService extends DocumentationService {
  isReady = signal(false);
  isRefreshing = signal(false);
  isRecording = signal(false);

  refreshAppointments(): void {
    // Your backend call
  }

  loadAppointmentData(appointment: DocumentationAppointment): void {
    // Your backend call
  }

  // …implement every abstract member
}

2. Wire up providers

import { ApplicationConfig } from '@angular/core';
import { provideStore } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';
import {
  DocumentationEffects,
  documentationReducer,
  provideDocumentation,
} from '@presencelearning/documentation';
import { MyDocumentationService } from './my-documentation.service';

export const appConfig: ApplicationConfig = {
  providers: [
    provideDocumentation(MyDocumentationService, {
      // Optional — defaults shown:
      // registerIcons: true,
      // windowUrlBase: '/documentation/window',
    }),
    provideStore({ documentation: documentationReducer }),
    provideEffects(DocumentationEffects),
  ],
};

provideDocumentation() wires the abstract DocumentationService binding, registers the library’s SVG icons with MatIconRegistry (opt out with registerIcons: false), and optionally overrides the pop-out window URL base via windowUrlBase.

3. Render the panel

import { Component } from '@angular/core';
import {
  DocumentationAppointment,
  DocumentationPanelComponent,
} from '@presencelearning/documentation';

@Component({
  selector: 'app-session',
  standalone: true,
  imports: [DocumentationPanelComponent],
  template: `
    <div #container>
      <pl-documentation-panel
        [appointment]="appointment"
        [parentElement]="container"
        (signOffChange)="onSignOff($event)"
      />
    </div>
  `,
})
export class SessionComponent {
  appointment!: DocumentationAppointment;
}

4. (Optional) Add the pop-out window route

DocumentationWindowComponent is what renders inside a pop-out window when the user opens documentation in its own browser window. Register a route for it so the URL built by DocumentationWindowService.openAppointmentWindow(apptId) resolves.

import { Routes } from '@angular/router';
import { DocumentationWindowComponent } from '@presencelearning/documentation';

export const routes: Routes = [
  { path: 'documentation/window/:instanceId', component: DocumentationWindowComponent },
];

Components

Component	Selector	Purpose
DocumentationPanelComponent	pl-documentation-panel	Main documentation panel with tabs for notes, metrics, and events
DocumentationWindowComponent	pl-documentation-window	Standalone pop-out window for a single appointment
DocumentationTabsComponent	pl-documentation-tabs	Mini-window tab bar for multiple concurrent appointments
AppointmentSelectionComponent	pl-appointment-selection	Appointment picker / list
SessionNotesComponent	pl-session-notes	SOAP-notes editor (subjective, objective, assessment, plan)
TrackedMetricsComponent	pl-tracked-metrics	IEP-goal metrics tracking
SessionEventsComponent	pl-session-events	Timeline of session events
AppointmentDetailsComponent	pl-appointment-details	Client info, billing code, service selection
EvaluationRecordingComponent	pl-evaluation-recording	Evaluation-recording controls
TimestampTrackingComponent	pl-timestamp-tracking	Client admission timestamps

Live previews for every component (including states, controls, and design references) live in Storybook.

Stores

Signal stores (NgRx Signals)

import {
  AppointmentTabsStore,
  DocumentationAppointmentStore,
  DocumentationGlobalStore,
  DocumentationPolishNotesStore,
} from '@presencelearning/documentation';

Store	Holds
DocumentationAppointmentStore	Appointment entities, selection state
DocumentationGlobalStore	Provider info, billing codes, note schemas
DocumentationPolishNotesStore	AI-generated note suggestions
AppointmentTabsStore	Mini-window tab state

NgRx slice

import {
  DocumentationActions,
  DocumentationEffects,
  documentationReducer,
  selectCurrentTab,
  selectDocumentation,
  selectDrawerClientIds,
  selectDrawerWidth,
  selectTabClientIds,
  selectTimestampTrackingEnabled,
} from '@presencelearning/documentation';

Compatibility

Angular	Library version
19.x	0.x
20.x	0.x

Non-goals

• No bundled backend — every persistence call goes through the consumer’s DocumentationService implementation
• No opinionated theming — the library ships a minimal theme.scss; consumers control palette and typography
• No standalone routing — the pop-out window route must be registered by the consumer

---

Source: packages/documentation