Update tree listing component to latest version

package-lock.json

@@ -1825,6 +1825,28 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@circlon/angular-tree-component": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@circlon/angular-tree-component/-/angular-tree-component-10.0.0.tgz",
+      "integrity": "sha512-3dRWLbOdMfIuvZjX6AMHmvzPtqhNFECMWMpNVXrZfZtTAa0n+Y4lxbuLST85q5QiedBZuC720p/7kkZ78PJ+iw==",
+      "requires": {
+        "lodash-es": "^4.17.15",
+        "mobx": "~4.14.1",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "mobx": {
+          "version": "4.14.1",
+          "resolved": "https://registry.npmjs.org/mobx/-/mobx-4.14.1.tgz",
+          "integrity": "sha512-Oyg7Sr7r78b+QPYLufJyUmxTWcqeQ96S1nmtyur3QL8SeI6e0TqcKKcxbG+sVJLWANhHQkBW/mDmgG5DDC4fdw=="
+        },
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
+    },
     "@ionic-native/core": {
       "version": "5.28.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/core/-/core-5.28.0.tgz",
@@ -2485,15 +2507,6 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
-    "angular-tree-component": {
-      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/angular-tree-component/-/angular-tree-component-8.5.6.tgz",
-      "integrity": "sha512-cxNem6872diZz9kIGqrjSJbKt0P3WSq9wTqZIeVJ8zsddI4Y6ShAVZlZNXUMRyJq246c9pJ6JJEAOzKVLk9xgA==",
-      "requires": {
-        "lodash": "^4.17.11",
-        "mobx": "^4.15.1"
-      }
-    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -7943,7 +7956,13 @@
     "lodash": {
       "version": "4.17.20",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
+      "dev": true
+    },
+    "lodash-es": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
     },
     "lodash.clonedeep": {
       "version": "4.5.0",
@@ -8522,11 +8541,6 @@
         "minimist": "^1.2.5"
       }
     },
-    "mobx": {
-      "version": "4.15.7",
-      "resolved": "https://registry.npmjs.org/mobx/-/mobx-4.15.7.tgz",
-      "integrity": "sha512-X4uQvuf2zYKHVO5kRT5Utmr+J9fDnRgxWWnSqJ4oiccPTQU38YG+/O3nPmOhUy4jeHexl7XJJpWDBgEnEfp+8w=="
-    },
     "moment": {
       "version": "2.29.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",

package.json

@@ -19,13 +19,13 @@
     "@angular/platform-browser": "~10.1.5",
     "@angular/platform-browser-dynamic": "~10.1.5",
     "@angular/router": "~10.1.5",
+    "@circlon/angular-tree-component": "^10.0.0",
     "@ionic-native/core": "^5.0.0",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^5.3.5",
     "ag-grid-angular": "^22.1.1",
     "ag-grid-community": "^22.1.1",
-    "angular-tree-component": "^8.5.2",
     "core-js": "^2.5.4",
     "moment": "^2.24.0",
     "ngx-monaco-editor": "^8.1.1",

src/app/app.component.ts

@@ -5,7 +5,7 @@ import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { ApiService } from './service/api.service';
 import { Router } from '@angular/router';
-import {TREE_ACTIONS, TreeComponent} from 'angular-tree-component';
+import {TREE_ACTIONS, TreeComponent} from '@circlon/angular-tree-component';
 import { Observable } from 'rxjs';
 import {OptionPickerComponent} from './components/option-picker/option-picker.component';
 import {OptionMenuComponent} from './components/option-menu/option-menu.component';
@@ -93,8 +93,10 @@ export class AppComponent implements OnInit {
   }
 
   onFilterChange($event) {
-    const value = $event.detail.value;
+    const value = $event.detail.value.toLowerCase();
-    this.menuTree.treeModel.filterNodes(value, true);
+    this.menuTree.treeModel.filterNodes(node => {
+      return node.data.name.toLowerCase().includes(value);
+    });
   }
 
   async onNodeMenuClick($event) {

src/app/app.module.ts

@@ -10,7 +10,7 @@ import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { HttpClientModule } from '@angular/common/http';
 import { ComponentsModule } from './components/components.module';
-import { TreeModule } from 'angular-tree-component';
+import { TreeModule } from '@circlon/angular-tree-component';
 import {AgGridModule} from 'ag-grid-angular';
 import {MonacoEditorModule} from 'ngx-monaco-editor';
 import { APP_BASE_HREF, PlatformLocation } from '@angular/common';
@@ -39,7 +39,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     AppRoutingModule,
     HttpClientModule,
     ComponentsModule,
-    TreeModule.forRoot(),
+    TreeModule,
     AgGridModule.withComponents([]),
     MonacoEditorModule.forRoot(),
   ],

src/global.scss

@@ -25,7 +25,7 @@
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
 
-@import "~angular-tree-component/dist/angular-tree-component.css";
+@import '~@circlon/angular-tree-component/css/angular-tree-component.css';
 @import "~ag-grid-community/dist/styles/ag-grid.css";
 @import "~ag-grid-community/dist/styles/ag-theme-balham.css";