dockview-angular 0.0.0-beta-0 → 0.0.0-experimental-e3d91d1-20251227

package/dist/esm/lib/paneview/paneview-angular.component.js

@@ -0,0 +1,163 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, ElementRef, EventEmitter, Injector, Input, Output, ViewChild, ChangeDetectionStrategy, EnvironmentInjector, inject } from '@angular/core';
+import { createPaneview, PROPERTY_KEYS_PANEVIEW } from 'dockview-core';
+import { AngularFrameworkComponentFactory } from '../utils/component-factory';
+import { AngularLifecycleManager } from '../utils/lifecycle-utils';
+import { AngularPanePart } from './angular-pane-part';
+let PaneviewAngularComponent = class PaneviewAngularComponent {
+    constructor() {
+        this.ready = new EventEmitter();
+        this.drop = new EventEmitter();
+        this.lifecycleManager = new AngularLifecycleManager();
+        this.injector = inject(Injector);
+        this.environmentInjector = inject(EnvironmentInjector);
+    }
+    ngOnInit() {
+        this.initializePaneview();
+    }
+    ngOnDestroy() {
+        this.lifecycleManager.destroy();
+        if (this.paneviewApi) {
+            this.paneviewApi.dispose();
+        }
+    }
+    ngOnChanges(changes) {
+        if (this.paneviewApi) {
+            const coreChanges = {};
+            let hasChanges = false;
+            // Check for changes in core paneview properties
+            PROPERTY_KEYS_PANEVIEW.forEach(key => {
+                if (changes[key] && !changes[key].isFirstChange()) {
+                    coreChanges[key] = changes[key].currentValue;
+                    hasChanges = true;
+                }
+            });
+            if (hasChanges) {
+                this.paneviewApi.updateOptions(coreChanges);
+            }
+        }
+    }
+    getPaneviewApi() {
+        return this.paneviewApi;
+    }
+    initializePaneview() {
+        if (!this.components) {
+            throw new Error('PaneviewAngularComponent: components input is required');
+        }
+        const coreOptions = this.extractCoreOptions();
+        const frameworkOptions = this.createFrameworkOptions();
+        this.paneviewApi = createPaneview(this.containerRef.nativeElement, {
+            ...coreOptions,
+            ...frameworkOptions
+        });
+        // Set up event listeners
+        this.setupEventListeners();
+        // Emit ready event
+        this.ready.emit({ api: this.paneviewApi });
+    }
+    extractCoreOptions() {
+        const coreOptions = {};
+        PROPERTY_KEYS_PANEVIEW.forEach(key => {
+            const value = this[key];
+            if (value !== undefined) {
+                coreOptions[key] = value;
+            }
+        });
+        return coreOptions;
+    }
+    createFrameworkOptions() {
+        const componentFactory = new AngularFrameworkComponentFactory(this.components, this.injector, this.environmentInjector, this.headerComponents);
+        return {
+            createComponent: (options) => {
+                return componentFactory.createPaneviewComponent(options);
+            },
+            createHeaderComponent: this.headerComponents
+                ? (options) => {
+                    return new AngularPanePart(this.headerComponents[options.name], this.injector, this.environmentInjector);
+                }
+                : undefined
+        };
+    }
+    setupEventListeners() {
+        if (!this.paneviewApi) {
+            return;
+        }
+        // Set up event subscriptions using lifecycle manager
+        const api = this.paneviewApi;
+        if (this.drop.observers.length > 0) {
+            const disposable = api.onDidDrop(event => {
+                this.drop.emit(event);
+            });
+            this.lifecycleManager.addDisposable(disposable);
+        }
+    }
+};
+__decorate([
+    ViewChild('paneviewContainer', { static: true }),
+    __metadata("design:type", ElementRef)
+], PaneviewAngularComponent.prototype, "containerRef", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], PaneviewAngularComponent.prototype, "components", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], PaneviewAngularComponent.prototype, "headerComponents", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], PaneviewAngularComponent.prototype, "className", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], PaneviewAngularComponent.prototype, "orientation", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], PaneviewAngularComponent.prototype, "hideBorders", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], PaneviewAngularComponent.prototype, "debug", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], PaneviewAngularComponent.prototype, "disableAutoResizing", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], PaneviewAngularComponent.prototype, "ready", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], PaneviewAngularComponent.prototype, "drop", void 0);
+PaneviewAngularComponent = __decorate([
+    Component({
+        selector: 'dv-paneview',
+        standalone: true,
+        template: '<div #paneviewContainer class="paneview-container"></div>',
+        styles: [`
+        :host {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        .paneview-container {
+            width: 100%;
+            height: 100%;
+        }
+    `],
+        changeDetection: ChangeDetectionStrategy.OnPush
+    })
+], PaneviewAngularComponent);
+export { PaneviewAngularComponent };

package/dist/esm/lib/paneview/types.d.ts

@@ -0,0 +1,14 @@
+import { Type } from '@angular/core';
+import { PaneviewOptions, PaneviewApi, PaneviewDropEvent } from 'dockview-core';
+export interface PaneviewAngularReadyEvent {
+    api: PaneviewApi;
+}
+export interface PaneviewAngularOptions extends PaneviewOptions {
+    components: Record<string, Type<any>>;
+    headerComponents?: Record<string, Type<any>>;
+}
+export interface PaneviewAngularEvents {
+    ready: PaneviewAngularReadyEvent;
+    drop: PaneviewDropEvent;
+}
+export { PaneviewApi, PaneviewDropEvent, PaneviewOptions } from 'dockview-core';

package/dist/esm/lib/paneview/types.js

@@ -0,0 +1,2 @@
+// Re-export commonly used types from dockview-core
+export { PaneviewApi } from 'dockview-core';

package/dist/esm/lib/splitview/angular-splitview-panel.d.ts

@@ -0,0 +1,9 @@
+import { Type, Injector, EnvironmentInjector } from '@angular/core';
+import { SplitviewPanel, IFrameworkPart } from 'dockview-core';
+export declare class AngularSplitviewPanel extends SplitviewPanel {
+    private readonly angularComponent;
+    private readonly injector;
+    private readonly environmentInjector?;
+    constructor(id: string, component: string, angularComponent: Type<any>, injector: Injector, environmentInjector?: EnvironmentInjector | undefined);
+    getComponent(): IFrameworkPart;
+}

package/dist/esm/lib/splitview/angular-splitview-panel.js

@@ -0,0 +1,17 @@
+import { SplitviewPanel, } from 'dockview-core';
+import { AngularRenderer } from '../utils/angular-renderer';
+export class AngularSplitviewPanel extends SplitviewPanel {
+    constructor(id, component, angularComponent, injector, environmentInjector) {
+        super(id, component);
+        this.angularComponent = angularComponent;
+        this.injector = injector;
+        this.environmentInjector = environmentInjector;
+    }
+    getComponent() {
+        return new AngularRenderer({
+            component: this.angularComponent,
+            injector: this.injector,
+            environmentInjector: this.environmentInjector
+        });
+    }
+}

package/dist/esm/lib/splitview/splitview-angular.component.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter, OnDestroy, OnInit, Type, OnChanges, SimpleChanges } from '@angular/core';
+import { SplitviewApi, SplitviewOptions } from 'dockview-core';
+import { SplitviewAngularReadyEvent } from './types';
+export interface SplitviewAngularOptions extends SplitviewOptions {
+    components: Record<string, Type<any>>;
+}
+export declare class SplitviewAngularComponent implements OnInit, OnDestroy, OnChanges {
+    private containerRef;
+    components: Record<string, Type<any>>;
+    className?: string;
+    orientation?: 'horizontal' | 'vertical';
+    proportionalLayout?: boolean;
+    hideBorders?: boolean;
+    debug?: boolean;
+    disableAutoResizing?: boolean;
+    ready: EventEmitter<SplitviewAngularReadyEvent>;
+    private splitviewApi?;
+    private lifecycleManager;
+    private injector;
+    private environmentInjector;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    getSplitviewApi(): SplitviewApi | undefined;
+    private initializeSplitview;
+    private extractCoreOptions;
+    private createFrameworkOptions;
+}

package/dist/esm/lib/splitview/splitview-angular.component.js

@@ -0,0 +1,137 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, ElementRef, EventEmitter, Injector, Input, Output, ViewChild, ChangeDetectionStrategy, EnvironmentInjector, inject } from '@angular/core';
+import { createSplitview, PROPERTY_KEYS_SPLITVIEW } from 'dockview-core';
+import { AngularFrameworkComponentFactory } from '../utils/component-factory';
+import { AngularLifecycleManager } from '../utils/lifecycle-utils';
+let SplitviewAngularComponent = class SplitviewAngularComponent {
+    constructor() {
+        this.ready = new EventEmitter();
+        this.lifecycleManager = new AngularLifecycleManager();
+        this.injector = inject(Injector);
+        this.environmentInjector = inject(EnvironmentInjector);
+    }
+    ngOnInit() {
+        this.initializeSplitview();
+    }
+    ngOnDestroy() {
+        this.lifecycleManager.destroy();
+        if (this.splitviewApi) {
+            this.splitviewApi.dispose();
+        }
+    }
+    ngOnChanges(changes) {
+        if (this.splitviewApi) {
+            const coreChanges = {};
+            let hasChanges = false;
+            // Check for changes in core splitview properties
+            PROPERTY_KEYS_SPLITVIEW.forEach(key => {
+                if (changes[key] && !changes[key].isFirstChange()) {
+                    coreChanges[key] = changes[key].currentValue;
+                    hasChanges = true;
+                }
+            });
+            if (hasChanges) {
+                this.splitviewApi.updateOptions(coreChanges);
+            }
+        }
+    }
+    getSplitviewApi() {
+        return this.splitviewApi;
+    }
+    initializeSplitview() {
+        if (!this.components) {
+            throw new Error('SplitviewAngularComponent: components input is required');
+        }
+        const coreOptions = this.extractCoreOptions();
+        const frameworkOptions = this.createFrameworkOptions();
+        this.splitviewApi = createSplitview(this.containerRef.nativeElement, {
+            ...coreOptions,
+            ...frameworkOptions
+        });
+        // Emit ready event
+        this.ready.emit({ api: this.splitviewApi });
+    }
+    extractCoreOptions() {
+        const coreOptions = {};
+        PROPERTY_KEYS_SPLITVIEW.forEach(key => {
+            const value = this[key];
+            if (value !== undefined) {
+                coreOptions[key] = value;
+            }
+        });
+        return coreOptions;
+    }
+    createFrameworkOptions() {
+        const componentFactory = new AngularFrameworkComponentFactory(this.components, this.injector, this.environmentInjector);
+        return {
+            createComponent: (options) => {
+                return componentFactory.createSplitviewComponent(options);
+            }
+        };
+    }
+};
+__decorate([
+    ViewChild('splitviewContainer', { static: true }),
+    __metadata("design:type", ElementRef)
+], SplitviewAngularComponent.prototype, "containerRef", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], SplitviewAngularComponent.prototype, "components", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], SplitviewAngularComponent.prototype, "className", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], SplitviewAngularComponent.prototype, "orientation", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], SplitviewAngularComponent.prototype, "proportionalLayout", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], SplitviewAngularComponent.prototype, "hideBorders", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], SplitviewAngularComponent.prototype, "debug", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], SplitviewAngularComponent.prototype, "disableAutoResizing", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], SplitviewAngularComponent.prototype, "ready", void 0);
+SplitviewAngularComponent = __decorate([
+    Component({
+        selector: 'dv-splitview',
+        standalone: true,
+        template: '<div #splitviewContainer class="splitview-container"></div>',
+        styles: [`
+        :host {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        .splitview-container {
+            width: 100%;
+            height: 100%;
+        }
+    `],
+        changeDetection: ChangeDetectionStrategy.OnPush
+    })
+], SplitviewAngularComponent);
+export { SplitviewAngularComponent };

package/dist/esm/lib/splitview/types.d.ts

@@ -0,0 +1,12 @@
+import { Type } from '@angular/core';
+import { SplitviewOptions, SplitviewApi } from 'dockview-core';
+export interface SplitviewAngularReadyEvent {
+    api: SplitviewApi;
+}
+export interface SplitviewAngularOptions extends SplitviewOptions {
+    components: Record<string, Type<any>>;
+}
+export interface SplitviewAngularEvents {
+    ready: SplitviewAngularReadyEvent;
+}
+export { SplitviewApi, SplitviewOptions } from 'dockview-core';

package/dist/esm/lib/splitview/types.js

@@ -0,0 +1,2 @@
+// Re-export commonly used types from dockview-core
+export { SplitviewApi } from 'dockview-core';

package/dist/esm/lib/utils/angular-renderer.d.ts

@@ -0,0 +1,18 @@
+import { Injector, Type, EnvironmentInjector } from '@angular/core';
+import { IContentRenderer, IFrameworkPart, Parameters } from 'dockview-core';
+export interface AngularRendererOptions {
+    component: Type<any>;
+    injector: Injector;
+    environmentInjector?: EnvironmentInjector;
+}
+export declare class AngularRenderer implements IContentRenderer, IFrameworkPart {
+    private options;
+    private componentRef;
+    private _element;
+    constructor(options: AngularRendererOptions);
+    get element(): HTMLElement;
+    init(parameters: Parameters): void;
+    update(params: Parameters): void;
+    private render;
+    dispose(): void;
+}

package/dist/esm/lib/utils/angular-renderer.js

@@ -0,0 +1,66 @@
+import { createComponent } from '@angular/core';
+export class AngularRenderer {
+    constructor(options) {
+        this.options = options;
+        this.componentRef = null;
+        this._element = null;
+    }
+    get element() {
+        if (!this._element) {
+            throw new Error('Angular renderer not initialized');
+        }
+        return this._element;
+    }
+    init(parameters) {
+        // If already initialized, just update the parameters
+        if (this.componentRef) {
+            this.update(parameters);
+        }
+        else {
+            this.render(parameters);
+        }
+    }
+    update(params) {
+        if (this.componentRef) {
+            Object.keys(params).forEach(key => {
+                // Use 'in' operator instead of hasOwnProperty to support getter/setter properties
+                if (key in this.componentRef.instance) {
+                    this.componentRef.instance[key] = params[key];
+                }
+            });
+            this.componentRef.changeDetectorRef.detectChanges();
+        }
+    }
+    render(parameters) {
+        try {
+            // Create the component using modern Angular API
+            this.componentRef = createComponent(this.options.component, {
+                environmentInjector: this.options.environmentInjector || this.options.injector,
+                elementInjector: this.options.injector
+            });
+            // Set initial parameters
+            Object.keys(parameters).forEach(key => {
+                // Use 'in' operator instead of hasOwnProperty to support getter/setter properties
+                if (key in this.componentRef.instance) {
+                    this.componentRef.instance[key] = parameters[key];
+                }
+            });
+            // Get the DOM element
+            const hostView = this.componentRef.hostView;
+            this._element = hostView.rootNodes[0];
+            // Trigger change detection
+            this.componentRef.changeDetectorRef.detectChanges();
+        }
+        catch (error) {
+            console.error('Error creating Angular component:', error);
+            throw error;
+        }
+    }
+    dispose() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+        this._element = null;
+    }
+}

package/dist/esm/lib/utils/component-factory.d.ts

@@ -0,0 +1,20 @@
+import { Type, Injector, EnvironmentInjector } from '@angular/core';
+import { IContentRenderer, ITabRenderer, IWatermarkRenderer, IHeaderActionsRenderer, CreateComponentOptions, GridviewPanel, SplitviewPanel, IPanePart } from 'dockview-core';
+export declare class AngularFrameworkComponentFactory {
+    private components;
+    private injector;
+    private environmentInjector?;
+    private tabComponents?;
+    private watermarkComponent?;
+    private headerActionsComponents?;
+    private defaultTabComponent?;
+    constructor(components: Record<string, Type<any>>, injector: Injector, environmentInjector?: EnvironmentInjector | undefined, tabComponents?: Record<string, Type<any>> | undefined, watermarkComponent?: Type<any> | undefined, headerActionsComponents?: Record<string, Type<any>> | undefined, defaultTabComponent?: Type<any> | undefined);
+    createDockviewComponent(options: CreateComponentOptions): IContentRenderer;
+    createGridviewComponent(options: CreateComponentOptions): GridviewPanel;
+    createSplitviewComponent(options: CreateComponentOptions): SplitviewPanel;
+    createPaneviewComponent(options: CreateComponentOptions): IPanePart;
+    createComponent(options: CreateComponentOptions): IContentRenderer;
+    createTabComponent(options: CreateComponentOptions): ITabRenderer | undefined;
+    createWatermarkComponent(): IWatermarkRenderer;
+    createHeaderActionsComponent(name: string): IHeaderActionsRenderer | undefined;
+}

package/dist/esm/lib/utils/component-factory.js

@@ -0,0 +1,99 @@
+import { AngularRenderer } from './angular-renderer';
+import { AngularGridviewPanel } from '../gridview/angular-gridview-panel';
+import { AngularSplitviewPanel } from '../splitview/angular-splitview-panel';
+import { AngularPanePart } from '../paneview/angular-pane-part';
+export class AngularFrameworkComponentFactory {
+    constructor(components, injector, environmentInjector, tabComponents, watermarkComponent, headerActionsComponents, defaultTabComponent) {
+        this.components = components;
+        this.injector = injector;
+        this.environmentInjector = environmentInjector;
+        this.tabComponents = tabComponents;
+        this.watermarkComponent = watermarkComponent;
+        this.headerActionsComponents = headerActionsComponents;
+        this.defaultTabComponent = defaultTabComponent;
+    }
+    // For DockviewComponent
+    createDockviewComponent(options) {
+        const component = this.components[options.name];
+        if (!component) {
+            throw new Error(`Component '${options.name}' not found in component registry`);
+        }
+        const renderer = new AngularRenderer({
+            component,
+            injector: this.injector,
+            environmentInjector: this.environmentInjector
+        });
+        renderer.init(options);
+        return renderer;
+    }
+    // For GridviewComponent  
+    createGridviewComponent(options) {
+        const component = this.components[options.name];
+        if (!component) {
+            throw new Error(`Component '${options.name}' not found in component registry`);
+        }
+        return new AngularGridviewPanel(options.id, options.name, component, this.injector, this.environmentInjector);
+    }
+    // For SplitviewComponent
+    createSplitviewComponent(options) {
+        const component = this.components[options.name];
+        if (!component) {
+            throw new Error(`Component '${options.name}' not found in component registry`);
+        }
+        return new AngularSplitviewPanel(options.id, options.name, component, this.injector, this.environmentInjector);
+    }
+    // For PaneviewComponent
+    createPaneviewComponent(options) {
+        const component = this.components[options.name];
+        if (!component) {
+            throw new Error(`Component '${options.name}' not found in component registry`);
+        }
+        return new AngularPanePart(component, this.injector, this.environmentInjector);
+    }
+    // Legacy method for backward compatibility
+    createComponent(options) {
+        return this.createDockviewComponent(options);
+    }
+    createTabComponent(options) {
+        let component = this.tabComponents?.[options.name];
+        if (!component && this.defaultTabComponent) {
+            component = this.defaultTabComponent;
+        }
+        if (!component) {
+            return undefined;
+        }
+        const renderer = new AngularRenderer({
+            component,
+            injector: this.injector,
+            environmentInjector: this.environmentInjector
+        });
+        renderer.init(options);
+        return renderer;
+    }
+    createWatermarkComponent() {
+        if (!this.watermarkComponent) {
+            throw new Error('Watermark component not provided');
+        }
+        const renderer = new AngularRenderer({
+            component: this.watermarkComponent,
+            injector: this.injector,
+            environmentInjector: this.environmentInjector
+        });
+        renderer.init({});
+        return renderer;
+    }
+    createHeaderActionsComponent(name) {
+        const component = this.headerActionsComponents?.[name];
+        if (!component) {
+            return undefined;
+        }
+        const renderer = new AngularRenderer({
+            component,
+            injector: this.injector,
+            environmentInjector: this.environmentInjector
+        });
+        // Initialize with empty props - dockview-core will call init() again with actual IGroupHeaderProps
+        renderer.init({});
+        return renderer;
+    }
+}

package/dist/esm/lib/utils/lifecycle-utils.d.ts

@@ -0,0 +1,18 @@
+import { Observable } from 'rxjs';
+import { DockviewIDisposable } from 'dockview-core';
+export declare class AngularDisposable implements DockviewIDisposable {
+    private _isDisposed;
+    private disposeCallbacks;
+    get isDisposed(): boolean;
+    addDisposeCallback(callback: () => void): void;
+    dispose(): void;
+}
+export declare class AngularLifecycleManager {
+    private destroySubject;
+    private disposables;
+    get destroy$(): Observable<void>;
+    addDisposable(disposable: DockviewIDisposable): void;
+    takeUntilDestroy<T>(): (source: Observable<T>) => Observable<T>;
+    destroy(): void;
+}
+export declare function createAngularDisposable(disposeCallback?: () => void): AngularDisposable;