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

``bash
npm install jupiter-tagger-copilot
`

🚀 Quick Start - Resizable Panels

The simplest way to use resizable panels:

`html







Right panel content (30%)




`

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

$3

Pass an array of files directly to the component:

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

// Set fileData property
panels.fileData = [
{
fileName: 'report.html',
fileContent: '

Financial Report

Content...

'
},
{
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

$3

Automatically tag tables using AI-powered REST API:

`html
pi-tag="nlgaap"
report-language="nl-NL"
period-start-date="2025-01-01"
period-end-date="2025-12-31"
monetary-unit="EUR">





`

How it works:
1. User selects a table from the left panel
2. Chooses a role and sets monetary scale
3. Component calls REST API automatically
4. 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

$3

Add JupiterTaggerCopilotModule to your Angular module:

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

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

$3

#### Auto Tagger Component

`html
[taxonomyData]="taxonomyData"
[targetDocument]="document"
(tagSuggested)="onTagSuggested($event)"
(taggingCompleted)="onTaggingCompleted($event)">

`

#### HTML Tagging Component

`html
[htmlContent]="htmlContent"
[taxonomyData]="taxonomyData"
[existingTags]="existingTags"
(tagCreated)="onTagCreated($event)"
(tagUpdated)="onTagUpdated($event)"
(tagDeleted)="onTagDeleted($event)">

`

$3

#### Tagging Service

`typescript
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

`typescript
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

$3

#### 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 - Emitted when a tag is suggested
- taggingCompleted: EventEmitter - Emitted when tagging is complete
- error: EventEmitter - 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 - Emitted when a tag is created
- tagUpdated: EventEmitter - Emitted when a tag is updated
- tagDeleted: EventEmitter - Emitted when a tag is deleted
- selectionChanged: EventEmitter - Emitted when text selection changes

$3

#### 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): void - Update a tag
- getTags(): TagInterface[] - Get all tags
- clearTags(): void - Clear all tags
- suggestTags(text: string): Observable - Get tag suggestions

#### XbrlTaxonomyService

Manages XBRL taxonomy data and operations.

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

$3

#### TagInterface

Represents an XBRL tag applied to HTML content.

`typescript
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.

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

$3

#### XBRL Utilities

`typescript
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

`typescript
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

$3

`bash
npm run build
`

$3

`bash
npm test
`

$3

`bash
npm run pack
`

$3

`bash
npm run release
`

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. 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.

Support

For questions and support, please open an issue in the GitHub repository.

Changelog

$3

- Initial release
- Basic library structure
- Core interfaces and services
- Placeholder components for future development