Angular 19

README.md

@@ -83,8 +83,13 @@ yarn start
 
 ## Technology Stack
 
-- Bootstrap 5
-- Angular 18
+- Angular 19.x.x
+- Bootstrap 5.x.x
+- TypeScript
+- JWT (i.e. Pro version)
+- Role Base Authentication (i.e. Pro version)
+- Apex Charts
+- npm package installer
 
 ## Author
 

angular.json

@@ -17,15 +17,22 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "allowedCommonJsDependencies": ["apexcharts"],
+            "allowedCommonJsDependencies": [
+              "apexcharts"
+            ],
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "scripts": []
           },
           "configurations": {
@@ -94,15 +101,32 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "scripts": []
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }
   },
   "cli": {
-    "analytics": "b68da35f-6e9b-4e25-9791-9b99b359fd6e"
+    "analytics": "b68da35f-6e9b-4e25-9791-9b99b359fd6e",
+    "schematicCollections": [
+      "angular-eslint"
+    ]
   }
 }

eslint.config.js

@@ -0,0 +1,37 @@
+// @ts-check
+const eslint = require('@eslint/js');
+const tseslint = require('typescript-eslint');
+const angular = require('angular-eslint');
+
+module.exports = tseslint.config(
+  {
+    files: ['**/*.ts'],
+    extends: [eslint.configs.recommended, ...tseslint.configs.recommended, ...tseslint.configs.stylistic, ...angular.configs.tsRecommended],
+    processor: angular.processInlineTemplates,
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'app',
+          style: 'camelCase'
+        }
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'app',
+          style: 'kebab-case'
+        }
+      ],
+      // Disable the prefer-standalone rule
+      '@angular-eslint/prefer-standalone': 'off'
+    }
+  },
+  {
+    files: ['**/*.html'],
+    extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
+    rules: {}
+  }
+);

package.json

@@ -1,48 +1,57 @@
 {
   "name": "berry-free-angular-admin-template",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "author": "CodedThemes",
   "license": "MIT",
+  "private": false,
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "build-prod": "ng build --configuration production --base-href /angular/free/",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "lint": "ng lint",
+    "lint:fix": "ng lint --fix",
+    "prettier": "prettier --write ./src"
   },
   "dependencies": {
-    "@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",
-    "@ng-bootstrap/ng-bootstrap": "^17.0.0",
-    "@popperjs/core": "^2.11.8",
-    "apexcharts": "^3.49.2",
-    "bootstrap": "^5.3.3",
-    "ng-apexcharts": "^1.11.0",
-    "ngx-scrollbar": "^15.0.1",
+    "@angular/animations": "19.0.5",
+    "@angular/cdk": "19.0.4",
+    "@angular/common": "19.0.5",
+    "@angular/compiler": "19.0.5",
+    "@angular/core": "19.0.5",
+    "@angular/forms": "19.0.5",
+    "@angular/platform-browser": "19.0.5",
+    "@angular/platform-browser-dynamic": "19.0.5",
+    "@angular/router": "19.0.5",
+    "@ng-bootstrap/ng-bootstrap": "18.0.0",
+    "@popperjs/core": "2.11.8",
+    "apexcharts": "3.49.2",
+    "bootstrap": "5.3.3",
+    "ng-apexcharts": "1.11.0",
+    "ngx-scrollbar": "16.1.1",
     "rxjs": "~7.8.1",
-    "tslib": "^2.6.3",
-    "zone.js": "~0.14.7"
+    "tslib": "2.8.1",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.6",
-    "@angular/cli": "~18.0.6",
-    "@angular/compiler-cli": "^18.0.5",
-    "@types/jasmine": "~5.1.4",
-    "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.3.2",
-    "typescript": "5.4"
+    "@angular-devkit/build-angular": "19.0.6",
+    "@angular/cli": "19.0.6",
+    "@angular/compiler-cli": "19.0.5",
+    "@eslint/eslintrc": "3.2.0",
+    "@eslint/js": "9.17.0",
+    "@types/jasmine": "5.1.5",
+    "angular-eslint": "19.0.2",
+    "eslint": "^9.16.0",
+    "jasmine-core": "5.5.0",
+    "karma": "6.4.4",
+    "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.4.2",
+    "typescript": "5.6.3",
+    "typescript-eslint": "8.18.0"
   }
-}
+}

src/app/app-config.ts

@@ -1,4 +1,4 @@
 export class BerryConfig {
-  static isCollapse_menu: boolean = false;
-  static font_family: string = 'Roboto'; // Roboto, poppins, inter
+  static isCollapse_menu = false;
+  static font_family = 'Roboto'; // Roboto, poppins, inter
 }

src/app/app-routing.module.ts

@@ -15,7 +15,7 @@ const routes: Routes = [
       },
       {
         path: 'default',
-        loadComponent: () => import('./demo/default/default.component').then((c) => c.DefaultComponent)
+        loadComponent: () => import('./demo/dashboard/default/default.component').then((c) => c.DefaultComponent)
       },
       {
         path: 'typography',
@@ -27,7 +27,7 @@ const routes: Routes = [
       },
       {
         path: 'sample-page',
-        loadComponent: () => import('./demo/sample-page/sample-page.component')
+        loadComponent: () => import('./demo/other/sample-page/sample-page.component')
       }
     ]
   },

src/app/app.component.html

@@ -1,3 +1,3 @@
 <router-outlet>
-  <app-spinner></app-spinner>
+  <app-spinner />
 </router-outlet>

src/app/app.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { SpinnerComponent } from './theme/shared/components/spinner/spinner.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  imports: [RouterOutlet, SpinnerComponent]
 })
 export class AppComponent {
   title = 'Berry Angular Free Version';

src/app/demo/admin-panel/README.md

@@ -0,0 +1,47 @@
+**Note:** *This README file is maintained to ensure the product structure aligns with the Pro version, making migration to Pro seamless when you choose to upgrade. This alignment aims to provide a smoother experience during the upgrade, especially regarding directory structure. You may notice these files and folders appearing throughout the project where they are part of the Pro version. While this might feel slightly inconvenient, it is intended to simplify your migration process and provide assistance. If these files are unnecessary for your use case, you can easily remove them.*
+
+Please continue reading below to explore the features of the Pro version:
+
+# Berry Admin Panel - Unlock Premium Features with the Pro Version
+
+Elevate your project with the Pro Version of the <b>Berry Admin Panel!</b> Built to cater to modern web applications, the Pro version is loaded with advanced features, intuitive design elements, and dynamic tools that ensure seamless functionality.
+
+This page (folder) is a sneak peek into the premium features available in <b>version 4.0.0</b>. Upgrade to the Pro version to unlock exclusive pages and components that will take your project to the next level.
+
+## Included in the Pro Version:
+
+[🚀 Dashboards](https://berrydashboard.io/angular/default/default) : Advanced, real-time dashboards with interactive data visualizations for actionable insights.
+
+[📦 Widgets](https://berrydashboard.io/angular/default/widget/statistics) : A curated library of pre-built widgets to streamline your development process and enhance functionality.
+
+[⚙️ Admin Panel](https://berrydashboard.io/angular/default/online-course/dashboard) : Fully responsive and user-friendly admin panels designed for efficient management and control.
+
+[🔧 Components](https://berrydashboard.io/angular/default/basic/alert) : A wide range of reusable and customizable UI components to suit diverse project needs.
+
+[🚀 Advanced Components](https://berrydashboard.io/angular/default/advance/sweetAlert) : Sophisticated tools and features to amplify your project’s design and interactivity.
+
+[📝 Forms](https://berrydashboard.io/angular/default/forms/basic) : Dynamic, customizable forms with advanced validation options for a smooth user experience.
+
+[📊 Tables](https://berrydashboard.io/angular/default/ng-table/basicTable) : Interactive, structured tables with sorting, filtering, and pagination features for better data management.
+
+[📈 Charts](https://berrydashboard.io/angular/default/chart/apex-chart) : Beautifully designed charts powered by modern libraries for impactful data visualization.
+
+[🔒 Authentication](https://berrydashboard.io/angular/default/auth/auth2/login) : Secure pages for login, registration, and password recovery, ensuring robust user authentication and management.
+
+[🛒 E-commerce App](https://berrydashboard.io/angular/default/ec/ec-product) : A complete e-commerce management solution for handling products, inventory, and transactions.
+
+[💬 Chat Messages](https://berrydashboard.io/angular/default/chat) : Integrated chat functionality to boost communication within your application.
+
+[👤 User Profile](https://berrydashboard.io/angular/default/user/social-profile) : A sleek, customizable user profile page for managing user information and settings effortlessly.
+
+## Why Upgrade to the Pro Version?
+
+🚀 <b>Advanced Features</b> : Access premium components and tools designed for modern, high-end projects. <br/><br/>
+⚡ <b>Faster Development</b> : Pre-designed pages, widgets, and features help you save time and effort. <br/><br/>
+📱 <b>Fully Responsive Design</b> : Enjoy a flawless experience across desktops, tablets, and smartphones. <br/><br/>
+🛠 <b>Developer-Friendly</b> : Modular code, clear documentation, and well-structured components make customization a breeze. <br/><br/>
+🎨 <b>Customization-Ready</b> : Personalize every aspect of your project with ease to match your branding needs.
+
+## Get Started with the Pro Version!
+
+👉 [Explore the Pro version now](https://codedthemes.com/item/berry-angular-admin-dashboard-template/) - and supercharge your development experience!

src/app/demo/application/README.md

@@ -0,0 +1,47 @@
+**Note:** *This README file is maintained to ensure the product structure aligns with the Pro version, making migration to Pro seamless when you choose to upgrade. This alignment aims to provide a smoother experience during the upgrade, especially regarding directory structure. You may notice these files and folders appearing throughout the project where they are part of the Pro version. While this might feel slightly inconvenient, it is intended to simplify your migration process and provide assistance. If these files are unnecessary for your use case, you can easily remove them.*
+
+Please continue reading below to explore the features of the Pro version:
+
+# Berry Admin Panel - Unlock Premium Features with the Pro Version
+
+Elevate your project with the Pro Version of the <b>Berry Admin Panel!</b> Built to cater to modern web applications, the Pro version is loaded with advanced features, intuitive design elements, and dynamic tools that ensure seamless functionality.
+
+This page (folder) is a sneak peek into the premium features available in <b>version 4.0.0</b>. Upgrade to the Pro version to unlock exclusive pages and components that will take your project to the next level.
+
+## Included in the Pro Version:
+
+[🚀 Dashboards](https://berrydashboard.io/angular/default/default) : Advanced, real-time dashboards with interactive data visualizations for actionable insights.
+
+[📦 Widgets](https://berrydashboard.io/angular/default/widget/statistics) : A curated library of pre-built widgets to streamline your development process and enhance functionality.
+
+[⚙️ Admin Panel](https://berrydashboard.io/angular/default/online-course/dashboard) : Fully responsive and user-friendly admin panels designed for efficient management and control.
+
+[🔧 Components](https://berrydashboard.io/angular/default/basic/alert) : A wide range of reusable and customizable UI components to suit diverse project needs.
+
+[🚀 Advanced Components](https://berrydashboard.io/angular/default/advance/sweetAlert) : Sophisticated tools and features to amplify your project’s design and interactivity.
+
+[📝 Forms](https://berrydashboard.io/angular/default/forms/basic) : Dynamic, customizable forms with advanced validation options for a smooth user experience.
+
+[📊 Tables](https://berrydashboard.io/angular/default/ng-table/basicTable) : Interactive, structured tables with sorting, filtering, and pagination features for better data management.
+
+[📈 Charts](https://berrydashboard.io/angular/default/chart/apex-chart) : Beautifully designed charts powered by modern libraries for impactful data visualization.
+
+[🔒 Authentication](https://berrydashboard.io/angular/default/auth/auth2/login) : Secure pages for login, registration, and password recovery, ensuring robust user authentication and management.
+
+[🛒 E-commerce App](https://berrydashboard.io/angular/default/ec/ec-product) : A complete e-commerce management solution for handling products, inventory, and transactions.
+
+[💬 Chat Messages](https://berrydashboard.io/angular/default/chat) : Integrated chat functionality to boost communication within your application.
+
+[👤 User Profile](https://berrydashboard.io/angular/default/user/social-profile) : A sleek, customizable user profile page for managing user information and settings effortlessly.
+
+## Why Upgrade to the Pro Version?
+
+🚀 <b>Advanced Features</b> : Access premium components and tools designed for modern, high-end projects. <br/><br/>
+⚡ <b>Faster Development</b> : Pre-designed pages, widgets, and features help you save time and effort. <br/><br/>
+📱 <b>Fully Responsive Design</b> : Enjoy a flawless experience across desktops, tablets, and smartphones. <br/><br/>
+🛠 <b>Developer-Friendly</b> : Modular code, clear documentation, and well-structured components make customization a breeze. <br/><br/>
+🎨 <b>Customization-Ready</b> : Personalize every aspect of your project with ease to match your branding needs.
+
+## Get Started with the Pro Version!
+
+👉 [Explore the Pro version now](https://codedthemes.com/item/berry-angular-admin-dashboard-template/) - and supercharge your development experience!