diff --git a/README.md b/README.md index e1a227d..eea71a8 100644 --- a/README.md +++ b/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 diff --git a/angular.json b/angular.json index a390974..e85dc79 100644 --- a/angular.json +++ b/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" + ] } } diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000..7d2c744 --- /dev/null +++ b/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: {} + } +); diff --git a/package.json b/package.json index 2801f3c..0ef8b24 100644 --- a/package.json +++ b/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" } -} +} \ No newline at end of file diff --git a/src/app/app-config.ts b/src/app/app-config.ts index 60f77bf..a92054c 100644 --- a/src/app/app-config.ts +++ b/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 } diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 51e3783..5034628 100644 --- a/src/app/app-routing.module.ts +++ b/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') } ] }, diff --git a/src/app/app.component.html b/src/app/app.component.html index 41dcd2e..9452a06 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,3 @@ - + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index c029b44..d960637 100644 --- a/src/app/app.component.ts +++ b/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'; diff --git a/src/app/app.module.ts b/src/app/app.module.ts deleted file mode 100644 index 9e4530e..0000000 --- a/src/app/app.module.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { AdminComponent } from './theme/layout/admin/admin.component'; -import { NavigationItem } from './theme/layout/admin/navigation/navigation'; -import { NavBarComponent } from './theme/layout/admin/nav-bar/nav-bar.component'; -import { NavLeftComponent } from './theme/layout/admin/nav-bar/nav-left/nav-left.component'; -import { NavRightComponent } from './theme/layout/admin/nav-bar/nav-right/nav-right.component'; -import { NavigationComponent } from './theme/layout/admin/navigation/navigation.component'; -import { NavLogoComponent } from './theme/layout/admin/nav-bar/nav-logo/nav-logo.component'; -import { NavContentComponent } from './theme/layout/admin/navigation/nav-content/nav-content.component'; -import { NavGroupComponent } from './theme/layout/admin/navigation/nav-content/nav-group/nav-group.component'; -import { NavCollapseComponent } from './theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component'; -import { NavItemComponent } from './theme/layout/admin/navigation/nav-content/nav-item/nav-item.component'; -import { SharedModule } from './theme/shared/shared.module'; -import { ConfigurationComponent } from './theme/layout/admin/configuration/configuration.component'; -import { GuestComponent } from './theme/layout/guest/guest.component'; - -@NgModule({ - declarations: [ - AppComponent, - AdminComponent, - NavBarComponent, - NavLeftComponent, - NavRightComponent, - NavigationComponent, - NavLogoComponent, - NavContentComponent, - NavGroupComponent, - NavItemComponent, - NavCollapseComponent, - ConfigurationComponent, - GuestComponent - ], - imports: [BrowserModule, AppRoutingModule, SharedModule, BrowserAnimationsModule], - providers: [NavigationItem], - bootstrap: [AppComponent] -}) -export class AppModule {} diff --git a/src/app/demo/admin-panel/README.md b/src/app/demo/admin-panel/README.md new file mode 100644 index 0000000..aba62e0 --- /dev/null +++ b/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 Berry Admin Panel! 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 version 4.0.0. 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? + +πŸš€ Advanced Features : Access premium components and tools designed for modern, high-end projects.

+⚑ Faster Development : Pre-designed pages, widgets, and features help you save time and effort.

+πŸ“± Fully Responsive Design : Enjoy a flawless experience across desktops, tablets, and smartphones.

+πŸ›  Developer-Friendly : Modular code, clear documentation, and well-structured components make customization a breeze.

+🎨 Customization-Ready : 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! diff --git a/src/app/demo/application/README.md b/src/app/demo/application/README.md new file mode 100644 index 0000000..aba62e0 --- /dev/null +++ b/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 Berry Admin Panel! 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 version 4.0.0. 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? + +πŸš€ Advanced Features : Access premium components and tools designed for modern, high-end projects.

+⚑ Faster Development : Pre-designed pages, widgets, and features help you save time and effort.

+πŸ“± Fully Responsive Design : Enjoy a flawless experience across desktops, tablets, and smartphones.

+πŸ›  Developer-Friendly : Modular code, clear documentation, and well-structured components make customization a breeze.

+🎨 Customization-Ready : 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! diff --git a/src/app/demo/chart-maps/README.md b/src/app/demo/chart-maps/README.md new file mode 100644 index 0000000..aba62e0 --- /dev/null +++ b/src/app/demo/chart-maps/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 Berry Admin Panel! 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 version 4.0.0. 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? + +πŸš€ Advanced Features : Access premium components and tools designed for modern, high-end projects.

+⚑ Faster Development : Pre-designed pages, widgets, and features help you save time and effort.

+πŸ“± Fully Responsive Design : Enjoy a flawless experience across desktops, tablets, and smartphones.

+πŸ›  Developer-Friendly : Modular code, clear documentation, and well-structured components make customization a breeze.

+🎨 Customization-Ready : 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! diff --git a/src/app/demo/default/default.component.html b/src/app/demo/dashboard/default/default.component.html similarity index 100% rename from src/app/demo/default/default.component.html rename to src/app/demo/dashboard/default/default.component.html diff --git a/src/app/demo/default/default.component.scss b/src/app/demo/dashboard/default/default.component.scss similarity index 100% rename from src/app/demo/default/default.component.scss rename to src/app/demo/dashboard/default/default.component.scss diff --git a/src/app/demo/default/default.component.ts b/src/app/demo/dashboard/default/default.component.ts similarity index 78% rename from src/app/demo/default/default.component.ts rename to src/app/demo/dashboard/default/default.component.ts index e4ff054..2db3983 100644 --- a/src/app/demo/default/default.component.ts +++ b/src/app/demo/dashboard/default/default.component.ts @@ -4,14 +4,13 @@ import { CommonModule } from '@angular/common'; // project import import { SharedModule } from 'src/app/theme/shared/shared.module'; -import { BarChartComponent } from './bar-chart/bar-chart.component'; -import { BajajChartComponent } from './bajaj-chart/bajaj-chart.component'; -import { ChartDataMonthComponent } from './chart-data-month/chart-data-month.component'; +import { BajajChartComponent } from 'src/app/theme/shared/components/apexchart/bajaj-chart/bajaj-chart.component'; +import { BarChartComponent } from 'src/app/theme/shared/components/apexchart/bar-chart/bar-chart.component'; +import { ChartDataMonthComponent } from 'src/app/theme/shared/components/apexchart/chart-data-month/chart-data-month.component'; @Component({ selector: 'app-default', - standalone: true, - imports: [CommonModule, SharedModule, BajajChartComponent, BarChartComponent, ChartDataMonthComponent], + imports: [CommonModule, BajajChartComponent, BarChartComponent, ChartDataMonthComponent, SharedModule], templateUrl: './default.component.html', styleUrls: ['./default.component.scss'] }) diff --git a/src/app/demo/elements/element-color/element-color.component.ts b/src/app/demo/elements/element-color/element-color.component.ts index 6a0fa06..ac47917 100644 --- a/src/app/demo/elements/element-color/element-color.component.ts +++ b/src/app/demo/elements/element-color/element-color.component.ts @@ -3,7 +3,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-element-color', - standalone: true, imports: [], templateUrl: './element-color.component.html', styleUrls: ['./element-color.component.scss'] diff --git a/src/app/demo/elements/typography/typography.component.ts b/src/app/demo/elements/typography/typography.component.ts index 8832a1a..162b907 100644 --- a/src/app/demo/elements/typography/typography.component.ts +++ b/src/app/demo/elements/typography/typography.component.ts @@ -3,7 +3,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-typography', - standalone: true, imports: [], templateUrl: './typography.component.html', styleUrls: ['./typography.component.scss'] diff --git a/src/app/demo/forms/README.md b/src/app/demo/forms/README.md new file mode 100644 index 0000000..aba62e0 --- /dev/null +++ b/src/app/demo/forms/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 Berry Admin Panel! 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 version 4.0.0. 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? + +πŸš€ Advanced Features : Access premium components and tools designed for modern, high-end projects.

+⚑ Faster Development : Pre-designed pages, widgets, and features help you save time and effort.

+πŸ“± Fully Responsive Design : Enjoy a flawless experience across desktops, tablets, and smartphones.

+πŸ›  Developer-Friendly : Modular code, clear documentation, and well-structured components make customization a breeze.

+🎨 Customization-Ready : 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! diff --git a/src/app/demo/layout/README.md b/src/app/demo/layout/README.md new file mode 100644 index 0000000..aba62e0 --- /dev/null +++ b/src/app/demo/layout/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 Berry Admin Panel! 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 version 4.0.0. 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? + +πŸš€ Advanced Features : Access premium components and tools designed for modern, high-end projects.

+⚑ Faster Development : Pre-designed pages, widgets, and features help you save time and effort.

+πŸ“± Fully Responsive Design : Enjoy a flawless experience across desktops, tablets, and smartphones.

+πŸ›  Developer-Friendly : Modular code, clear documentation, and well-structured components make customization a breeze.

+🎨 Customization-Ready : 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! diff --git a/src/app/demo/sample-page/sample-page.component.html b/src/app/demo/other/sample-page/sample-page.component.html similarity index 100% rename from src/app/demo/sample-page/sample-page.component.html rename to src/app/demo/other/sample-page/sample-page.component.html diff --git a/src/app/demo/sample-page/sample-page.component.scss b/src/app/demo/other/sample-page/sample-page.component.scss similarity index 100% rename from src/app/demo/sample-page/sample-page.component.scss rename to src/app/demo/other/sample-page/sample-page.component.scss diff --git a/src/app/demo/sample-page/sample-page.component.ts b/src/app/demo/other/sample-page/sample-page.component.ts similarity index 69% rename from src/app/demo/sample-page/sample-page.component.ts rename to src/app/demo/other/sample-page/sample-page.component.ts index fdf36e7..a4b1e50 100644 --- a/src/app/demo/sample-page/sample-page.component.ts +++ b/src/app/demo/other/sample-page/sample-page.component.ts @@ -2,12 +2,12 @@ import { Component } from '@angular/core'; // project import -import { SharedModule } from 'src/app/theme/shared/shared.module'; + +import { CardComponent } from '../../../theme/shared/components/card/card.component'; @Component({ selector: 'app-sample-page', - standalone: true, - imports: [SharedModule], + imports: [CardComponent], templateUrl: './sample-page.component.html', styleUrls: ['./sample-page.component.scss'] }) diff --git a/src/app/demo/pages/authentication/login/login.component.html b/src/app/demo/pages/authentication/login/login.component.html index b02d4aa..5983584 100644 --- a/src/app/demo/pages/authentication/login/login.component.html +++ b/src/app/demo/pages/authentication/login/login.component.html @@ -4,7 +4,7 @@
- + logo
@@ -16,7 +16,7 @@

Hi, Welcome Back

diff --git a/src/app/demo/pages/authentication/login/login.component.ts b/src/app/demo/pages/authentication/login/login.component.ts index a117c48..b498f2d 100644 --- a/src/app/demo/pages/authentication/login/login.component.ts +++ b/src/app/demo/pages/authentication/login/login.component.ts @@ -4,7 +4,6 @@ import { RouterModule } from '@angular/router'; @Component({ selector: 'app-login', - standalone: true, imports: [RouterModule], templateUrl: './login.component.html', styleUrls: ['./login.component.scss'] diff --git a/src/app/demo/pages/authentication/register/register.component.html b/src/app/demo/pages/authentication/register/register.component.html index 6f9281b..a17124a 100644 --- a/src/app/demo/pages/authentication/register/register.component.html +++ b/src/app/demo/pages/authentication/register/register.component.html @@ -4,7 +4,7 @@
- + logo
@@ -15,7 +15,7 @@

Sign up

diff --git a/src/app/demo/pages/authentication/register/register.component.ts b/src/app/demo/pages/authentication/register/register.component.ts index 7c51b78..d01330a 100644 --- a/src/app/demo/pages/authentication/register/register.component.ts +++ b/src/app/demo/pages/authentication/register/register.component.ts @@ -4,7 +4,6 @@ import { RouterModule } from '@angular/router'; @Component({ selector: 'app-register', - standalone: true, imports: [RouterModule], templateUrl: './register.component.html', styleUrls: ['./register.component.scss'] diff --git a/src/app/demo/tables/README.md b/src/app/demo/tables/README.md new file mode 100644 index 0000000..aba62e0 --- /dev/null +++ b/src/app/demo/tables/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 Berry Admin Panel! 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 version 4.0.0. 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? + +πŸš€ Advanced Features : Access premium components and tools designed for modern, high-end projects.

+⚑ Faster Development : Pre-designed pages, widgets, and features help you save time and effort.

+πŸ“± Fully Responsive Design : Enjoy a flawless experience across desktops, tablets, and smartphones.

+πŸ›  Developer-Friendly : Modular code, clear documentation, and well-structured components make customization a breeze.

+🎨 Customization-Ready : 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! diff --git a/src/app/demo/widget/README.md b/src/app/demo/widget/README.md new file mode 100644 index 0000000..aba62e0 --- /dev/null +++ b/src/app/demo/widget/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 Berry Admin Panel! 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 version 4.0.0. 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? + +πŸš€ Advanced Features : Access premium components and tools designed for modern, high-end projects.

+⚑ Faster Development : Pre-designed pages, widgets, and features help you save time and effort.

+πŸ“± Fully Responsive Design : Enjoy a flawless experience across desktops, tablets, and smartphones.

+πŸ›  Developer-Friendly : Modular code, clear documentation, and well-structured components make customization a breeze.

+🎨 Customization-Ready : 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! diff --git a/src/app/theme/layout/admin/admin.component.html b/src/app/theme/layout/admin/admin.component.html index 00f27cd..b1f2898 100644 --- a/src/app/theme/layout/admin/admin.component.html +++ b/src/app/theme/layout/admin/admin.component.html @@ -2,19 +2,21 @@ class="coded-navbar pc-sidebar" [ngClass]="{ 'navbar-collapsed': navCollapsed, + horizontal: currentLayout === 'horizontal', + compact: currentLayout === 'compact', 'mob-open': navCollapsedMob }" (NavCollapsedMob)="navMobClick()" -> - +/> +
- +
- +
@@ -43,4 +45,4 @@
- + diff --git a/src/app/theme/layout/admin/admin.component.ts b/src/app/theme/layout/admin/admin.component.ts index 13074f4..a1ffc58 100644 --- a/src/app/theme/layout/admin/admin.component.ts +++ b/src/app/theme/layout/admin/admin.component.ts @@ -1,29 +1,40 @@ // Angular import -import { Component } from '@angular/core'; -import { Location, LocationStrategy } from '@angular/common'; +import { AfterViewInit, Component, inject } from '@angular/core'; +import { CommonModule, Location, LocationStrategy } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { ChangeDetectorRef } from '@angular/core'; // Project import -import { BerryConfig } from '../../../app-config'; +import { BerryConfig } from 'src/app/app-config'; + +import { ConfigurationComponent } from './configuration/configuration.component'; +import { NavBarComponent } from './nav-bar/nav-bar.component'; +import { NavigationComponent } from './navigation/navigation.component'; +import { BreadcrumbComponent } from '../../shared/components/breadcrumbs/breadcrumbs.component'; @Component({ selector: 'app-admin', + standalone: true, + imports: [CommonModule, NavigationComponent, NavBarComponent, ConfigurationComponent, RouterModule, BreadcrumbComponent], templateUrl: './admin.component.html', - styleUrls: ['./admin.component.scss'] + styleUrl: './admin.component.scss' }) -export class AdminComponent { +export class AdminComponent implements AfterViewInit { + private location = inject(Location); + private locationStrategy = inject(LocationStrategy); + cdr = inject(ChangeDetectorRef); + // public props - berryConfig; - navCollapsed: boolean; + currentLayout!: string; + navCollapsed = true; navCollapsedMob = false; - windowWidth: number; + windowWidth!: number; // Constructor - constructor( - private location: Location, - private locationStrategy: LocationStrategy - ) { - this.berryConfig = BerryConfig; + // life cycle hook + + ngAfterViewInit() { let current_url = this.location.path(); const baseHref = this.locationStrategy.getBaseHref(); if (baseHref) { @@ -31,11 +42,17 @@ export class AdminComponent { } if (current_url === baseHref + '/layout/theme-compact' || current_url === baseHref + '/layout/box') { - this.berryConfig.isCollapse_menu = true; + BerryConfig.isCollapse_menu = true; } this.windowWidth = window.innerWidth; this.navCollapsed = this.windowWidth >= 1025 ? BerryConfig.isCollapse_menu : false; + this.cdr.detectChanges(); + } + + // private method + private isThemeLayout(layout: string) { + this.currentLayout = layout; } // public method diff --git a/src/app/theme/layout/admin/configuration/configuration.component.ts b/src/app/theme/layout/admin/configuration/configuration.component.ts index 4276a1d..5ee1d85 100644 --- a/src/app/theme/layout/admin/configuration/configuration.component.ts +++ b/src/app/theme/layout/admin/configuration/configuration.component.ts @@ -1,8 +1,10 @@ +import { CommonModule } from '@angular/common'; import { Component, OnInit, Renderer2 } from '@angular/core'; import { BerryConfig } from 'src/app/app-config'; @Component({ selector: 'app-configuration', + imports: [CommonModule], templateUrl: './configuration.component.html', styleUrls: ['./configuration.component.scss'] }) diff --git a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts index 04f95f7..7f7938e 100644 --- a/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts +++ b/src/app/theme/layout/admin/nav-bar/nav-bar.component.ts @@ -1,19 +1,28 @@ // Angular import -import { Component, EventEmitter, HostListener, Output } from '@angular/core'; -import { BerryConfig } from '../../../../app-config'; +import { CommonModule } from '@angular/common'; +import { Component, output } from '@angular/core'; + +// project import +import { BerryConfig } from 'src/app/app-config'; + +import { NavLeftComponent } from './nav-left/nav-left.component'; +import { NavLogoComponent } from './nav-logo/nav-logo.component'; +import { NavRightComponent } from './nav-right/nav-right.component'; @Component({ selector: 'app-nav-bar', + standalone: true, + imports: [NavLogoComponent, NavLeftComponent, NavRightComponent, CommonModule], templateUrl: './nav-bar.component.html', styleUrls: ['./nav-bar.component.scss'] }) export class NavBarComponent { // public props - @Output() NavCollapse = new EventEmitter(); - @Output() NavCollapsedMob = new EventEmitter(); - navCollapsed; + NavCollapse = output(); + NavCollapsedMob = output(); + navCollapsed: boolean; windowWidth: number; - navCollapsedMob; + navCollapsedMob: boolean; // Constructor constructor() { @@ -30,13 +39,6 @@ export class NavBarComponent { } } - @HostListener('window:resize', ['$event']) - // eslint disable-next-line - onResize(event: any): void { - this.windowWidth = event.target.innerWidth; - this.navCollapseMob(); - } - navCollapseMob() { if (this.windowWidth < 1025) { this.NavCollapsedMob.emit(); diff --git a/src/app/theme/layout/admin/nav-bar/nav-logo/nav-logo.component.ts b/src/app/theme/layout/admin/nav-bar/nav-logo/nav-logo.component.ts index 346f96f..9e79e14 100644 --- a/src/app/theme/layout/admin/nav-bar/nav-logo/nav-logo.component.ts +++ b/src/app/theme/layout/admin/nav-bar/nav-logo/nav-logo.component.ts @@ -1,8 +1,11 @@ // Angular import +import { CommonModule } from '@angular/common'; import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { RouterModule } from '@angular/router'; @Component({ selector: 'app-nav-logo', + imports: [CommonModule, RouterModule], templateUrl: './nav-logo.component.html', styleUrls: ['./nav-logo.component.scss'] }) diff --git a/src/app/theme/layout/admin/nav-bar/nav-right/nav-right.component.ts b/src/app/theme/layout/admin/nav-bar/nav-right/nav-right.component.ts index 2e2723d..852b61d 100644 --- a/src/app/theme/layout/admin/nav-bar/nav-right/nav-right.component.ts +++ b/src/app/theme/layout/admin/nav-bar/nav-right/nav-right.component.ts @@ -1,8 +1,13 @@ // Angular import import { Component } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +// third party import +import { SharedModule } from 'src/app/theme/shared/shared.module'; @Component({ selector: 'app-nav-right', + imports: [RouterModule, SharedModule], templateUrl: './nav-right.component.html', styleUrls: ['./nav-right.component.scss'] }) diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.html b/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.html index f432452..5593e06 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.html +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.html @@ -1,23 +1,23 @@ - +} diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.ts b/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.ts index 2b8dd85..6d4b51d 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.ts +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-collapse/nav-collapse.component.ts @@ -1,51 +1,82 @@ // Angular import -import { Component, Input } from '@angular/core'; +import { Component, Input, OnInit, inject } from '@angular/core'; +import { CommonModule, Location } from '@angular/common'; +import { RouterModule } from '@angular/router'; // project import import { NavigationItem } from '../../navigation'; -import { animate, style, transition, trigger } from '@angular/animations'; + +import { NavItemComponent } from '../nav-item/nav-item.component'; @Component({ selector: 'app-nav-collapse', + standalone: true, + imports: [CommonModule, RouterModule, NavItemComponent], templateUrl: './nav-collapse.component.html', - styleUrls: ['./nav-collapse.component.scss'], - animations: [ - trigger('slideInOut', [ - transition(':enter', [ - style({ transform: 'translateY(-100%)', display: 'block' }), - animate('250ms ease-in', style({ transform: 'translateY(0%)' })) - ]), - transition(':leave', [animate('250ms ease-in', style({ transform: 'translateY(-100%)' }))]) - ]) - ] + styleUrl: './nav-collapse.component.scss' }) -export class NavCollapseComponent { +export class NavCollapseComponent implements OnInit { + private location = inject(Location); + // public props @Input() item!: NavigationItem; - windowWidth = window.innerWidth; + current_url = ''; // Add current URL property + + ngOnInit() { + this.current_url = this.location.path(); + + // eslint-disable-next-line + //@ts-ignore + const baseHref = this.location['_baseHref'] || ''; // Use baseHref if necessary + this.current_url = baseHref + this.current_url; + + // Timeout to allow DOM to fully render before checking for the links + setTimeout(() => { + const links = document.querySelectorAll('a.nav-link') as NodeListOf; + links.forEach((link: HTMLAnchorElement) => { + if (link.getAttribute('href') === this.current_url) { + let parent = link.parentElement; + while (parent && parent.classList) { + if (parent.classList.contains('coded-hasmenu')) { + parent.classList.add('coded-trigger'); + parent.classList.add('active'); + } + parent = parent.parentElement; + } + } + }); + }, 0); + } + + // Method to handle the collapse of the navigation menu + navCollapse(e: MouseEvent) { + let parent = e.target as HTMLElement; + + if (parent?.tagName === 'SPAN') { + parent = parent.parentElement!; + } + + parent = (parent as HTMLElement).parentElement!; - // public method - navCollapse(e: any) { - let parent = e.target; - parent = parent.parentElement; const sections = document.querySelectorAll('.coded-hasmenu'); for (let i = 0; i < sections.length; i++) { if (sections[i] !== parent) { sections[i].classList.remove('coded-trigger'); } } - let first_parent = parent.parentElement; - let pre_parent = parent.parentElement.parentElement; + + let first_parent = parent.parentElement!; + let pre_parent = ((parent as HTMLElement).parentElement as HTMLElement).parentElement!; if (first_parent.classList.contains('coded-hasmenu')) { do { first_parent.classList.add('coded-trigger'); - first_parent = first_parent.parentElement.parentElement.parentElement; + first_parent = (first_parent.parentElement as HTMLElement).parentElement!; } while (first_parent.classList.contains('coded-hasmenu')); } else if (pre_parent.classList.contains('coded-submenu')) { do { - pre_parent.parentElement.classList.add('coded-trigger'); - pre_parent = pre_parent.parentElement.parentElement.parentElement; + pre_parent.parentElement?.classList.add('coded-trigger'); + pre_parent = (((pre_parent as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).parentElement!; } while (pre_parent.classList.contains('coded-submenu')); } parent.classList.toggle('coded-trigger'); diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.html b/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.html index 915ac2e..5127f59 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.html +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.html @@ -1,15 +1,14 @@ +
- +
diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.ts b/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.ts index db958ef..46c18f3 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.ts +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.ts @@ -1,47 +1,65 @@ // Angular import -import { Component, EventEmitter, OnInit, Output } from '@angular/core'; -import { Location, LocationStrategy } from '@angular/common'; +import { Component, OnInit, output, inject } from '@angular/core'; +import { CommonModule, Location } from '@angular/common'; +import { RouterModule } from '@angular/router'; -// project import -import { NavigationItem } from '../navigation'; +//theme version import { environment } from 'src/environments/environment'; +// project import +import { NavigationItem, NavigationItems } from '../navigation'; + +import { NavCollapseComponent } from './nav-collapse/nav-collapse.component'; +import { NavGroupComponent } from './nav-group/nav-group.component'; +import { NavItemComponent } from './nav-item/nav-item.component'; + +// NgScrollbarModule +import { SharedModule } from 'src/app/theme/shared/shared.module'; + @Component({ selector: 'app-nav-content', + standalone: true, + imports: [CommonModule, RouterModule, NavCollapseComponent, NavGroupComponent, NavItemComponent, SharedModule], templateUrl: './nav-content.component.html', - styleUrls: ['./nav-content.component.scss'] + styleUrl: './nav-content.component.scss' }) export class NavContentComponent implements OnInit { + private location = inject(Location); + // public props - @Output() NavCollapsedMob: EventEmitter = new EventEmitter(); + NavCollapsedMob = output(); + SubmenuCollapse = output(); // version + title = 'Demo application for version numbering'; currentApplicationVersion = environment.appVersion; - navigation: any; - windowWidth = window.innerWidth; + navigations!: NavigationItem[]; + windowWidth: number; // Constructor - constructor( - public nav: NavigationItem, - private location: Location, - private locationStrategy: LocationStrategy - ) { - this.navigation = this.nav.get(); + constructor() { + this.navigations = NavigationItems; + this.windowWidth = window.innerWidth; } // Life cycle events ngOnInit() { if (this.windowWidth < 1025) { - (document.querySelector('.coded-navbar') as HTMLDivElement).classList.add('menupos-static'); + setTimeout(() => { + (document.querySelector('.coded-navbar') as HTMLDivElement).classList.add('menupos-static'); + }, 500); } } fireOutClick() { let current_url = this.location.path(); - const baseHref = this.locationStrategy.getBaseHref(); - if (baseHref) { - current_url = baseHref + this.location.path(); + // eslint-disable-next-line + // @ts-ignore + if (this.location['_baseHref']) { + // eslint-disable-next-line + // @ts-ignore + current_url = this.location['_baseHref'] + this.location.path(); } const link = "a.nav-link[ href='" + current_url + "' ]"; const ele = document.querySelector(link); @@ -61,10 +79,4 @@ export class NavContentComponent implements OnInit { } } } - - navMob() { - if (this.windowWidth < 1025 && document.querySelector('app-navigation.coded-navbar').classList.contains('mob-open')) { - this.NavCollapsedMob.emit(); - } - } } diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.html b/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.html index 01484a7..14301b7 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.html +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.html @@ -1,14 +1,12 @@ - -@for (item of item.children; track item) { - @if (item.type == 'group') { - - } - @if (item.type == 'collapse') { - - } - @if (item.type == 'item') { - +@if (!item.hidden) { + + @for (items of item.children; track items) { + @if (items.type === 'collapse') { + + } @else if (items.type === 'item') { + + } } } diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.ts b/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.ts index 0d1c65d..1aaafa3 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.ts +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-group/nav-group.component.ts @@ -1,49 +1,51 @@ // Angular import -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, inject } from '@angular/core'; +import { CommonModule, Location } from '@angular/common'; // project import import { NavigationItem } from '../../navigation'; -import { Location, LocationStrategy } from '@angular/common'; + +import { NavCollapseComponent } from '../nav-collapse/nav-collapse.component'; +import { NavItemComponent } from '../nav-item/nav-item.component'; @Component({ selector: 'app-nav-group', + standalone: true, + imports: [CommonModule, NavCollapseComponent, NavItemComponent], templateUrl: './nav-group.component.html', - styleUrls: ['./nav-group.component.scss'] + styleUrl: './nav-group.component.scss' }) export class NavGroupComponent implements OnInit { + private location = inject(Location); + // public props @Input() item!: NavigationItem; - // Constructor - constructor( - private location: Location, - private locationStrategy: LocationStrategy - ) {} + current_url!: string; // Life cycle events ngOnInit() { - // at reload time active and trigger link - let current_url = this.location.path(); - const baseHref = this.locationStrategy.getBaseHref(); - if (baseHref) { - current_url = baseHref + this.location.path(); - } - const link = "a.nav-link[ href='" + current_url + "' ]"; - const ele = document.querySelector(link); - if (ele !== null && ele !== undefined) { - const parent = ele.parentElement; - const up_parent = parent?.parentElement?.parentElement; - const last_parent = up_parent?.parentElement; - if (parent?.classList.contains('coded-hasmenu')) { - parent.classList.add('coded-trigger'); - parent.classList.add('active'); - } else if (up_parent?.classList.contains('coded-hasmenu')) { - up_parent.classList.add('coded-trigger'); - up_parent.classList.add('active'); - } else if (last_parent?.classList.contains('coded-hasmenu')) { - last_parent.classList.add('coded-trigger'); - last_parent.classList.add('active'); - } - } + this.current_url = this.location.path(); + //eslint-disable-next-line + //@ts-ignore + const baseHref = this.location['_baseHref'] || ''; + this.current_url = baseHref + this.current_url; + + // Use a more reliable way to find and update the active group + setTimeout(() => { + const links = document.querySelectorAll('a.nav-link') as NodeListOf; + links.forEach((link: HTMLAnchorElement) => { + if (link.getAttribute('href') === this.current_url) { + let parent = link.parentElement; + while (parent && parent.classList) { + if (parent.classList.contains('coded-hasmenu')) { + parent.classList.add('coded-trigger'); + parent.classList.add('active'); + } + parent = parent.parentElement; + } + } + }); + }, 0); } } diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.html b/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.html index 9c4aeaf..86ce153 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.html +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.html @@ -1,18 +1,30 @@ -
  • - - - {{ item.title }} - - {{ item.title }} - - -
  • -
  • - - - {{ item.title }} - - {{ item.title }} - - -
  • +@if (!item.hidden) { + @if (item.url && !item.external) { +
  • + + @if (item.icon) { + + } + @if (item.icon) { + {{ item.title }} + } @else { + {{ item.title }} + } + +
  • + } + @if (item.url && item.external) { +
  • + + @if (item.icon) { + + } + @if (item.icon) { + {{ item.title }} + } @else { + {{ item.title }} + } + +
  • + } +} diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts b/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts index 255f1fa..cf52495 100644 --- a/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts +++ b/src/app/theme/layout/admin/navigation/nav-content/nav-item/nav-item.component.ts @@ -1,29 +1,39 @@ // Angular import import { Component, Input } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; // Project import import { NavigationItem } from '../../navigation'; @Component({ selector: 'app-nav-item', + standalone: true, + imports: [CommonModule, RouterModule], templateUrl: './nav-item.component.html', - styleUrls: ['./nav-item.component.scss'] + styleUrl: './nav-item.component.scss' }) export class NavItemComponent { // public props @Input() item!: NavigationItem; // public method - closeOtherMenu(event: any) { - const ele = event.target; + closeOtherMenu(event: MouseEvent) { + const ele = event.target as HTMLElement; if (ele !== null && ele !== undefined) { - const parent = ele.parentElement; - const up_parent = parent.parentElement.parentElement; - const last_parent = up_parent.parentElement; - const sections = document.querySelectorAll('.coded-hasmenu'); - for (let i = 0; i < sections.length; i++) { - sections[i].classList.remove('active'); - sections[i].classList.remove('coded-trigger'); + const parent = ele.parentElement as HTMLElement; + const up_parent = ((parent.parentElement as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement; + const last_parent = (up_parent.parentElement as HTMLElement).parentElement as HTMLElement; + if (last_parent.classList.contains('coded-submenu')) { + up_parent.classList.remove('coded-trigger'); + up_parent.classList.remove('active'); + } else { + const sections = document.querySelectorAll('.coded-hasmenu'); + + for (let i = 0; i < sections.length; i++) { + sections[i].classList.remove('active'); + sections[i].classList.remove('coded-trigger'); + } } if (parent.classList.contains('coded-hasmenu')) { @@ -37,6 +47,7 @@ export class NavItemComponent { last_parent.classList.add('active'); } } + if ((document.querySelector('app-navigation.coded-navbar') as HTMLDivElement).classList.contains('mob-open')) { (document.querySelector('app-navigation.coded-navbar') as HTMLDivElement).classList.remove('mob-open'); } diff --git a/src/app/theme/layout/admin/navigation/navigation.component.html b/src/app/theme/layout/admin/navigation/navigation.component.html index dd36891..b516a74 100644 --- a/src/app/theme/layout/admin/navigation/navigation.component.html +++ b/src/app/theme/layout/admin/navigation/navigation.component.html @@ -1,14 +1,14 @@ - -
    -
    +
    Month
    -
    +
    Year
    @@ -21,7 +33,7 @@ ${{ amount }} -

    C/W Last Year

    +

    C/w Last Year

    diff --git a/src/app/demo/default/chart-data-month/chart-data-month.component.scss b/src/app/theme/shared/components/apexchart/chart-data-month/chart-data-month.component.scss similarity index 100% rename from src/app/demo/default/chart-data-month/chart-data-month.component.scss rename to src/app/theme/shared/components/apexchart/chart-data-month/chart-data-month.component.scss diff --git a/src/app/demo/default/chart-data-month/chart-data-month.component.ts b/src/app/theme/shared/components/apexchart/chart-data-month/chart-data-month.component.ts similarity index 69% rename from src/app/demo/default/chart-data-month/chart-data-month.component.ts rename to src/app/theme/shared/components/apexchart/chart-data-month/chart-data-month.component.ts index 02392bb..e69c52a 100644 --- a/src/app/demo/default/chart-data-month/chart-data-month.component.ts +++ b/src/app/theme/shared/components/apexchart/chart-data-month/chart-data-month.component.ts @@ -1,47 +1,23 @@ // angular import +import { CommonModule } from '@angular/common'; import { Component, OnInit, ViewChild } from '@angular/core'; // project import -import { SharedModule } from 'src/app/theme/shared/shared.module'; // third party -import { - NgApexchartsModule, - ApexChart, - ChartComponent, - ApexDataLabels, - ApexAxisChartSeries, - ApexStroke, - ApexXAxis, - ApexYAxis, - ApexTheme, - ApexTooltip -} from 'ng-apexcharts'; - -export type ChartOptions = { - series: ApexAxisChartSeries; - chart: ApexChart; - dataLabels: ApexDataLabels; - xaxis: ApexXAxis; - colors: string[]; - stroke: ApexStroke; - yaxis: ApexYAxis; - tooltip: ApexTooltip; - theme: ApexTheme; -}; +import { NgApexchartsModule, ChartComponent, ApexOptions } from 'ng-apexcharts'; @Component({ selector: 'app-chart-data-month', - standalone: true, - imports: [SharedModule, NgApexchartsModule], + imports: [CommonModule, NgApexchartsModule], templateUrl: './chart-data-month.component.html', styleUrl: './chart-data-month.component.scss' }) export class ChartDataMonthComponent implements OnInit { // public props @ViewChild('chart') chart!: ChartComponent; - chartOptions!: Partial; - amount: number = 961; + chartOptions!: Partial; + amount = 961; btnActive!: string; // life cycle event @@ -88,6 +64,13 @@ export class ChartDataMonthComponent implements OnInit { }; } + handleKeyDown(event: KeyboardEvent, value: string): void { + if (event.key === 'Enter' || event.key === ' ') { + this.toggleActive(value); + event.preventDefault(); // Prevent default scrolling for the spacebar key + } + } + // public method toggleActive(value: string) { this.btnActive = value; diff --git a/src/app/theme/shared/components/breadcrumbs/breadcrumbs.component.html b/src/app/theme/shared/components/breadcrumbs/breadcrumbs.component.html index a72dcca..013725d 100644 --- a/src/app/theme/shared/components/breadcrumbs/breadcrumbs.component.html +++ b/src/app/theme/shared/components/breadcrumbs/breadcrumbs.component.html @@ -15,21 +15,26 @@