Update to angular 21, switch to signal forms for column editor

angular.json

@@ -91,32 +91,6 @@
           }
         }
       }
-    },
-    "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,32 +10,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.3.6",
+    "@angular/animations": "^21.0.5",
-    "@angular/common": "^20.3.6",
+    "@angular/common": "^21.0.5",
-    "@angular/compiler": "^20.3.6",
+    "@angular/compiler": "^21.0.5",
-    "@angular/core": "^20.3.6",
+    "@angular/core": "^21.0.5",
-    "@angular/forms": "^20.3.6",
+    "@angular/forms": "^21.0.5",
-    "@angular/platform-browser": "^20.3.6",
+    "@angular/platform-browser": "^21.0.5",
-    "@angular/platform-browser-dynamic": "^20.3.6",
+    "@angular/platform-browser-dynamic": "^21.0.5",
-    "@angular/router": "^20.3.6",
+    "@angular/router": "^21.0.5",
     "@duckdb/duckdb-wasm": "^1.30.0",
-    "@primeng/themes": "20.2.0",
+    "@primeng/themes": "^21.0.0",
     "@tailwindcss/postcss": "^4.1.15",
-    "dockview-core": "^4.9.0",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "primeicons": "^7.0.0",
-    "primeng": "20.2.0",
+    "primeng": "^21.0.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": "^20.3.6",
+    "@angular/build": "^21.0.3",
-    "@angular/cli": "^20.3.6",
+    "@angular/cli": "^21.0.3",
-    "@angular/compiler-cli": "^20.3.6",
+    "@angular/compiler-cli": "^21.0.5",
     "@tauri-apps/cli": "^2.9.0",
     "@types/jasmine": "~5.1.12",
     "jasmine-core": "~5.12.0",
@@ -44,7 +43,7 @@
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^20.3.0",
+    "postcss": "^8.5.3",
     "typescript": "~5.9.3"
   }
-}
+}

projects/dockview-angular/README.md

@@ -1,63 +0,0 @@
-# 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

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

projects/dockview-angular/package.json

@@ -1,12 +0,0 @@
-{
-  "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

@@ -1,23 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

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

projects/dockview-angular/tsconfig.lib.json

@@ -1,18 +0,0 @@
-/* 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

@@ -1,11 +0,0 @@
-/* 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

@@ -1,14 +0,0 @@
-/* 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,15 +1,36 @@
-import { ChangeDetectionStrategy, Component, model } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  model,
+  signal,
+} from '@angular/core';
 import { AccordionModule } from 'primeng/accordion';
 import { Column } from '../duckdb.service';
-import { Checkbox, CheckboxChangeEvent } from 'primeng/checkbox';
+import { Checkbox } 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: [AccordionModule, Checkbox, FormsModule, Button, Tooltip],
+  imports: [
+    AccordionModule,
+    Checkbox,
+    FormsModule,
+    Button,
+    Tooltip,
+    Dialog,
+    FloatLabel,
+    InputText,
+    Select,
+    Field,
+  ],
   template: `
     <p-accordion [value]="0">
       <p-accordion-panel [value]="0">
@@ -45,12 +66,43 @@ import { Tooltip } from 'primeng/tooltip';
         </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) {
@@ -65,5 +117,11 @@ 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,11 +3,6 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "paths": {
-      "dockview-angular": [
-        "./dist/dockview-angular"
-      ]
-    },
     "outDir": "./dist/out-tsc",
     "strict": true,
     "noImplicitOverride": true,
@@ -28,13 +23,5 @@
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  },
+  }
-  "references": [
-    {
-      "path": "./projects/dockview-angular/tsconfig.lib.json"
-    },
-    {
-      "path": "./projects/dockview-angular/tsconfig.spec.json"
-    }
-  ]
 }