AW-6526 update angular 21

projects/common/package.json

@@ -1,25 +1,42 @@
 {
   "name": "@farmmaps/common",
-  "version": "2.1.0",
+  "version": "21.1.0",
   "publishConfig": {
     "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
   },
   "peerDependencies": {
-    "@ng-bootstrap/ng-bootstrap": "^19.0.0",
-    "@angular/common": "19.2.18",
-    "@angular/core": "19.2.18",
-    "@angular/forms": "19.2.18",
-    "@ngrx/effects": "^19.0.0",
-    "@ngrx/router-store": "^19.0.0",
-    "@ngrx/store": "^19.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
+    "@angular/common": "21.1.0",
+    "@angular/core": "21.1.0",
+    "@angular/forms": "21.1.0",
+    "@ngrx/effects": "21.0.1",
+    "@ngrx/router-store": "21.0.1",
+    "@ngrx/store": "21.0.1",
     "tassign": "^1.0.0",
     "bootstrap": "^5.3.3",
-    "@microsoft/signalr": "^3.1.16",
+    "@microsoft/signalr": "10.0.0",
     "ngx-uploadx": "^6.2.0",
-    "angular-oauth2-oidc": "^17.0.2",
+    "angular-oauth2-oidc": "20.0.2",
     "moment": "^2.29.4",
-    "ngx-avatars": "^1.8.0",
-    "ngx-image-cropper": "^7.0.0",
+    "ngx-avatars": "1.10.1",
+    "ngx-image-cropper": "9.1.6",
     "ngx-clipboard": "^16.0.0"
+  },
+  "overrides": {
+    "ngx-avatars": {
+      "@angular/common": "$@angular/common",
+      "@angular/core": "$@angular/core"
+    },
+    "ngx-clipboard": {
+      "@angular/core": "$@angular/core"
+    },
+    "ngx-image-cropper": {
+      "@angular/common": "$@angular/common",
+      "@angular/core": "$@angular/core"
+    }
+    ,
+    "ngx-uploadx": {
+      "@angular/core": "$@angular/core"
+    }
   }
-}
+}

projects/common/src/fm/common.module.ts

@@ -20,7 +20,7 @@ import { MODULE_NAME } from './module-name';
 
 //components
 import { AvatarModule } from 'ngx-avatars';
-import { ImageCropperModule } from 'ngx-image-cropper';
+import { ImageCropperComponent } from 'ngx-image-cropper';
 import * as commonActions from './actions/app-common.actions';
 import { AppMenuComponent } from './components/app-menu/app-menu.component';
 import { AppComponent } from './components/app/app.component';
@@ -34,7 +34,6 @@ import { HasClaimDirective } from './components/has-claim/has-claim.directive';
 import { HasPackageDirective } from './components/has-package/has-package.directive';
 import { HasRoleDirective } from './components/has-role/has-role.directive';
 import { HelpMenuComponent } from './components/help-menu/help-menu.component';
-import { SettingMenuComponent } from './components/setting-menu/setting-menu.component';
 import { ItemLinkComponent } from './components/item-link/item-link.component';
 import { MenuBackgroundComponent } from './components/menu-background/menu-background.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
@@ -43,6 +42,7 @@ import { NotificationMenuComponent } from './components/notification-menu/notifi
 import { PackageExistsDirective } from './components/package-exists/package-exists.directive';
 import { ResumableFileUploadComponent } from './components/resumable-file-upload/resumable-file-upload.component';
 import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
+import { SettingMenuComponent } from './components/setting-menu/setting-menu.component';
 import { SidePanelComponent } from './components/side-panel/side-panel.component';
 import { TagInputComponent } from './components/tag-input/tag-input.component';
 import { ThumbnailComponent } from './components/thumbnail/thumbnail.component';
@@ -75,12 +75,12 @@ import { SecureOAuthStorage } from './shared/secureOAuthStorage';
 export const FM_COMMON_STARTPAGE = new InjectionToken<string>('fm-common-startpage');
 
 export {
-  Alert, AppComponent, AuthCallbackComponent, AuthConfigFactory, AvatarComponent, BackButtonComponent, commonActions,
-  commonReducers, EditImageModalComponent,
-  GradientComponent,
-  GradientSelectComponent, HasClaimDirective, HasPackageDirective, HasRoleDirective, IAuthconfigFactory, IColor, IDataLayer, IEventMessage, IGradientstop, IItem, IItemLinkType, IItemTask, IItemType, IItemTypes, IJsonline, IListItem, IPackage,
-  IPackages, IQueryState, ISenMLItem, Item, ItemLinkComponent, ItemTask, ITypeaheadItem, IUrlType, IUser, MenuBackgroundComponent, NotFoundComponent,
-  NotImplementedComponent, PackageExistsDirective, ResumableFileUploadComponent, SafePipe, SecureOAuthStorage, SessionClearedComponent, SidePanelComponent, TagInputComponent, ThumbnailComponent, TimespanComponent, UserMenuComponent, WeatherCurrentObservation
+    Alert, AppComponent, AuthCallbackComponent, AuthConfigFactory, AvatarComponent, BackButtonComponent, commonActions,
+    commonReducers, EditImageModalComponent,
+    GradientComponent,
+    GradientSelectComponent, HasClaimDirective, HasPackageDirective, HasRoleDirective, IAuthconfigFactory, IColor, IDataLayer, IEventMessage, IGradientstop, IItem, IItemLinkType, IItemTask, IItemType, IItemTypes, IJsonline, IListItem, IPackage,
+    IPackages, IQueryState, ISenMLItem, Item, ItemLinkComponent, ItemTask, ITypeaheadItem, IUrlType, IUser, MenuBackgroundComponent, NotFoundComponent,
+    NotImplementedComponent, PackageExistsDirective, ResumableFileUploadComponent, SafePipe, SecureOAuthStorage, SessionClearedComponent, SidePanelComponent, TagInputComponent, ThumbnailComponent, TimespanComponent, UserMenuComponent, WeatherCurrentObservation
 };
 
 @NgModule({ declarations: [
@@ -151,6 +151,6 @@ export {
         UploadxModule,
         ClipboardModule,
         AvatarModule,
-        ImageCropperModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
+        ImageCropperComponent], providers: [provideHttpClient(withInterceptorsFromDi())] })
 export class AppCommonModule {
 }

projects/common/src/fm/components/app-menu/app-menu.component.html

@@ -1,5 +1,5 @@
 <div>
-    <div   (click)="toggle($event)" class="rounded-circle menu-button hidden"  [ngClass]="{'hidden':!user || noContent}">
+    <div   (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user || noContent}">
         <span i18n-title title="Apps"><i class="fas fa-th" aria-hidden="true"></i></span>
         <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">                                     
             <router-outlet name="app-menu" (activate)="activateRoute()" (deactivate)="deActivateRoute()"></router-outlet>            

projects/common/src/fm/components/app-menu/app-menu.component.ts

@@ -1,9 +1,8 @@
-import { Component, OnInit, Input } from '@angular/core';
-
-import { IUser } from '../../models/user';
-import {Store} from '@ngrx/store';
-import * as appReducers from '../../reducers/app-common.reducer';
+import { Component, Input, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
 import * as appActions from '../../actions/app-common.actions';
+import { IUser } from '../../models/user';
+import * as appReducers from '../../reducers/app-common.reducer';
 
 @Component({
     selector: 'fm-app-menu',
@@ -34,5 +33,4 @@ export class AppMenuComponent implements OnInit {
   deActivateRoute() {
     this.noContent=true;
   }
-
 }

projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.scss

@@ -45,7 +45,7 @@ div.card-header span.fa {
 
         .upload-file .progress-container .progress-bar {
             display: block;
-            background-color: color("green");
+            background-color: green;
             width: 0%;
             height: 100%;
         }
@@ -84,7 +84,7 @@ div.card-header span.fa {
   }
 
   .upload-file.done > div > span.fa-check {
-    color: color("green");
+    color: green;
     width: 20px;
     display: inline-block;
     vertical-align: middle;