jupiter-tagger-copilot

v1.2.3

Published

6 days ago

Framework-agnostic XBRL tagging library with Web Components (Lit Element) - includes resizable panels with fileData support, auto-tagging, table API integration, and taxonomy services for Jupiter XBRL projects

0High
0Medium
0Low

venkydeshmukh

xbrl tagging web-components lit-element resizable-panels auto-tagger taxonomy angular react vue jupiter component-library typescript framework-agnostic

Jupiter Tagger Copilot

🚀 Framework-agnostic XBRL tagging library with Web Components (Lit Element) for building sophisticated XBRL tagging interfaces. Works with Angular, React, Vue, or vanilla JavaScript.

✨ Features

🎯 Resizable Panels Component: Draggable split-panel layout (70/30 default) with smooth resizing - See Quick Start
- NEW: fileData property - Pass array of files with fileName and fileContent - See FileData Feature
- NEW: Table API Integration - Automatic table tagging via REST API - See Table API Docs
🤖 Auto Tagger: Automatic XBRL concept suggestion based on taxonomy analysis
🏷️ HTML Tagging: Interactive manual tagging with real-time validation
📊 XBRL Services: Comprehensive taxonomy management and processing
🔧 Framework Agnostic: Web Components work everywhere - Angular, React, Vue, vanilla JS
📦 TypeScript: Fully typed interfaces and models for XBRL data structures
🎨 Shadow DOM: Encapsulated styles prevent CSS conflicts
⚡ Vite Build: Fast development and optimized production builds

📦 Installation

npm install jupiter-tagger-copilot

🚀 Quick Start - Resizable Panels

The simplest way to use resizable panels:

<!DOCTYPE html>
<html>
<body>
    <!-- NOTHING MORE, NOTHING LESS -->
    <resizable-panels>
        <div slot="left">Left panel content (70%)</div>
        <div slot="right">Right panel content (30%)</div>
    </resizable-panels>

    <script type="module">
        import 'jupiter-tagger-copilot';
    </script>
</body>
</html>

That's it! The component handles:

✅ 70/30 split by default
✅ Draggable divider
✅ Min/max constraints (20%-80%)
✅ Keyboard navigation
✅ Touch support
✅ Responsive behavior

→ See full Quick Start Guide | → View Live Demo

📁 NEW: FileData Property

Pass an array of files directly to the component:

const panels = document.querySelector('resizable-panels');

// Set fileData property
panels.fileData = [
  {
    fileName: 'report.html',
    fileContent: '<h1>Financial Report</h1><p>Content...</p>'
  },
  {
    fileName: 'data.json',
    fileContent: '{"revenue": 1000000, "expenses": 750000}'
  }
];

// Access file data
console.log(panels.fileData.length); // 2
console.log(panels.fileData[0].fileName); // 'report.html'

→ See FileData Feature Documentation | → View FileData Example

📊 NEW: Table API Integration

Automatically tag tables using AI-powered REST API:

<resizable-panels
  pi-tag="nlgaap"
  report-language="nl-NL"
  period-start-date="2025-01-01"
  period-end-date="2025-12-31"
  monetary-unit="EUR">
  
  <div slot="left">
    <table xrpinfo="Balance Sheet">
      <tr>
        <td xtr="cell-0-0">Assets</td>
        <td xtr="cell-0-1">10,000</td>
      </tr>
    </table>
  </div>
</resizable-panels>

How it works:

User selects a table from the left panel
Chooses a role and sets monetary scale
Component calls REST API automatically
API response displayed in right panel

→ See Table API Documentation | → View Table API Test | → Implementation Details

Prerequisites

This library has peer dependencies on the following Angular packages:

@angular/core (>=14.0.0)
@angular/common (>=14.0.0)
@angular/forms (>=14.0.0)
@angular/material (>=14.0.0)
@angular/cdk (>=14.0.0)
rxjs (>=7.4.0)

Make sure these are installed in your Angular project.

Quick Start

1. Import the Module

Add JupiterTaggerCopilotModule to your Angular module:

import { NgModule } from '@angular/core';
import { JupiterTaggerCopilotModule } from 'jupiter-tagger-copilot';

@NgModule({
  imports: [
    JupiterTaggerCopilotModule
  ],
  // ... other module configuration
})
export class AppModule { }

2. Use Components

Auto Tagger Component

<lib-auto-tagger
  [taxonomyData]="taxonomyData"
  [targetDocument]="document"
  (tagSuggested)="onTagSuggested($event)"
  (taggingCompleted)="onTaggingCompleted($event)">
</lib-auto-tagger>

HTML Tagging Component

<lib-tag-html
  [htmlContent]="htmlContent"
  [taxonomyData]="taxonomyData"
  [existingTags]="existingTags"
  (tagCreated)="onTagCreated($event)"
  (tagUpdated)="onTagUpdated($event)"
  (tagDeleted)="onTagDeleted($event)">
</lib-tag-html>

3. Use Services

Tagging Service

import { TaggingService } from 'jupiter-tagger-copilot';

constructor(private taggingService: TaggingService) {
  // Subscribe to tags changes
  this.taggingService.tags$.subscribe(tags => {
    console.log('Current tags:', tags);
  });
}

// Add a new tag
this.taggingService.addTag({
  id: 'tag-1',
  conceptName: 'ifrs-full:Assets',
  conceptLabel: 'Assets',
  namespace: 'ifrs-full',
  textContent: 'Total Assets',
  value: 1000000,
  unit: 'EUR',
  contextRef: 'c1'
});

XBRL Taxonomy Service

import { XbrlTaxonomyService } from 'jupiter-tagger-copilot';

constructor(private taxonomyService: XbrlTaxonomyService) {}

// Load taxonomy from JSON data
this.taxonomyService.loadTaxonomyFromJson({
  calculation: calculationData,
  datatypes: datatypesData,
  presentation: presentationData,
  schemas: schemasData
}).subscribe(taxonomy => {
  console.log('Taxonomy loaded:', taxonomy);
});

// Search for concepts
this.taxonomyService.searchConcepts('Assets').subscribe(concepts => {
  console.log('Found concepts:', concepts);
});

API Documentation

Components

AutoTaggerComponent

Provides automatic XBRL tagging functionality.

Inputs:

taxonomyData: any - XBRL taxonomy data
targetDocument: Document - Target HTML document for tagging
autoTaggingEnabled: boolean - Enable/disable auto-tagging

Outputs:

tagSuggested: EventEmitter<TagInterface> - Emitted when a tag is suggested
taggingCompleted: EventEmitter<TagInterface[]> - Emitted when tagging is complete
error: EventEmitter<string> - Emitted when errors occur

TagHtmlComponent

Provides interactive HTML tagging interface.

Inputs:

htmlContent: string - HTML content to tag
taxonomyData: any - XBRL taxonomy data
existingTags: TagInterface[] - Existing tags
readOnly: boolean - Read-only mode

Outputs:

tagCreated: EventEmitter<TagInterface> - Emitted when a tag is created
tagUpdated: EventEmitter<TagInterface> - Emitted when a tag is updated
tagDeleted: EventEmitter<string> - Emitted when a tag is deleted
selectionChanged: EventEmitter<any> - Emitted when text selection changes

Services

TaggingService

Manages XBRL tagging operations.

Methods:

addTag(tag: TagInterface): void - Add a new tag
removeTag(tagId: string): void - Remove a tag
updateTag(tagId: string, updates: Partial<TagInterface>): void - Update a tag
getTags(): TagInterface[] - Get all tags
clearTags(): void - Clear all tags
suggestTags(text: string): Observable<TagInterface[]> - Get tag suggestions

XbrlTaxonomyService

Manages XBRL taxonomy data and operations.

Methods:

loadTaxonomy(taxonomy: TaxonomyInterface): void - Load taxonomy data
searchConcepts(searchTerm: string): Observable<any[]> - Search concepts
getConceptById(conceptId: string): any - Get concept by ID
validateConcept(conceptId: string): Observable<ValidationResult> - Validate concept

Interfaces

TagInterface

Represents an XBRL tag applied to HTML content.

interface TagInterface {
  id: string;
  conceptName: string;
  conceptLabel: string;
  namespace: string;
  textContent: string;
  value?: number | string;
  unit?: string;
  contextRef?: string;
  // ... additional properties
}

TaxonomyInterface

Represents XBRL taxonomy structure.

interface TaxonomyInterface {
  id: string;
  name: string;
  version: string;
  calculation?: any;
  datatypes?: any;
  hypercubes?: any;
  presentation?: any;
  schemas?: any;
}

Utility Functions

XBRL Utilities

import { parseQName, createQName, isValidConceptName, formatXbrlDate } from 'jupiter-tagger-copilot';

// Parse qualified names
const { prefix, localName } = parseQName('ifrs-full:Assets');

// Validate concept names
const isValid = isValidConceptName('ifrs-full:Assets');

// Format dates for XBRL
const xbrlDate = formatXbrlDate(new Date());

Tagging Utilities

import { TextSelection, ElementHighlight, TagValidation } from 'jupiter-tagger-copilot';

// Get selected text
const selection = TextSelection.getSelectedText();

// Highlight elements
ElementHighlight.addHighlight(element, 'my-highlight-class');

// Validate tagging capability
const validation = TagValidation.canTag(element);

Development

Building the Library

npm run build

Testing

npm test

Packaging

npm run pack

Publishing

npm run release

Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Compatibility

Angular: 14.x, 15.x, 16.x, 17.x, 18.x
TypeScript: 4.7+
Node.js: 18.19.1+

License

This project is licensed under the MIT License - see the LICENSE file for details.