Angular 18 upgrade (cont). Spring Flo 0.14.0

package.json

@@ -32,16 +32,16 @@
     "@angular/platform-browser": "~18.2.13",
     "@angular/platform-browser-dynamic": "~18.2.13",
     "@angular/router": "~18.2.13",
-    "@types/backbone": "1.3.42",
+    "@types/backbone": "^1.4.22",
     "@types/codemirror": "0.0.64",
     "@types/jasmine": "~3.10.0",
     "@types/jquery": "3.5.4",
     "@types/lodash": "^4.14.191",
     "@types/node": "^12.11.1",
     "@types/resize-observer-browser": "^0.1.3",
-    "codemirror": "5.65.12",
-    "jointjs": "3.4.2",
-    "jquery": "^3.6.3",
+    "codemirror": "5.65.18",
+    "jointjs": "3.7.7",
+    "jquery": "^3.7.1",
     "lodash": "^4.17.21",
     "ng-packagr": "^18.2.1",
     "rxjs": "~7.8.0",

projects/demo/app/app.component.ts

@@ -12,7 +12,6 @@ import 'codemirror/mode/clike/clike';
 import 'codemirror/addon/lint/javascript-lint';
 import {PropertiesEditorService} from './properties-editor.service';
 import {dia} from 'jointjs';
-import {setTheme} from "ngx-bootstrap/utils";
 
 @Component({
   selector: 'demo-app',
@@ -37,7 +36,6 @@ export class AppComponent {
     this.renderer = new Renderer();
     this.editor = new Editor(propertiesEditor);
     this.dsl = '';
-    setTheme('bs5'); // or 'bs4'
   }
 
   arrangeAll() {

projects/flo/editor/editor.component.ts

@@ -614,7 +614,7 @@ export class EditorComponent implements OnInit, OnDestroy {
    * @param domNode DOM node to hide
    * @returns
    */
-  private _hideNode(domNode: HTMLElement): VisibilityState {
+  private _hideNode(domNode: Element & ElementCSSInlineStyle): VisibilityState {
     let oldVisibility: VisibilityState = {
       visibility: domNode.style ? domNode.style.display : undefined,
       children: []
@@ -634,7 +634,7 @@ export class EditorComponent implements OnInit, OnDestroy {
    * @param domNode DOM node to restore visibility of
    * @param oldVisibility original visibility parameter
    */
-  _restoreNodeVisibility(domNode: HTMLElement, oldVisibility: VisibilityState) {
+  _restoreNodeVisibility(domNode: Element & ElementCSSInlineStyle, oldVisibility: VisibilityState) {
     if (domNode.style) {
       domNode.style.display = oldVisibility.visibility;
     }
@@ -642,8 +642,8 @@ export class EditorComponent implements OnInit, OnDestroy {
     for (let i = 0; i < domNode.childNodes.length; i++) {
       if (j < oldVisibility.children.length) {
         let node = domNode.children.item(i);
-        if (node instanceof HTMLElement) {
-          this._restoreNodeVisibility(<HTMLElement> node, oldVisibility.children[j++]);
+        if (node instanceof Element) {
+          this._restoreNodeVisibility(node as any, oldVisibility.children[j++]);
         }
       }
     }

projects/flo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spring-flo",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Library for quickly building text DSL visualization diagram editor",
   "author": "Andy Clement, Alex Boyko",
   "license": "Apache-2.0",
@@ -9,16 +9,16 @@
     "url": "https://github.com/spring-projects/spring-flo.git"
   },
   "dependencies": {
-    "codemirror": "5.65.12",
-    "jointjs": "3.4.2",
-    "jquery": "^3.6.3",
+    "codemirror": "5.65.18",
+    "jointjs": "3.7.7",
+    "jquery": "^3.7.1",
     "lodash": "^4.17.21",
     "ts-disposables": "2.2.3"
   },
   "peerDependencies": {
-    "@angular/core": ">=15.0.0 <17.0.0",
-    "@angular/forms": ">=15.0.0 < 17.0.0",
-    "@angular/common": ">=15.0.0 <17.0.0",
+    "@angular/core": ">=18.0.0 <20.0.0",
+    "@angular/forms": ">=18.0.0 <20.0.0",
+    "@angular/common": ">=18.0.0 <20.0.0",
     "rxjs": ">=7.0.0 <8.0.0"
   }
 }

projects/flo/properties/df.property.component.html

@@ -26,11 +26,11 @@
 
       <select *ngSwitchCase="types.SELECT" class="df-property-control" [id]="model.id"
              [formControlName]="model.id" [(ngModel)]="model.value">
-        <option *ngFor="let o of model['options']" [ngValue]="o.value">{{o.name}}</option>
+        <option *ngFor="let o of selectControlModel.options" [ngValue]="o.value">{{o.name}}</option>
       </select>
 
       <code-editor *ngSwitchCase="types.CODE" class="df-property-control" [id]="model.id"
-              [formControlName]="model.id" [language]="model['language']" [(ngModel)]="model.value" [line-numbers]="true"
+              [formControlName]="model.id" [language]="codeControlModel.language" [(ngModel)]="model.value" [line-numbers]="true"
               scrollbar-style="simple" [placeholder]="model.defaultValue || 'Enter code snippet...'" [overview-ruler]="true">
       </code-editor>
 

projects/flo/properties/df.property.component.ts

@@ -29,4 +29,12 @@ export class DynamicFormPropertyComponent {
       .filter(e => this.control.errors && this.control.errors[e.id]);
   }
 
+  get selectControlModel(): Properties.SelectControlModel {
+    return this.model as Properties.SelectControlModel;
+  }
+
+  get codeControlModel(): Properties.CodeControlModel<any> {
+    return this.model as Properties.CodeControlModel<any>;
+  }
+
 }