Start adding dockview project

angular.json

@@ -91,6 +91,32 @@
           }
         }
       }
+    },
+    "dockview-angular": {
+      "projectType": "library",
+      "root": "projects/dockview-angular",
+      "sourceRoot": "projects/dockview-angular/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:ng-packagr",
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/dockview-angular/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/dockview-angular/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "tsConfig": "projects/dockview-angular/tsconfig.spec.json"
+          }
+        }
+      }
     }
   },
   "schematics": {

package.json

@@ -10,31 +10,32 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.0.5",
+    "@angular/animations": "^20.3.6",
-    "@angular/common": "^21.0.5",
+    "@angular/common": "^20.3.6",
-    "@angular/compiler": "^21.0.5",
+    "@angular/compiler": "^20.3.6",
-    "@angular/core": "^21.0.5",
+    "@angular/core": "^20.3.6",
-    "@angular/forms": "^21.0.5",
+    "@angular/forms": "^20.3.6",
-    "@angular/platform-browser": "^21.0.5",
+    "@angular/platform-browser": "^20.3.6",
-    "@angular/platform-browser-dynamic": "^21.0.5",
+    "@angular/platform-browser-dynamic": "^20.3.6",
-    "@angular/router": "^21.0.5",
+    "@angular/router": "^20.3.6",
     "@duckdb/duckdb-wasm": "^1.30.0",
-    "@primeng/themes": "^21.0.0",
+    "@primeng/themes": "20.2.0",
     "@tailwindcss/postcss": "^4.1.15",
+    "dockview-core": "^4.9.0",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "primeicons": "^7.0.0",
-    "primeng": "^21.0.0",
+    "primeng": "20.2.0",
     "rxjs": "~7.8.2",
     "tailwindcss": "^4.1.15",
-    "tailwindcss-primeui": "^0.6.1",
+    "tailwindcss-primeui": "0.6.1",
     "tslib": "^2.8.1",
-    "zod": "^4.1.12"
+    "zod": "4.1.12"
   },
   "devDependencies": {
-    "@angular/build": "^21.0.3",
+    "@angular/build": "^20.3.6",
-    "@angular/cli": "^21.0.3",
+    "@angular/cli": "^20.3.6",
-    "@angular/compiler-cli": "^21.0.5",
+    "@angular/compiler-cli": "^20.3.6",
     "@tauri-apps/cli": "^2.9.0",
     "@types/jasmine": "~5.1.12",
     "jasmine-core": "~5.12.0",
@@ -43,7 +44,7 @@
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "postcss": "^8.5.3",
+    "ng-packagr": "^20.3.0",
     "typescript": "~5.9.3"
   }
-}
+}

projects/dockview-angular/README.md

@@ -0,0 +1,63 @@
+# DockviewAngular
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build dockview-angular
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/dockview-angular
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

projects/dockview-angular/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/dockview-angular",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/dockview-angular/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "dockview-angular",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.3.0",
+    "@angular/core": "^20.3.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

projects/dockview-angular/src/lib/dockview-angular.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DockviewAngular } from './dockview-angular';
+
+describe('DockviewAngular', () => {
+  let component: DockviewAngular;
+  let fixture: ComponentFixture<DockviewAngular>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DockviewAngular]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DockviewAngular);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/dockview-angular/src/lib/dockview-angular.ts

@@ -0,0 +1,26 @@
+import {
+  Component,
+  ElementRef,
+  contentChildren,
+  viewChild,
+} from '@angular/core';
+import { DockviewApi, createDockview } from 'dockview-core';
+
+@Component({
+  selector: 'lib-dockview-angular',
+  imports: [],
+  template: ` <div #dockingElement></div> `,
+  styles: ``,
+})
+export class DockviewAngular {
+  // Child html elements that will be shown in separate dockview panels
+  // TODO: Maybe better as a directive so that we can provide the group api to each panel
+  //       It would also allow us to set properties for each panel, like its starting position
+  private readonly childElements = contentChildren<ElementRef>('panel');
+
+  private readonly dockingElement = viewChild<ElementRef>('dockingElement');
+  private readonly api: DockviewApi;
+  constructor() {
+    this.api = createDockview(this.dockingElement()?.nativeElement, {});
+  }
+}

projects/dockview-angular/src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of dockview-angular
+ */
+
+export * from './lib/dockview-angular';

projects/dockview-angular/tsconfig.lib.json

@@ -0,0 +1,18 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

projects/dockview-angular/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

projects/dockview-angular/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}

src/app/column-editor/column-editor.component.ts

@@ -1,36 +1,15 @@
-import {
+import { ChangeDetectionStrategy, Component, model } from '@angular/core';
-  ChangeDetectionStrategy,
-  Component,
-  model,
-  signal,
-} from '@angular/core';
 import { AccordionModule } from 'primeng/accordion';
 import { Column } from '../duckdb.service';
-import { Checkbox } from 'primeng/checkbox';
+import { Checkbox, CheckboxChangeEvent } from 'primeng/checkbox';
 import { FormsModule } from '@angular/forms';
 import { Button } from 'primeng/button';
 import { Tooltip } from 'primeng/tooltip';
-import { Dialog } from 'primeng/dialog';
-import { FloatLabel } from 'primeng/floatlabel';
-import { InputText } from 'primeng/inputtext';
-import { Select } from 'primeng/select';
-import { Field, form } from '@angular/forms/signals';
 
 @Component({
   selector: 'app-column-editor',
   standalone: true,
-  imports: [
+  imports: [AccordionModule, Checkbox, FormsModule, Button, Tooltip],
-    AccordionModule,
-    Checkbox,
-    FormsModule,
-    Button,
-    Tooltip,
-    Dialog,
-    FloatLabel,
-    InputText,
-    Select,
-    Field,
-  ],
   template: `
     <p-accordion [value]="0">
       <p-accordion-panel [value]="0">
@@ -66,43 +45,12 @@ import { Field, form } from '@angular/forms/signals';
         </p-accordion-content>
       </p-accordion-panel>
     </p-accordion>
-    <p-dialog [(visible)]="editDialogVisible" header="Edit Column">
-      <p-float-label variant="in">
-        <input pInputText id="column-edit-name" [field]="editingColumn.name" />
-        <label for="column-edit-name">Name</label>
-      </p-float-label>
-      <p-float-label variant="in">
-        <p-select
-          inputId="column-edit-type"
-          [field]="editingColumn.type"
-        ></p-select>
-        <label for="column-edit-type">Type</label>
-      </p-float-label>
-      <div class="flex items-center gap-2">
-        <p-check-box
-          [field]="editingColumn.enabled"
-          [binary]="true"
-          inputId="column-edit-enabled"
-        ></p-check-box>
-        <label for="column-edit-enabled">Enabled</label>
-      </div>
-    </p-dialog>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ColumnEditorComponent {
   columns = model<Column[]>();
 
-  protected editDialogVisible = signal(false);
-
-  protected currentColumn = signal<Column>({
-    name: '',
-    enabled: true,
-    type: 'string',
-  });
-
-  protected editingColumn = form(this.currentColumn);
-
   protected checkboxChanged(index: number) {
     this.columns.update((columns) => {
       if (columns) {
@@ -117,11 +65,5 @@ export class ColumnEditorComponent {
     });
   }
 
-  protected editColumn(index: number) {
+  protected editColumn(index: number) {}
-    const columns = this.columns();
-    if (columns) {
-      this.currentColumn.set(columns[index]);
-      this.editDialogVisible.set(true);
-    }
-  }
 }

tsconfig.json

@@ -3,6 +3,11 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "paths": {
+      "dockview-angular": [
+        "./dist/dockview-angular"
+      ]
+    },
     "outDir": "./dist/out-tsc",
     "strict": true,
     "noImplicitOverride": true,
@@ -23,5 +28,13 @@
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  }
+  },
+  "references": [
+    {
+      "path": "./projects/dockview-angular/tsconfig.lib.json"
+    },
+    {
+      "path": "./projects/dockview-angular/tsconfig.spec.json"
+    }
+  ]
 }