Merge branch 'johanrg-upgrade-ng18'

ashish-chopra · Sep 20, 2024 · a9476f3 · a9476f3
2 parents 0ee92d1 + 23b5865
commit a9476f3
Show file tree

Hide file tree

Showing 10 changed files with 6,470 additions and 8,300 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -16,9 +16,9 @@
         "createDefaultProgram": true
       },
       "extends": [
-        "plugin:@angular-eslint/ng-cli-compat",
-        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
-        "plugin:@angular-eslint/template/process-inline-templates"
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended"
       ],
       "rules": {
         "@typescript-eslint/consistent-type-definitions": "error",

diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ In version `v5.0.0`, we introduced markers, ticks and background opacity for gau
 |15.x.x | 7.0.0 | 
 |16.x.x | 8.0.0 |
 |17.x.x | 9.0.0 |
-
+|18.x.x | 10.0.0 |
 #### Step 1: Install npm module
 
 For latest version use the command: 

diff --git a/apps/demo/src/app/app.module.ts b/apps/demo/src/app/app.module.ts
@@ -9,18 +9,18 @@ import { NgxGaugeModule } from 'ngx-gauge';
 import { PlaygroundComponent } from './playground/playground.component';
 import { DemosComponent } from './demos/demos.component';
 
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatLegacySliderModule as MatSliderModule } from '@angular/material/legacy-slider';
-import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { FormsModule } from '@angular/forms';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import {MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatTabsModule } from '@angular/material/tabs';
 
 
 @NgModule({
@@ -33,18 +33,18 @@ import {MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-ta
   ],
   imports: [
     BrowserModule,
-    BrowserAnimationsModule, 
+    BrowserAnimationsModule,
     NgxGaugeModule,
     HighlightModule,
     FormsModule,
     MatFormFieldModule,
     MatInputModule,
     MatButtonModule,
-    MatCheckboxModule, 
+    MatCheckboxModule,
     MatToolbarModule,
-    MatSelectModule, 
+    MatSelectModule,
     MatSliderModule,
-    MatSlideToggleModule, 
+    MatSlideToggleModule,
     MatCardModule,
     MatTabsModule
   ],

diff --git a/apps/demo/src/app/getting-started/getting-started.component.html b/apps/demo/src/app/getting-started/getting-started.component.html
@@ -1,7 +1,7 @@
 <section class="jumbotron jumbotron-fluid">
   <div class="container">
     <h1 class="custom-heading display-2">ngx-gauge
-      <span class="badge badge-secondary">5.0.0</span>
+      <span class="badge badge-secondary">10.0.0</span>
     </h1>
     <p class="lead">A highly customizable gauge component for Angular apps and dashboards. </p>
     <br>
@@ -19,7 +19,7 @@ <h1>Getting Started</h1>
     ngx-gauge is a highly customizable gauge UI component for Angular apps and dashboards.
     It provides multitude of options to customize as per your needs.
   </p>
-  
+
   <h4>Installation</h4>
   <p> Installing and setup is super easy 3-step process. </p>
   <p><b>Step 1: Install npm module</b></p>
@@ -37,4 +37,4 @@ <h4>Installation</h4>
   <pre [highlight]="step3Install"></pre>
   <pre [highlight]="step3Install2"></pre>
 
-</div>
+</div>
diff --git a/apps/demo/src/app/getting-started/getting-started.component.ts b/apps/demo/src/app/getting-started/getting-started.component.ts
@@ -25,7 +25,7 @@ export class GettingStartedComponent implements OnInit {
       imports: [NgxGaugeModule],
       ...
   })
-  export class AppModule { }  
+  export class AppModule { }
   `;
 
   step3Install: string = `import { Component } from '@angular/core';
@@ -35,16 +35,16 @@ export class GettingStartedComponent implements OnInit {
       templateUrl: 'app.html'
   })
   export class AppComponent {
-      
+
       gaugeType = "semi";
       gaugeValue = 28.3;
       gaugeLabel = "Speed";
       gaugeAppendText = "km/hr";
   }`;
 
-  step3Install2 = `<ngx-gauge [type]="gaugeType" 
-           [value]="gaugeValue" 
-           [label]="gaugeLabel"  
+  step3Install2 = `<ngx-gauge [type]="gaugeType"
+           [value]="gaugeValue"
+           [label]="gaugeLabel"
            [append]="gaugeAppendText">
 </ngx-gauge>`;
 }
diff --git a/apps/demo/src/app/playground/playground.component.html b/apps/demo/src/app/playground/playground.component.html
@@ -28,15 +28,17 @@ <h1>Playground - <small>Get your hands dirty!</small> </h1>
             </div>
             <mat-form-field class="mat-block">
                 <mat-label>Size</mat-label>
-                <mat-slider min="100" max="500" class="mat-primary" [(ngModel)]="size">
+                <mat-slider min="100" max="500" class="mat-primary">
+                  <input matSliderThumb [(ngModel)]="size">
                 </mat-slider>
                 <div>
                     <input matInput type="number" [(ngModel)]="size">
                 </div>
             </mat-form-field>
             <mat-form-field class="mat-block">
                 <mat-label>Thick</mat-label>
-                <mat-slider min="1" max="50" class="mat-primary" [(ngModel)]="thick">
+                <mat-slider min="1" max="50" class="mat-primary">
+                  <input matSliderThumb [(ngModel)]="thick">
                 </mat-slider>
                 <div>
                     <input matInput type="number" [(ngModel)]="thick">
@@ -126,4 +128,4 @@ <h1>Playground - <small>Get your hands dirty!</small> </h1>
         </section>
     </div>
     <div class="spacer"></div>
-</div>
+</div>
diff --git a/apps/demo/src/app/playground/playground.component.ts b/apps/demo/src/app/playground/playground.component.ts
@@ -16,10 +16,10 @@ export class PlaygroundComponent implements OnInit {
   value: number = 28.3;
   thick: number = 20;
   size: number = 300;
-  type: any = "semi";
-  cap: any = "round";
+  type: string = "semi";
+  cap: string = "round";
   label: string = "Speed";
-  prepend: any = '';
+  prepend: string = '';
   append: any = 'km/hr';
   min: number = 0;
   max: number = 100;