@fidesque/ngx-xbrl-viewer

A powerful Angular component library for displaying XBRL (eXtensible Business Reporting Language) documents with interactive fact highlighting and concept exploration.

✨ Features

• ✅ Display XBRL reports with interactive highlighting
• ✅ Support for Inline XBRL (iXBRL) documents
• ✅ Concept tree navigation (Presentation, Calculation, Anchoring)
• ✅ Fact value inspection with context details
• ✅ Multi-report support with tabbed interface
• ✅ Resizable panels with persistent state
• ✅ Calculation validation and children highlighting
• ✅ Angular 14-18+ compatible
• ✅ TypeScript support with full type definitions
• ✅ Customizable notifications and dialogs

📦 Installation

npm install @fidesque/ngx-xbrl-viewer

Peer Dependencies

npm install @angular/common@^14.0.0 @angular/core@^14.0.0 rxjs@^7.0.0

Optional Dependencies

# For Material dialogs (optional)
npm install @angular/material@^14.0.0

# For toast notifications (optional)
npm install ngx-toastr@^14.0.0

🚀 Quick Start

1. Import Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { XbrlViewerModule } from '@fidesque/ngx-xbrl-viewer';

@NgModule({
  imports: [
    BrowserModule,
    XbrlViewerModule.forRoot({
      assetPath: 'assets/ngx-xbrl-viewer',
      enableHighlighting: true
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Configure Assets

In angular.json:

{
  "assets": [
    "src/favicon.ico",
    "src/assets",
    {
      "glob": "**/*",
      "input": "node_modules/@fidesque/ngx-xbrl-viewer/assets",
      "output": "/assets/ngx-xbrl-viewer"
    }
  ]
}

3. Use Component

import { Component } from '@angular/core';
import { XbrlData } from '@fidesque/ngx-xbrl-viewer';

@Component({
  selector: 'app-viewer',
  template: `
    <xbrl-viewer
      [data]="xbrlData"
      [reportFiles]="reportFiles"
      [viewMode]="'full'"
      (conceptSelected)="onConceptSelected($event)">
    </xbrl-viewer>
  `
})
export class ViewerComponent {
  xbrlData: XbrlData = { /* your XBRL data */ };
  reportFiles = [{ name: 'report.xhtml', iframeSrc: 'https://...' }];

  onConceptSelected(event: any) {
    console.log('Concept selected:', event);
  }
}

📖 Documentation

Component Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | data | XbrlData | required | XBRL taxonomy data | | reportFiles | XbrlReportFile[] | [] | Array of report files | | reportUrl | string | '' | Single report URL (legacy) | | height | number | 600 | Container height in pixels | | viewMode | ViewMode | 'full' | UI visibility mode | | theme | 'light' \| 'dark' | 'light' | Visual theme | | enableHighlighting | boolean | true | Enable fact highlighting | | showTabs | boolean | true | Show tab navigation |

Component Outputs

| Output | Type | Description | |--------|------|-------------| | conceptSelected | EventEmitter<ConceptSelectedEvent> | Emitted when concept is clicked | | factSelected | EventEmitter<FactSelectedEvent> | Emitted when fact is clicked | | viewerReady | EventEmitter<ViewerReadyEvent> | Emitted when viewer is initialized | | viewerError | EventEmitter<ViewerErrorEvent> | Emitted on error | | validationRequested | EventEmitter<void> | Emitted when validation requested | | transformRequested | EventEmitter<void> | Emitted when transform requested |

Custom Notification Service

import { Injectable } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { XbrlNotificationService } from '@fidesque/ngx-xbrl-viewer';

@Injectable()
export class CustomNotificationService implements XbrlNotificationService {
  constructor(private toastr: ToastrService) {}

  showError(title: string, message: string): void {
    this.toastr.error(message, title);
  }

  showSuccess(title: string, message: string): void {
    this.toastr.success(message, title);
  }

  showWarning(title: string, message: string): void {
    this.toastr.warning(message, title);
  }

  showInfo(title: string, message: string): void {
    this.toastr.info(message, title);
  }
}

// Provide in module
@NgModule({
  providers: [
    { 
      provide: 'XbrlNotificationService', 
      useClass: CustomNotificationService 
    }
  ]
})
export class AppModule { }

🎯 View Modes

| Mode | Preview Tab | Other Tabs | Validate Button | |------|-------------|------------|-----------------| | full | ✅ | ✅ | ✅ | | no_preview | ❌ | ✅ | ✅ | | no_validate_full | ✅ | ✅ | ❌ | | preview_only | ✅ | ❌ | ❌ |

🔧 Advanced Configuration

XbrlViewerModule.forRoot({
  assetPath: 'assets/ngx-xbrl-viewer',
  enableHighlighting: true,
  enableCache: true,
  defaultHeight: 700,
  defaultViewMode: 'full',
  notificationService: CustomNotificationService
})

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines.

📄 License

MIT © Fidesque

🐛 Issues

Report issues at: https://github.com/fidesque/ngx-xbrl-viewer/issues

📚 Learn More

• XBRL.org Specification
• Inline XBRL Guide
• Angular Documentation