package upgrade done (#10) (#11)

* package upgrade done (#10)

* yml file update

.github/workflows/prod.yml

@@ -22,15 +22,15 @@ jobs:
       - name: 🚚 Get latest code
         uses: actions/checkout@v3
 
-      - name: Use Node.js 18
+      - name: Use Node.js 20
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20.x'
 
       - name: 🔨 Build Project
         run: |
-          npm i --legacy-peer-deps
-          npm run build-prod
+          yarn
+          yarn build-prod
       - name: 📂 Deploy to Server
         uses: easingthemes/ssh-deploy@main
         env:

.prettierrc

@@ -5,6 +5,6 @@
   "trailingComma": "none",
   "tabWidth": 2,
   "useTabs": false,
-  "htmlWhitespaceSensitivity": "strict",
+  "htmlWhitespaceSensitivity": "ignore",
   "bracketSameLine": false
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantis-free-angular-admin-template",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "author": "CodedThemes",
   "license": "MIT",
   "scripts": {
@@ -15,47 +15,47 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^18.0.0-next.3",
-    "@angular/cdk": "^18.0.0-next.3",
-    "@angular/common": "^18.0.0-next.3",
-    "@angular/compiler": "^18.0.0-next.3",
-    "@angular/core": "^18.0.0-next.3",
-    "@angular/forms": "^18.0.0-next.3",
-    "@angular/platform-browser": "^18.0.0-next.3",
-    "@angular/platform-browser-dynamic": "^18.0.0-next.3",
-    "@angular/router": "^18.0.0-next.3",
-    "@ant-design/icons-angular": "^17.0.0",
-    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+    "@angular/animations": "^18.0.5",
+    "@angular/cdk": "^18.0.5",
+    "@angular/common": "^18.0.5",
+    "@angular/compiler": "^18.0.5",
+    "@angular/core": "^18.0.5",
+    "@angular/forms": "^18.0.5",
+    "@angular/platform-browser": "^18.0.5",
+    "@angular/platform-browser-dynamic": "^18.0.5",
+    "@angular/router": "^18.0.5",
+    "@ant-design/icons-angular": "^18.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^17.0.0",
     "@popperjs/core": "^2.11.8",
-    "apexcharts": "^3.45.2",
-    "bootstrap": "^5.3.2",
-    "ng-apexcharts": "^1.8.0",
-    "ngx-scrollbar": "^13.0.3",
+    "apexcharts": "^3.49.2",
+    "bootstrap": "^5.3.3",
+    "ng-apexcharts": "^1.11.0",
+    "ngx-scrollbar": "^15.0.1",
     "rxjs": "~7.8.1",
-    "tslib": "^2.6.2",
-    "zone.js": "~0.14.4"
+    "tslib": "^2.6.3",
+    "zone.js": "~0.14.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.0-next.3",
-    "@angular-eslint/builder": "17.3.0",
-    "@angular-eslint/eslint-plugin": "17.3.0",
-    "@angular-eslint/eslint-plugin-template": "17.3.0",
-    "@angular-eslint/schematics": "17.3.0",
-    "@angular-eslint/template-parser": "17.3.0",
-    "@angular/cli": "~18.0.0-next.3",
-    "@angular/compiler-cli": "^18.0.0-next.3",
+    "@angular-devkit/build-angular": "^18.0.6",
+    "@angular-eslint/builder": "18.0.1",
+    "@angular-eslint/eslint-plugin": "18.0.1",
+    "@angular-eslint/eslint-plugin-template": "18.0.1",
+    "@angular-eslint/schematics": "18.0.1",
+    "@angular-eslint/template-parser": "18.0.1",
+    "@angular/cli": "~18.0.6",
+    "@angular/compiler-cli": "^18.0.5",
     "@types/jasmine": "~5.1.4",
-    "@types/node": "^20.12.7",
-    "@typescript-eslint/eslint-plugin": "7.7.1",
-    "@typescript-eslint/parser": "7.7.1",
-    "eslint": "^8.56.0",
+    "@types/node": "^20.14.9",
+    "@typescript-eslint/eslint-plugin": "7.14.1",
+    "@typescript-eslint/parser": "7.14.1",
+    "eslint": "^9.5.0",
     "jasmine-core": "~5.1.2",
     "karma": "~6.4.3",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "prettier": "3.2.5",
+    "prettier": "3.3.2",
     "typescript": "5.4"
   }
 }

src/app/demo/authentication/login/login.component.html

@@ -37,7 +37,7 @@ <h5 class="text-secondary f-w-400"><a href="javascript:">Forgot Password?</a></h
                 <div class="d-grid">
                   <button type="button" class="btn mt-2 btn-light-primary bg-light text-muted">
                     <img src="{{ item.image }}" alt="google img" />
-                    <span class="d-none d-sm-inline-block"> {{ item.name }}</span>
+                    <span class="d-none d-sm-inline-block">{{ item.name }}</span>
                   </button>
                 </div>
               </div>
@@ -47,7 +47,10 @@ <h5 class="text-secondary f-w-400"><a href="javascript:">Forgot Password?</a></h
       </div>
       <div class="auth-footer row">
         <div class="col my-1">
-          <p class="m-0">Copyright © <a href="https://codedthemes.com/" target="_blank">CodedThemes</a></p>
+          <p class="m-0">
+            Copyright ©
+            <a href="https://codedthemes.com/" target="_blank">CodedThemes</a>
+          </p>
         </div>
         <div class="col-auto my-1">
           <ul class="list-inline footer-link mb-0">

src/app/demo/authentication/register/register.component.html

@@ -36,10 +36,12 @@ <h3 class="mb-0"><b>Sign up</b></h3>
             <label class="form-label" for="password">Password</label>
             <input type="password" class="form-control" id="password" placeholder="Password" />
           </div>
-          <p class="mt-4 text-sm text-muted"
-            >By Signing up, you agree to our <a href="javascript:" class="text-primary"> Terms of Service </a> and
-            <a href="javascript:" class="text-primary"> Privacy Policy</a></p
-          >
+          <p class="mt-4 text-sm text-muted">
+            By Signing up, you agree to our
+            <a href="javascript:" class="text-primary">Terms of Service</a>
+            and
+            <a href="javascript:" class="text-primary">Privacy Policy</a>
+          </p>
           <div class="d-grid mt-3">
             <button type="button" class="btn btn-primary">Create Account</button>
           </div>
@@ -52,7 +54,7 @@ <h3 class="mb-0"><b>Sign up</b></h3>
                 <div class="d-grid">
                   <button type="button" class="btn mt-2 btn-light-primary bg-light text-muted">
                     <img src="{{ item.image }}" alt="google img" />
-                    <span class="d-none d-sm-inline-block"> {{ item.name }}</span>
+                    <span class="d-none d-sm-inline-block">{{ item.name }}</span>
                   </button>
                 </div>
               </div>
@@ -63,7 +65,10 @@ <h3 class="mb-0"><b>Sign up</b></h3>
       <div class="auth-footer row">
         <!-- <div class=""> -->
         <div class="col my-1">
-          <p class="m-0">Copyright © <a href="https://codedthemes.com/" target="_blank">CodedThemes</a></p>
+          <p class="m-0">
+            Copyright ©
+            <a href="https://codedthemes.com/" target="_blank">CodedThemes</a>
+          </p>
         </div>
         <div class="col-auto my-1">
           <ul class="list-inline footer-link mb-0">

src/app/demo/default/dashboard/analytics-chart/analytics-chart.component.html

@@ -2,10 +2,12 @@ <h5 class="mb-3">Analytics Report</h5>
 <div class="card">
   <div class="list-group list-group-flush">
     <a href="javascript:" class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
-      Company Finance Growth<span class="h5 mb-0">+45.14%</span>
+      Company Finance Growth
+      <span class="h5 mb-0">+45.14%</span>
     </a>
     <a href="javascript:" class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
-      Company Expenses Ratio<span class="h5 mb-0">0.58%</span>
+      Company Expenses Ratio
+      <span class="h5 mb-0">0.58%</span>
     </a>
   </div>
   <div class="card-body px-2">

src/app/demo/default/dashboard/dashboard.component.html

@@ -7,11 +7,13 @@ <h4 class="mb-3">
           {{ analytic.amount }}
           <span class="badge {{ analytic.background }} border {{ analytic.border }} ">
             <i antIcon type="{{ analytic.icon }}" theme="outline"></i>
-            {{ analytic.percentage }}</span
-          >
+            {{ analytic.percentage }}
+          </span>
         </h4>
         <p class="mb-0 text-muted text-sm">
-          You made an extra <span class="{{ analytic.color }}">{{ analytic.number }}</span> this year
+          You made an extra
+          <span class="{{ analytic.color }}">{{ analytic.number }}</span>
+          this year
         </p>
       </app-card>
     </div>
@@ -40,13 +42,16 @@ <h5 class="mb-3">Recent Orders</h5>
           <tbody>
             @for (order of recentOrder; track order) {
               <tr>
-                <td
-                  ><a href="javascript:" class="text-muted">{{ order.id }}</a></td
-                >
+                <td>
+                  <a href="javascript:" class="text-muted">{{ order.id }}</a>
+                </td>
                 <td>{{ order.name }}</td>
-                <td
-                  ><span class="d-block"><i class="badge-circle {{ order.status_type }} f-10 m-r-5"></i>{{ order.status }}</span></td
-                >
+                <td>
+                  <span class="d-block">
+                    <i class="badge-circle {{ order.status_type }} f-10 m-r-5"></i>
+                    {{ order.status }}
+                  </span>
+                </td>
                 <td class="text-end">{{ order.quantity }}</td>
                 <td class="text-end">{{ order.amount }}</td>
               </tr>

src/app/demo/ui-component/typography/typography.component.html

@@ -34,7 +34,8 @@ <h1 class="display-6">Display 6</h1>
     <app-card cardTitle="Inline Text Elements">
       <p class="lead m-t-0">Your title goes here</p>
       You can use the mark tag to
-      <mark>highlight</mark> text.
+      <mark>highlight</mark>
+      text.
       <br />
       <del>This line of text is meant to be treated as deleted text.</del>
       <br />
@@ -47,13 +48,13 @@ <h1 class="display-6">Display 6</h1>
   </div>
   <div class="col-md-6">
     <app-card cardTitle="Contextual Text Colors">
-      <p class="text-muted mb-1"> Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p>
-      <p class="text-primary mb-1"> Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
-      <p class="text-success mb-1"> Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>
-      <p class="text-info mb-1"> Maecenas sed diam eget risus varius blandit sit amet non magna. </p>
-      <p class="text-warning mb-1"> Etiam porta sem malesuada magna mollis euismod. </p>
-      <p class="text-danger mb-1"> Donec ullamcorper nulla non metus auctor fringilla. </p>
-      <p class="text-dark mb-1"> Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
+      <p class="text-muted mb-1">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+      <p class="text-primary mb-1">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+      <p class="text-success mb-1">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+      <p class="text-info mb-1">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+      <p class="text-warning mb-1">Etiam porta sem malesuada magna mollis euismod.</p>
+      <p class="text-danger mb-1">Donec ullamcorper nulla non metus auctor fringilla.</p>
+      <p class="text-dark mb-1">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
     </app-card>
   </div>
   <div class="col-md-6 col-lg-4">
@@ -126,28 +127,38 @@ <h5>Inline</h5>
     <app-card cardTitle="Blockquotes">
       <p class="text-muted m-b-30">Your awesome text goes here.</p>
       <blockquote class="blockquote">
-        <p class="mb-2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
-        <footer class="blockquote-footer"> Someone famous in <cite title="Source Title">Source Title</cite> </footer>
+        <p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+        <footer class="blockquote-footer">
+          Someone famous in
+          <cite title="Source Title">Source Title</cite>
+        </footer>
       </blockquote>
-      <p class="text-muted m-b-15 m-t-20"> Add <code>.text-end</code> for a blockquote with right-aligned content. </p>
+      <p class="text-muted m-b-15 m-t-20">
+        Add
+        <code>.text-end</code>
+        for a blockquote with right-aligned content.
+      </p>
       <blockquote class="blockquote text-end">
-        <p class="mb-2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
-        <footer class="blockquote-footer"> Someone famous in <cite title="Source Title">Source Title</cite> </footer>
+        <p class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+        <footer class="blockquote-footer">
+          Someone famous in
+          <cite title="Source Title">Source Title</cite>
+        </footer>
       </blockquote>
     </app-card>
   </div>
   <div class="col-md-6">
     <app-card cardTitle="Horizontal Description">
       <dl class="dl-horizontal row">
         <dt class="col-sm-3">Description lists</dt>
-        <dd class="col-sm-9"> A description list is perfect for defining terms. </dd>
+        <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
 
         <dt class="col-sm-3">Euismod</dt>
-        <dd class="col-sm-9"> Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. </dd>
-        <dd class="col-sm-9"> Donec id elit non mi porta gravida at eget metus. </dd>
+        <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+        <dd class="col-sm-9">Donec id elit non mi porta gravida at eget metus.</dd>
 
         <dt class="col-sm-3">Malesuada porta</dt>
-        <dd class="col-sm-9"> Etiam porta sem malesuada magna mollis euismod. </dd>
+        <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
 
         <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
         <dd class="col-sm-9">

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

@@ -20,12 +20,16 @@
       </div>
     </div>
   </div>
+  <div class="pc-menu-overlay" (click)="closeMenu()" (keydown)="handleKeyDown($event)" tabindex="0"></div>
 </div>
 <footer class="pc-footer">
   <div class="footer-wrapper container-fluid">
     <div class="row">
       <div class="col my-1">
-        <p class="m-0"> Copyright &copy; <a href="https://codedthemes.com" target="_blank">CodedThemes</a> </p>
+        <p class="m-0">
+          Copyright &copy;
+          <a href="https://codedthemes.com" target="_blank">CodedThemes</a>
+        </p>
       </div>
       <div class="col-auto my-1">
         <ul class="list-inline footer-link mb-0">

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

@@ -30,5 +30,20 @@ export class AdminComponent {
     } else {
       this.navCollapsedMob = !this.navCollapsedMob;
     }
+    if (document.querySelector('app-navigation.pc-sidebar')?.classList.contains('navbar-collapsed')) {
+      document.querySelector('app-navigation.pc-sidebar')?.classList.remove('navbar-collapsed');
+    }
+  }
+
+  handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      this.closeMenu();
+    }
+  }
+
+  closeMenu() {
+    if (document.querySelector('app-navigation.pc-sidebar')?.classList.contains('mob-open')) {
+      document.querySelector('app-navigation.pc-sidebar')?.classList.remove('mob-open');
+    }
   }
 }

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

@@ -1,5 +1,5 @@
 // angular import
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter, HostListener } from '@angular/core';
 
 // project import
 import { SharedModule } from 'src/app/theme/shared/shared.module';
@@ -28,6 +28,13 @@ export class NavBarComponent {
     this.navCollapsedMob = false;
   }
 
+  @HostListener('window:resize', ['$event'])
+  // eslint-disable-next-line
+  onResize(event: any): void {
+    this.windowWidth = event.target.innerWidth;
+    this.navCollapseMob();
+  }
+
   // public method
   navCollapse() {
     if (this.windowWidth >= 1025) {