Update to ng 19 and add features

package.json

@@ -33,24 +33,24 @@
   },
   "homepage": "https://github.com/kerwin612/ngx-query-builder",
   "dependencies": {
-    "@angular/animations": "^18.1.0",
-    "@angular/cdk": "~18.1.0",
-    "@angular/common": "^18.1.0",
-    "@angular/compiler": "^18.1.0",
-    "@angular/core": "^18.1.0",
-    "@angular/forms": "^18.1.0",
-    "@angular/material": "~18.1.0",
-    "@angular/platform-browser": "^18.1.0",
-    "@angular/platform-browser-dynamic": "^18.1.0",
-    "@angular/router": "^18.1.0",
+    "@angular/animations": "^19.2.14",
+    "@angular/cdk": "~19.2.14",
+    "@angular/common": "19.2.14",
+    "@angular/compiler": "19.2.14",
+    "@angular/core": "19.2.14",
+    "@angular/forms": "19.2.14",
+    "@angular/material": "~19.2.14",
+    "@angular/platform-browser": "19.2.14",
+    "@angular/platform-browser-dynamic": "19.2.14",
+    "@angular/router": "19.2.14",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
+    "zone.js": "0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.1.0",
-    "@angular/cli": "^18.1.0",
-    "@angular/compiler-cli": "^18.1.0",
+    "@angular-devkit/build-angular": "19.2.14",
+    "@angular/cli": "19.2.14",
+    "@angular/compiler-cli": "19.2.14",
     "@types/jasmine": "~5.1.0",
     "angular-eslint": "18.1.0",
     "eslint": "^9.6.0",
@@ -60,7 +60,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^18.1.0",
+    "ng-packagr": "^19.2.2",
     "typescript": "~5.5.2",
     "typescript-eslint": "8.0.0-alpha.38"
   }

projects/ngx-query-builder-demo/src/app/app.component.html

@@ -1,5 +1,11 @@
 <main class="main">
   <div class="content">
+    <ngx-query-builder [formControl]='queryCtrl' [config]='currentConfig' [allowRuleset]='allowRuleset' [allowCollapse]='allowCollapse' [allowNot]='allowNot' [allowConvertToRuleset]='allowConvertToRuleset' [allowRuleUpDown]='allowRuleUpDown' [persistValueOnFieldChange]='persistValueOnFieldChange' [ruleName]='ruleName' [rulesetName]='rulesetName' [defaultRuleAttribute]="'name'" [hideButtons]='hideButtons'>
+      <ng-container *queryInput="let rule; type: 'textarea'; let getDisabledState=getDisabledState; let onChange=onChange">
+      <textarea class="text-input text-area" [(ngModel)]="rule.value" (ngModelChange)="onChange()" [disabled]=getDisabledState()
+                placeholder="Custom Textarea"></textarea>
+      </ng-container>
+    </ngx-query-builder>
     <div class="row panel" style="flex-direction: column">
       <div class="row">
         <label>Control Valid (Vanilla): {{ queryCtrl.valid }}</label>
@@ -8,30 +14,45 @@
         <label>Level Limit: <input type="number" class="num" value="0" (change)=changeLevelLimit($event)></label>
       </div>
       <div class="row">
-        <div>
-          <label><input type="checkbox" checked (change)=switchModes($event)>Entity Mode</label>
-        </div>
+        <div>
+          <label><input type="checkbox" (change)=switchModes($event)>Entity Mode</label>
+        </div>
         <div>
           <label><input type="checkbox" [(ngModel)]='allowRuleset'>Allow Ruleset</label>
         </div>
-        <div>
-          <label><input type="checkbox" [(ngModel)]='allowCollapse'>Allow Collapse</label>
-        </div>
-        <div>
-          <label><input type="checkbox" [(ngModel)]='persistValueOnFieldChange'>Persist Values on Field Change</label>
-        </div>
-        <div>
-          <label><input type="checkbox" (change)=changeDisabled($event)>Disabled</label>
-        </div>
+        <div>
+          <label><input type="checkbox" [(ngModel)]='allowCollapse'>Allow Collapse</label>
+        </div>
+        <div>
+          <label><input type="checkbox" [(ngModel)]='useCollapsedSummary' (change)='updateCollapsedSummary()'>Collapsed Summary</label>
+        </div>
+        <div>
+          <label><input type="checkbox" [(ngModel)]='allowNot'>Allow Not</label>
+        </div>
+        <div>
+          <label><input type="checkbox" [(ngModel)]='persistValueOnFieldChange'>Persist Values on Field Change</label>
+        </div>
+        <div>
+          <label><input type="checkbox" [(ngModel)]='allowConvertToRuleset'>Allow Convert To Ruleset</label>
+        </div>
+        <div>
+          <label><input type="checkbox" [(ngModel)]='useSavedRulesets' (change)='updateNamedRulesetsUsage()'>Saved Rulesets</label>
+        </div>
+        <div>
+          <label><input type="checkbox" [(ngModel)]='allowRuleUpDown'>Allow Rule Up/Down</label>
+        </div>
+        <div>
+          <label><input type="checkbox" [(ngModel)]='hideButtons'>Hide Buttons</label>
+        </div>
+        <div>
+          <label><input type="checkbox" [(ngModel)]='useExpressionNames' (change)='toggleExpressionNames()'>Expression</label>
+        </div>
+        <div>
+          <label><input type="checkbox" (change)=changeDisabled($event)>Disabled</label>
+        </div>
       </div>
 
-      <textarea class="output">{{query | json}}</textarea>
-    </div>
-    <ngx-query-builder [formControl]='queryCtrl' [config]='currentConfig' [allowRuleset]='allowRuleset' [allowCollapse]='allowCollapse' [persistValueOnFieldChange]='persistValueOnFieldChange'>
-      <ng-container *queryInput="let rule; type: 'textarea'; let getDisabledState=getDisabledState">
-      <textarea class="text-input text-area" [(ngModel)]="rule.value" [disabled]=getDisabledState()
-                placeholder="Custom Textarea"></textarea>
-      </ng-container>
-    </ngx-query-builder>
-  </div>
-</main>
+    <textarea class="output" [title]="queryTitle" [ngClass]="queryTextState" [(ngModel)]="queryText" (ngModelChange)="updateQuery($event)"></textarea>
+    </div>
+  </div>
+</main>

projects/ngx-query-builder-demo/src/app/app.component.less

@@ -1,15 +1,11 @@
 .main {
   padding: 10px;
 
-  .content {
-    display: flex;
-    gap: 20px;
-    justify-content: center;
-  }
-
-  ngx-query-builder, .panel {
-    flex: 1;
-  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
 }
 
 .row {
@@ -32,6 +28,16 @@
   height: 100px;
 }
 
-.output {
-  flex: 1;
-}
+.output {
+  height: 500px;
+  resize: both;
+  overflow: auto;
+}
+
+.output.invalid-query {
+  background-color: #f8d7da;
+}
+
+.output.invalid-json {
+  background-color: #f2bcbc;
+}