dockview-angular 4.13.0 → 5.0.0

package/dist/fesm2022/dockview-angular.mjs

@@ -0,0 +1,846 @@
+import { GridviewPanel, SplitviewPanel, PROPERTY_KEYS_DOCKVIEW, createDockview, PROPERTY_KEYS_GRIDVIEW, createGridview, PROPERTY_KEYS_PANEVIEW, createPaneview, PROPERTY_KEYS_SPLITVIEW, createSplitview } from 'dockview-core';
+export * from 'dockview-core';
+import * as i0 from '@angular/core';
+import { ApplicationRef, createComponent, EventEmitter, inject, Injector, EnvironmentInjector, Output, Input, ViewChild, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+class AngularRenderer {
+    constructor(options) {
+        this.options = options;
+        this.componentRef = null;
+        this._element = null;
+        this.appRef = options.injector.get(ApplicationRef);
+    }
+    get element() {
+        if (!this._element) {
+            throw new Error('Angular renderer not initialized');
+        }
+        return this._element;
+    }
+    get component() {
+        return this.componentRef;
+    }
+    init(parameters) {
+        // Only forward params, api, and containerApi to the component
+        // (matching the React renderer). Other init parameters like
+        // 'title' are internal to the framework.
+        const filtered = {};
+        if ('params' in parameters) {
+            filtered['params'] = parameters['params'];
+        }
+        if ('api' in parameters) {
+            filtered['api'] = parameters['api'];
+        }
+        if ('containerApi' in parameters) {
+            filtered['containerApi'] = parameters['containerApi'];
+        }
+        if (this.componentRef) {
+            this.update(filtered);
+        }
+        else {
+            this.render(filtered);
+        }
+    }
+    update(params) {
+        if (!this.componentRef) {
+            return;
+        }
+        const instance = this.componentRef.instance;
+        for (const key of Object.keys(params)) {
+            if (key in instance) {
+                instance[key] = params[key];
+            }
+        }
+        // trigger change detection
+        this.componentRef.changeDetectorRef.markForCheck();
+    }
+    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
+            this.update(parameters);
+            // Get the DOM element
+            const hostView = this.componentRef.hostView;
+            this._element = hostView.rootNodes[0];
+            // attach to change detection
+            this.appRef.attachView(hostView);
+            // trigger change detection
+            this.componentRef.changeDetectorRef.markForCheck();
+        }
+        catch (error) {
+            console.error('Error creating Angular component:', error);
+            throw error;
+        }
+    }
+    dispose() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+        this._element = null;
+    }
+}
+
+class AngularGridviewPanel extends GridviewPanel {
+    constructor(id, component, angularComponent, injector, environmentInjector) {
+        super(id, component);
+        this.angularComponent = angularComponent;
+        this.injector = injector;
+        this.environmentInjector = environmentInjector;
+    }
+    getComponent() {
+        const renderer = new AngularRenderer({
+            component: this.angularComponent,
+            injector: this.injector,
+            environmentInjector: this.environmentInjector,
+        });
+        renderer.init({
+            params: this._params?.params ?? {},
+            api: this.api,
+        });
+        this.element.appendChild(renderer.element);
+        return renderer;
+    }
+}
+
+class AngularSplitviewPanel extends SplitviewPanel {
+    constructor(id, component, angularComponent, injector, environmentInjector) {
+        super(id, component);
+        this.angularComponent = angularComponent;
+        this.injector = injector;
+        this.environmentInjector = environmentInjector;
+    }
+    getComponent() {
+        const renderer = new AngularRenderer({
+            component: this.angularComponent,
+            injector: this.injector,
+            environmentInjector: this.environmentInjector,
+        });
+        renderer.init({
+            params: this._params?.params ?? {},
+            api: this.api,
+        });
+        this.element.appendChild(renderer.element);
+        return renderer;
+    }
+}
+
+class AngularPanePart {
+    constructor(angularComponent, injector, environmentInjector) {
+        this.angularComponent = angularComponent;
+        this.injector = injector;
+        this.environmentInjector = environmentInjector;
+        this.renderer = new AngularRenderer({
+            component: this.angularComponent,
+            injector: this.injector,
+            environmentInjector: this.environmentInjector,
+        });
+    }
+    get element() {
+        return this.renderer.element;
+    }
+    init(parameters) {
+        this.renderer.init(parameters);
+    }
+    update(params) {
+        this.renderer.update(params);
+    }
+    dispose() {
+        this.renderer.dispose();
+    }
+}
+
+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;
+    }
+}
+
+class AngularDisposable {
+    constructor() {
+        this._isDisposed = false;
+        this.disposeCallbacks = [];
+    }
+    get isDisposed() {
+        return this._isDisposed;
+    }
+    addDisposeCallback(callback) {
+        if (this._isDisposed) {
+            callback();
+            return;
+        }
+        this.disposeCallbacks.push(callback);
+    }
+    dispose() {
+        if (this._isDisposed) {
+            return;
+        }
+        this._isDisposed = true;
+        this.disposeCallbacks.forEach((callback) => {
+            try {
+                callback();
+            }
+            catch (error) {
+                console.error('Error in dispose callback:', error);
+            }
+        });
+        this.disposeCallbacks = [];
+    }
+}
+class AngularLifecycleManager {
+    constructor() {
+        this.destroySubject = new Subject();
+        this.disposables = [];
+    }
+    get destroy$() {
+        return this.destroySubject.asObservable();
+    }
+    addDisposable(disposable) {
+        this.disposables.push(disposable);
+    }
+    takeUntilDestroy() {
+        return takeUntil(this.destroySubject);
+    }
+    destroy() {
+        this.destroySubject.next();
+        this.destroySubject.complete();
+        this.disposables.forEach((disposable) => {
+            try {
+                disposable.dispose();
+            }
+            catch (error) {
+                console.error('Error disposing resource:', error);
+            }
+        });
+        this.disposables = [];
+    }
+}
+function createAngularDisposable(disposeCallback) {
+    const disposable = new AngularDisposable();
+    if (disposeCallback) {
+        disposable.addDisposeCallback(disposeCallback);
+    }
+    return disposable;
+}
+
+class DockviewAngularComponent {
+    constructor() {
+        this.ready = new EventEmitter();
+        this.didDrop = new EventEmitter();
+        this.willDrop = new EventEmitter();
+        this.lifecycleManager = new AngularLifecycleManager();
+        this.injector = inject(Injector);
+        this.environmentInjector = inject(EnvironmentInjector);
+    }
+    ngOnInit() {
+        this.initializeDockview();
+    }
+    ngOnDestroy() {
+        this.lifecycleManager.destroy();
+        if (this.dockviewApi) {
+            this.dockviewApi.dispose();
+        }
+    }
+    ngOnChanges(changes) {
+        if (this.dockviewApi) {
+            const coreChanges = {};
+            let hasChanges = false;
+            // Check for changes in core dockview properties
+            PROPERTY_KEYS_DOCKVIEW.forEach((key) => {
+                if (changes[key] && !changes[key].isFirstChange()) {
+                    coreChanges[key] = changes[key].currentValue;
+                    hasChanges = true;
+                }
+            });
+            if (hasChanges) {
+                this.dockviewApi.updateOptions(coreChanges);
+            }
+        }
+    }
+    getDockviewApi() {
+        return this.dockviewApi;
+    }
+    initializeDockview() {
+        if (!this.components) {
+            throw new Error('DockviewAngularComponent: components input is required');
+        }
+        const coreOptions = this.extractCoreOptions();
+        const frameworkOptions = this.createFrameworkOptions();
+        this.dockviewApi = createDockview(this.containerRef.nativeElement, {
+            ...coreOptions,
+            ...frameworkOptions,
+        });
+        // Set up event listeners
+        this.setupEventListeners();
+        // Emit ready event
+        this.ready.emit({ api: this.dockviewApi });
+    }
+    extractCoreOptions() {
+        const coreOptions = {};
+        PROPERTY_KEYS_DOCKVIEW.forEach((key) => {
+            const value = this[key];
+            if (value !== undefined) {
+                coreOptions[key] = value;
+            }
+        });
+        return coreOptions;
+    }
+    createFrameworkOptions() {
+        const headerActionsComponents = {};
+        if (this.leftHeaderActionsComponent) {
+            headerActionsComponents['left'] = this.leftHeaderActionsComponent;
+        }
+        if (this.rightHeaderActionsComponent) {
+            headerActionsComponents['right'] = this.rightHeaderActionsComponent;
+        }
+        if (this.prefixHeaderActionsComponent) {
+            headerActionsComponents['prefix'] =
+                this.prefixHeaderActionsComponent;
+        }
+        const componentFactory = new AngularFrameworkComponentFactory(this.components, this.injector, this.environmentInjector, this.tabComponents, this.watermarkComponent, headerActionsComponents, this.defaultTabComponent);
+        return {
+            createComponent: (options) => {
+                return componentFactory.createDockviewComponent(options);
+            },
+            createTabComponent: (options) => {
+                return componentFactory.createTabComponent(options);
+            },
+            createWatermarkComponent: this.watermarkComponent
+                ? () => {
+                    return componentFactory.createWatermarkComponent();
+                }
+                : undefined,
+            createLeftHeaderActionComponent: this.leftHeaderActionsComponent
+                ? (group) => {
+                    return componentFactory.createHeaderActionsComponent('left');
+                }
+                : undefined,
+            createRightHeaderActionComponent: this.rightHeaderActionsComponent
+                ? (group) => {
+                    return componentFactory.createHeaderActionsComponent('right');
+                }
+                : undefined,
+            createPrefixHeaderActionComponent: this.prefixHeaderActionsComponent
+                ? (group) => {
+                    return componentFactory.createHeaderActionsComponent('prefix');
+                }
+                : undefined,
+        };
+    }
+    setupEventListeners() {
+        if (!this.dockviewApi) {
+            return;
+        }
+        // Set up event subscriptions using lifecycle manager
+        const api = this.dockviewApi;
+        if (this.didDrop.observers.length > 0) {
+            const disposable = api.onDidDrop((event) => {
+                this.didDrop.emit(event);
+            });
+            this.lifecycleManager.addDisposable(disposable);
+        }
+        if (this.willDrop.observers.length > 0) {
+            const disposable = api.onWillDrop((event) => {
+                this.willDrop.emit(event);
+            });
+            this.lifecycleManager.addDisposable(disposable);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DockviewAngularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DockviewAngularComponent, isStandalone: true, selector: "dv-dockview", inputs: { components: "components", tabComponents: "tabComponents", watermarkComponent: "watermarkComponent", defaultTabComponent: "defaultTabComponent", leftHeaderActionsComponent: "leftHeaderActionsComponent", rightHeaderActionsComponent: "rightHeaderActionsComponent", prefixHeaderActionsComponent: "prefixHeaderActionsComponent", className: "className", orientation: "orientation", hideBorders: "hideBorders", rootOverlayModel: "rootOverlayModel", defaultTabComponent_: "defaultTabComponent_", tabHeight: "tabHeight", disableFloatingGroups: "disableFloatingGroups", floatingGroupBounds: "floatingGroupBounds", popoutUrl: "popoutUrl", debug: "debug", locked: "locked", disableAutoResizing: "disableAutoResizing", singleTabMode: "singleTabMode" }, outputs: { ready: "ready", didDrop: "didDrop", willDrop: "willDrop" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["dockviewContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: '<div #dockviewContainer class="dockview-container"></div>', isInline: true, styles: [":host{display:block;width:100%;height:100%}.dockview-container{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DockviewAngularComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dv-dockview', standalone: true, template: '<div #dockviewContainer class="dockview-container"></div>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%}.dockview-container{width:100%;height:100%}\n"] }]
+        }], propDecorators: { containerRef: [{
+                type: ViewChild,
+                args: ['dockviewContainer', { static: true }]
+            }], components: [{
+                type: Input
+            }], tabComponents: [{
+                type: Input
+            }], watermarkComponent: [{
+                type: Input
+            }], defaultTabComponent: [{
+                type: Input
+            }], leftHeaderActionsComponent: [{
+                type: Input
+            }], rightHeaderActionsComponent: [{
+                type: Input
+            }], prefixHeaderActionsComponent: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], hideBorders: [{
+                type: Input
+            }], rootOverlayModel: [{
+                type: Input
+            }], defaultTabComponent_: [{
+                type: Input
+            }], tabHeight: [{
+                type: Input
+            }], disableFloatingGroups: [{
+                type: Input
+            }], floatingGroupBounds: [{
+                type: Input
+            }], popoutUrl: [{
+                type: Input
+            }], debug: [{
+                type: Input
+            }], locked: [{
+                type: Input
+            }], disableAutoResizing: [{
+                type: Input
+            }], singleTabMode: [{
+                type: Input
+            }], ready: [{
+                type: Output
+            }], didDrop: [{
+                type: Output
+            }], willDrop: [{
+                type: Output
+            }] } });
+
+class GridviewAngularComponent {
+    constructor() {
+        this.ready = new EventEmitter();
+        this.lifecycleManager = new AngularLifecycleManager();
+        this.injector = inject(Injector);
+        this.environmentInjector = inject(EnvironmentInjector);
+    }
+    ngOnInit() {
+        this.initializeGridview();
+    }
+    ngOnDestroy() {
+        this.lifecycleManager.destroy();
+        if (this.gridviewApi) {
+            this.gridviewApi.dispose();
+        }
+    }
+    ngOnChanges(changes) {
+        if (this.gridviewApi) {
+            const coreChanges = {};
+            let hasChanges = false;
+            // Check for changes in core gridview properties
+            PROPERTY_KEYS_GRIDVIEW.forEach((key) => {
+                if (changes[key] && !changes[key].isFirstChange()) {
+                    coreChanges[key] = changes[key].currentValue;
+                    hasChanges = true;
+                }
+            });
+            if (hasChanges) {
+                this.gridviewApi.updateOptions(coreChanges);
+            }
+        }
+    }
+    getGridviewApi() {
+        return this.gridviewApi;
+    }
+    initializeGridview() {
+        if (!this.components) {
+            throw new Error('GridviewAngularComponent: components input is required');
+        }
+        const coreOptions = this.extractCoreOptions();
+        const frameworkOptions = this.createFrameworkOptions();
+        this.gridviewApi = createGridview(this.containerRef.nativeElement, {
+            ...coreOptions,
+            ...frameworkOptions,
+        });
+        // Emit ready event
+        this.ready.emit({ api: this.gridviewApi });
+    }
+    extractCoreOptions() {
+        const coreOptions = {};
+        PROPERTY_KEYS_GRIDVIEW.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.createGridviewComponent(options);
+            },
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GridviewAngularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GridviewAngularComponent, isStandalone: true, selector: "dv-gridview", inputs: { components: "components", className: "className", orientation: "orientation", proportionalLayout: "proportionalLayout", hideBorders: "hideBorders", debug: "debug", disableAutoResizing: "disableAutoResizing" }, outputs: { ready: "ready" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["gridviewContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: '<div #gridviewContainer class="gridview-container"></div>', isInline: true, styles: [":host{display:block;width:100%;height:100%}.gridview-container{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GridviewAngularComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dv-gridview', standalone: true, template: '<div #gridviewContainer class="gridview-container"></div>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%}.gridview-container{width:100%;height:100%}\n"] }]
+        }], propDecorators: { containerRef: [{
+                type: ViewChild,
+                args: ['gridviewContainer', { static: true }]
+            }], components: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], proportionalLayout: [{
+                type: Input
+            }], hideBorders: [{
+                type: Input
+            }], debug: [{
+                type: Input
+            }], disableAutoResizing: [{
+                type: Input
+            }], ready: [{
+                type: Output
+            }] } });
+
+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);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaneviewAngularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaneviewAngularComponent, isStandalone: true, selector: "dv-paneview", inputs: { components: "components", headerComponents: "headerComponents", className: "className", orientation: "orientation", hideBorders: "hideBorders", debug: "debug", disableAutoResizing: "disableAutoResizing" }, outputs: { ready: "ready", drop: "drop" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["paneviewContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: '<div #paneviewContainer class="paneview-container"></div>', isInline: true, styles: [":host{display:block;width:100%;height:100%}.paneview-container{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaneviewAngularComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dv-paneview', standalone: true, template: '<div #paneviewContainer class="paneview-container"></div>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%}.paneview-container{width:100%;height:100%}\n"] }]
+        }], propDecorators: { containerRef: [{
+                type: ViewChild,
+                args: ['paneviewContainer', { static: true }]
+            }], components: [{
+                type: Input
+            }], headerComponents: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], hideBorders: [{
+                type: Input
+            }], debug: [{
+                type: Input
+            }], disableAutoResizing: [{
+                type: Input
+            }], ready: [{
+                type: Output
+            }], drop: [{
+                type: Output
+            }] } });
+
+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);
+            },
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SplitviewAngularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SplitviewAngularComponent, isStandalone: true, selector: "dv-splitview", inputs: { components: "components", className: "className", orientation: "orientation", proportionalLayout: "proportionalLayout", hideBorders: "hideBorders", debug: "debug", disableAutoResizing: "disableAutoResizing" }, outputs: { ready: "ready" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["splitviewContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: '<div #splitviewContainer class="splitview-container"></div>', isInline: true, styles: [":host{display:block;width:100%;height:100%}.splitview-container{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SplitviewAngularComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dv-splitview', standalone: true, template: '<div #splitviewContainer class="splitview-container"></div>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%}.splitview-container{width:100%;height:100%}\n"] }]
+        }], propDecorators: { containerRef: [{
+                type: ViewChild,
+                args: ['splitviewContainer', { static: true }]
+            }], components: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], proportionalLayout: [{
+                type: Input
+            }], hideBorders: [{
+                type: Input
+            }], debug: [{
+                type: Input
+            }], disableAutoResizing: [{
+                type: Input
+            }], ready: [{
+                type: Output
+            }] } });
+
+class DockviewAngularModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DockviewAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DockviewAngularModule, imports: [CommonModule,
+            DockviewAngularComponent,
+            GridviewAngularComponent,
+            PaneviewAngularComponent,
+            SplitviewAngularComponent], exports: [DockviewAngularComponent,
+            GridviewAngularComponent,
+            PaneviewAngularComponent,
+            SplitviewAngularComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DockviewAngularModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DockviewAngularModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        DockviewAngularComponent,
+                        GridviewAngularComponent,
+                        PaneviewAngularComponent,
+                        SplitviewAngularComponent,
+                    ],
+                    exports: [
+                        DockviewAngularComponent,
+                        GridviewAngularComponent,
+                        PaneviewAngularComponent,
+                        SplitviewAngularComponent,
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of dockview-angular
+ */
+// Re-export everything from dockview-core
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AngularDisposable, AngularFrameworkComponentFactory, AngularLifecycleManager, AngularRenderer, DockviewAngularComponent, DockviewAngularModule, GridviewAngularComponent, PaneviewAngularComponent, SplitviewAngularComponent, createAngularDisposable };
+//# sourceMappingURL=dockview-angular.mjs.map