Stage 5.3.0 (#21)

* angular 21 related update done (#20)

Co-authored-by: Dikshit Moradiya <[email protected]>

* yml file update

---------

Co-authored-by: Dikshit Moradiya <[email protected]>

Author: ct-dixit

.github/workflows/prod.yml

@@ -22,10 +22,10 @@ jobs:
       - name: 🚚 Get latest code
         uses: actions/checkout@v4
 
-      - name: Use Node.js 22
+      - name: Use Node.js 24
         uses: actions/setup-node@v4
         with:
-          node-version: '22'
+          node-version: '24'
 
       - name: 🔨 Build Project
         run: |
@@ -39,6 +39,6 @@ jobs:
           SOURCE: 'dist/'
           REMOTE_HOST: 145.79.3.173
           REMOTE_USER: u965251139
-          REMOTE_PORT: "65002"
+          REMOTE_PORT: '65002'
           TARGET: domains/mantisdashboard.com/public_html/angular/free
           EXCLUDE: '/node_modules/'

angular.json

@@ -21,7 +21,7 @@
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": "",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantis-free-angular-admin-template",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "author": "CodedThemes",
   "license": "MIT",
   "scripts": {
@@ -16,43 +16,41 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "20.0.5",
-    "@angular/cdk": "20.0.4",
-    "@angular/common": "20.0.5",
-    "@angular/compiler": "20.0.5",
-    "@angular/core": "20.0.5",
-    "@angular/forms": "20.0.5",
-    "@angular/platform-browser": "20.0.5",
-    "@angular/platform-browser-dynamic": "20.0.5",
-    "@angular/router": "20.0.5",
-    "@ant-design/icons-angular": "20.0.0",
-    "@ng-bootstrap/ng-bootstrap": "19.0.0",
+    "@angular/animations": "21.0.3",
+    "@angular/cdk": "21.0.2",
+    "@angular/common": "21.0.3",
+    "@angular/compiler": "21.0.3",
+    "@angular/core": "21.0.3",
+    "@angular/forms": "21.0.3",
+    "@angular/platform-browser": "21.0.3",
+    "@angular/platform-browser-dynamic": "21.0.3",
+    "@angular/router": "21.0.3",
+    "@ant-design/icons-angular": "21.0.0",
+    "@ng-bootstrap/ng-bootstrap": "19.0.1",
     "@popperjs/core": "2.11.8",
-    "apexcharts": "4.7.0",
-    "bootstrap": "5.3.7",
-    "ng-apexcharts": "1.16.0",
+    "apexcharts": "5.3.6",
+    "bootstrap": "5.3.8",
+    "ng-apexcharts": "2.0.4",
     "ngx-scrollbar": "18.0.0",
     "rxjs": "~7.8.2",
-    "tslib": "2.8.1",
-    "zone.js": "~0.15.1"
+    "tslib": "2.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "20.0.4",
-    "@angular-eslint/builder": "20.1.1",
-    "@angular-eslint/eslint-plugin": "20.1.1",
-    "@angular-eslint/eslint-plugin-template": "20.1.1",
-    "@angular-eslint/schematics": "20.1.1",
-    "@angular-eslint/template-parser": "20.1.1",
-    "@angular/cli": "20.0.4",
-    "@angular/compiler-cli": "20.0.5",
-    "@eslint/eslintrc": "3.3.1",
-    "@eslint/js": "9.29.0",
-    "@types/node": "24.0.4",
-    "@typescript-eslint/eslint-plugin": "8.35.0",
-    "@typescript-eslint/parser": "8.35.0",
-    "eslint": "9.29.0",
-    "prettier": "3.6.1",
-    "typescript": "5.8.3"
-  },
-  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+    "@angular-devkit/build-angular": "21.0.2",
+    "@angular-eslint/builder": "21.1.0",
+    "@angular-eslint/eslint-plugin": "21.1.0",
+    "@angular-eslint/eslint-plugin-template": "21.1.0",
+    "@angular-eslint/schematics": "21.1.0",
+    "@angular-eslint/template-parser": "21.1.0",
+    "@angular/cli": "21.0.2",
+    "@angular/compiler-cli": "21.0.3",
+    "@eslint/eslintrc": "3.3.3",
+    "@eslint/js": "9.39.1",
+    "@types/node": "24.10.2",
+    "@typescript-eslint/eslint-plugin": "8.49.0",
+    "@typescript-eslint/parser": "8.49.0",
+    "eslint": "9.39.1",
+    "prettier": "3.7.4",
+    "typescript": "5.9.3"
+  }
 }

src/app/app-routing.module.ts

@@ -3,13 +3,13 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 // Project import
-import { AdminComponent } from './theme/layouts/admin-layout/admin-layout.component';
+import { AdminLayout } from './theme/layouts/admin-layout/admin-layout.component';
 import { GuestLayoutComponent } from './theme/layouts/guest-layout/guest-layout.component';
 
 const routes: Routes = [
   {
     path: '',
-    component: AdminComponent,
+    component: AdminLayout,
     children: [
       {
         path: '',

src/app/theme/layouts/admin-layout/admin-layout.component.ts

@@ -1,35 +1,40 @@
 // Angular import
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
 // Project import
-
+import { SharedModule } from '../../shared/shared.module';
 import { NavBarComponent } from './nav-bar/nav-bar.component';
 import { NavigationComponent } from './navigation/navigation.component';
-import { BreadcrumbComponent } from 'src/app/theme/shared/components/breadcrumb/breadcrumb.component';
+import { BreadcrumbComponent } from '../../shared/components/breadcrumb/breadcrumb.component';
+import { LayoutStateService } from '../../shared/service/layout-state.service';
 
 @Component({
   selector: 'app-admin',
-  imports: [CommonModule, BreadcrumbComponent, NavigationComponent, NavBarComponent, RouterModule],
+  imports: [CommonModule, SharedModule, NavigationComponent, NavBarComponent, RouterModule, BreadcrumbComponent],
   templateUrl: './admin-layout.component.html',
   styleUrls: ['./admin-layout.component.scss']
 })
-export class AdminComponent {
+export class AdminLayout {
+  private layoutState = inject(LayoutStateService);
+
   // public props
   navCollapsed: boolean;
-  navCollapsedMob: boolean;
+  windowWidth: number;
+
+  // Constructor
+  constructor() {
+    this.windowWidth = window.innerWidth;
+  }
+
+  get navCollapsedMob(): boolean {
+    return this.layoutState.navCollapsedMob();
+  }
 
   // public method
   navMobClick() {
-    if (this.navCollapsedMob && !document.querySelector('app-navigation.pc-sidebar')?.classList.contains('mob-open')) {
-      this.navCollapsedMob = !this.navCollapsedMob;
-      setTimeout(() => {
-        this.navCollapsedMob = !this.navCollapsedMob;
-      }, 100);
-    } else {
-      this.navCollapsedMob = !this.navCollapsedMob;
-    }
+    this.layoutState.toggleNavCollapsedMob();
     if (document.querySelector('app-navigation.pc-sidebar')?.classList.contains('navbar-collapsed')) {
       document.querySelector('app-navigation.pc-sidebar')?.classList.remove('navbar-collapsed');
     }
@@ -42,8 +47,6 @@ export class AdminComponent {
   }
 
   closeMenu() {
-    if (document.querySelector('app-navigation.pc-sidebar')?.classList.contains('mob-open')) {
-      document.querySelector('app-navigation.pc-sidebar')?.classList.remove('mob-open');
-    }
+    this.layoutState.closeNavCollapsedMob();
   }
 }

src/app/theme/layouts/admin-layout/nav-bar/nav-bar.component.html

@@ -1,7 +1,7 @@
 <header class="pc-header">
   <div class="header-wrapper">
     <div class="pc-mob-drp">
-      <app-nav-left [navCollapsed]="navCollapsed" (NavCollapse)="navCollapse()" (NavCollapsedMob)="navCollapseMob()"></app-nav-left>
+      <app-nav-left [navCollapsed]="navCollapsed" (NavCollapse)="navCollapse()" (NavCollapsedMob)="navCollapseMob()" />
     </div>
     <div>
       <app-nav-right />

src/app/theme/layouts/admin-layout/nav-bar/nav-bar.component.ts

@@ -1,25 +1,25 @@
 // angular import
-import { Component, output } from '@angular/core';
+import { Component, HostListener, output } from '@angular/core';
 
 // project import
-
+import { SharedModule } from 'src/app/theme/shared/shared.module';
 import { NavLeftComponent } from './nav-left/nav-left.component';
 import { NavRightComponent } from './nav-right/nav-right.component';
 
 @Component({
   selector: 'app-nav-bar',
-  imports: [NavLeftComponent, NavRightComponent],
+  imports: [SharedModule, NavLeftComponent, NavRightComponent],
   templateUrl: './nav-bar.component.html',
   styleUrls: ['./nav-bar.component.scss']
 })
 export class NavBarComponent {
   // public props
-  NavCollapse = output();
-  NavCollapsedMob = output();
+  readonly NavCollapse = output();
+  readonly NavCollapsedMob = output<void>();
 
-  navCollapsed: boolean;
+  navCollapsed;
   windowWidth: number;
-  navCollapsedMob: boolean;
+  navCollapsedMob;
 
   // Constructor
   constructor() {
@@ -35,7 +35,14 @@ export class NavBarComponent {
     }
   }
 
-  navCollapseMob() {
+  @HostListener('window:resize', ['$event'])
+  // eslint-disable-next-line
+  onResize(event: any): void {
+    this.windowWidth = event.target.innerWidth;
+    this.navCollapseMob();
+  }
+
+  navCollapseMob(): void {
     if (this.windowWidth < 1025) {
       this.NavCollapsedMob.emit();
     }

src/app/theme/layouts/admin-layout/nav-bar/nav-left/nav-left.component.html

@@ -1,7 +1,6 @@
 <ul class="list-unstyled">
   <li class="pc-h-item pc-sidebar-collapse">
     <a
-      href="javascript:"
       title="click to menu collapse"
       class="pc-head-link ms-0"
       [ngClass]="{ on: navCollapsed() }"
@@ -16,12 +15,12 @@
     </a>
   </li>
   <li class="pc-h-item pc-sidebar-popup">
-    <a href="javascript:" class="pc-head-link ms-0" id="mobile-collapse1" (click)="this.NavCollapsedMob.emit()">
+    <a class="pc-head-link ms-0" id="mobile-collapse1" (click)="navCollapsedMob()">
       <i antIcon type="menu-fold" theme="outline"></i>
     </a>
   </li>
   <li class="dropdown pc-h-item d-inline-flex d-md-none" ngbDropdown>
-    <a href="javascript:" class="pc-head-link dropdown-toggle arrow-none m-0" ngbDropdownToggle>
+    <a class="pc-head-link dropdown-toggle arrow-none m-0" ngbDropdownToggle>
       <i class="ti ti-search"></i>
     </a>
     <div class="dropdown-menu dropdowm-menu-end pc-h-dropdown drp-search" ngbDropdownMenu>

src/app/theme/layouts/admin-layout/nav-bar/nav-left/nav-left.component.ts

@@ -1,36 +1,37 @@
 // Angular import
-import { CommonModule } from '@angular/common';
-import { Component, inject, input, output } from '@angular/core';
+import { Component, input, output, inject } from '@angular/core';
 
 // project import
+import { SharedModule } from 'src/app/theme/shared/shared.module';
 
 // icons
-import { IconService, IconDirective } from '@ant-design/icons-angular';
+import { IconService } from '@ant-design/icons-angular';
 import { MenuUnfoldOutline, MenuFoldOutline, SearchOutline } from '@ant-design/icons-angular/icons';
 
 @Component({
   selector: 'app-nav-left',
-  imports: [IconDirective, CommonModule],
+  imports: [SharedModule],
   templateUrl: './nav-left.component.html',
   styleUrls: ['./nav-left.component.scss']
 })
 export class NavLeftComponent {
   private iconService = inject(IconService);
 
   // public props
-  navCollapsed = input.required<boolean>();
-  NavCollapse = output();
-  NavCollapsedMob = output();
-  windowWidth: number;
-
+  readonly navCollapsed = input.required<boolean>();
+  readonly NavCollapse = output();
+  readonly NavCollapsedMob = output();
   // Constructor
   constructor() {
-    this.windowWidth = window.innerWidth;
     this.iconService.addIcon(...[MenuUnfoldOutline, MenuFoldOutline, SearchOutline]);
   }
 
   // public method
   navCollapse() {
     this.NavCollapse.emit();
   }
+
+  navCollapsedMob() {
+    this.NavCollapsedMob.emit();
+  }
 }

src/app/theme/layouts/admin-layout/nav-bar/nav-right/nav-right.component.ts

@@ -1,11 +1,14 @@
 // angular import
-import { Component, inject, input, output } from '@angular/core';
+import { Component, output, inject, input } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 // project import
+import { SharedModule } from 'src/app/theme/shared/shared.module';
+
+// third party
 
 // icon
-import { IconService, IconDirective } from '@ant-design/icons-angular';
+import { IconService } from '@ant-design/icons-angular';
 import {
   BellOutline,
   SettingOutline,
@@ -25,23 +28,24 @@ import {
   ArrowRightOutline,
   GithubOutline
 } from '@ant-design/icons-angular/icons';
-import { NgbDropdownModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgScrollbarModule } from 'ngx-scrollbar';
 
 @Component({
   selector: 'app-nav-right',
-  imports: [IconDirective, RouterModule, NgScrollbarModule, NgbNavModule, NgbDropdownModule],
+  imports: [SharedModule, RouterModule],
   templateUrl: './nav-right.component.html',
   styleUrls: ['./nav-right.component.scss']
 })
 export class NavRightComponent {
   private iconService = inject(IconService);
 
+  // public props
   styleSelectorToggle = input<boolean>();
-  Customize = output();
+  readonly Customize = output();
   windowWidth: number;
   screenFull: boolean = true;
+  direction: string = 'ltr';
 
+  // constructor
   constructor() {
     this.windowWidth = window.innerWidth;
     this.iconService.addIcon(
@@ -52,6 +56,7 @@ export class NavRightComponent {
         SettingOutline,
         PhoneOutline,
         LogoutOutline,
+        EditOutline,
         UserOutline,
         EditOutline,
         ProfileOutline,