From 58a7383ecb4f0b5556f92134f358a083a2ebee34 Mon Sep 17 00:00:00 2001 From: DIKSHIT MORADIYA Date: Mon, 23 Dec 2024 09:20:41 +0530 Subject: [PATCH 1/4] Angular _19 complete --- angular.json | 36 +- eslint.config.js | 37 + package.json | 73 +- src/app/app-config.ts | 4 +- src/app/app-routing.module.ts | 4 +- src/app/app.component.html | 2 +- src/app/app.component.ts | 9 +- src/app/app.module.ts | 42 - src/app/demo/admin-panel/README.md | 32 + src/app/demo/application/README.md | 32 + src/app/demo/chart-maps/README.md | 32 + .../default/default.component.html | 0 .../default/default.component.scss | 0 .../default/default.component.ts | 9 +- .../element-color/element-color.component.ts | 1 - .../typography/typography.component.ts | 1 - src/app/demo/forms/README.md | 32 + src/app/demo/layout/README.md | 32 + .../sample-page/sample-page.component.html | 0 .../sample-page/sample-page.component.scss | 0 .../sample-page/sample-page.component.ts | 6 +- .../authentication/login/login.component.html | 4 +- .../authentication/login/login.component.ts | 1 - .../register/register.component.html | 4 +- .../register/register.component.ts | 1 - src/app/demo/tables/README.md | 32 + src/app/demo/widget/README.md | 32 + .../theme/layout/admin/admin.component.html | 12 +- src/app/theme/layout/admin/admin.component.ts | 45 +- .../configuration/configuration.component.ts | 2 + .../layout/admin/nav-bar/nav-bar.component.ts | 28 +- .../nav-bar/nav-logo/nav-logo.component.ts | 3 + .../nav-bar/nav-right/nav-right.component.ts | 5 + .../nav-collapse/nav-collapse.component.html | 42 +- .../nav-collapse/nav-collapse.component.ts | 77 +- .../nav-content/nav-content.component.html | 21 +- .../nav-content/nav-content.component.ts | 60 +- .../nav-group/nav-group.component.html | 22 +- .../nav-group/nav-group.component.ts | 64 +- .../nav-item/nav-item.component.html | 48 +- .../nav-item/nav-item.component.ts | 31 +- .../navigation/navigation.component.html | 14 +- .../admin/navigation/navigation.component.ts | 30 +- .../layout/admin/navigation/navigation.ts | 20 +- .../theme/layout/guest/guest.component.html | 2 +- src/app/theme/layout/guest/guest.component.ts | 2 + src/app/theme/shared/_helpers/README.md | 32 + .../bajaj-chart/bajaj-chart.component.html | 0 .../bajaj-chart/bajaj-chart.component.scss | 0 .../bajaj-chart/bajaj-chart.component.ts | 29 +- .../bar-chart/bar-chart.component.html | 0 .../bar-chart/bar-chart.component.scss | 0 .../bar-chart/bar-chart.component.ts | 31 +- .../chart-data-month.component.html | 2 +- .../chart-data-month.component.scss | 0 .../chart-data-month.component.ts | 34 +- .../breadcrumbs/breadcrumbs.component.html | 35 +- .../breadcrumbs/breadcrumbs.component.ts | 157 +- .../shared/components/card/card.component.ts | 1 - src/app/theme/shared/directive/README.md | 32 + src/app/theme/shared/service/README.md | 32 + src/app/theme/shared/shared.module.ts | 7 +- src/fake-data/README.md | 32 + src/main.ts | 16 +- src/scss/style-preset.scss | 7 + src/scss/themes/layouts/font-family.scss | 4 +- src/scss/themes/layouts/pc-sidebar.scss | 19 +- src/styles.scss | 6 +- yarn.lock | 5313 +++++++++++------ 69 files changed, 4269 insertions(+), 2506 deletions(-) create mode 100644 eslint.config.js delete mode 100644 src/app/app.module.ts create mode 100644 src/app/demo/admin-panel/README.md create mode 100644 src/app/demo/application/README.md create mode 100644 src/app/demo/chart-maps/README.md rename src/app/demo/{ => dashboard}/default/default.component.html (100%) rename src/app/demo/{ => dashboard}/default/default.component.scss (100%) rename src/app/demo/{ => dashboard}/default/default.component.ts (78%) create mode 100644 src/app/demo/forms/README.md create mode 100644 src/app/demo/layout/README.md rename src/app/demo/{ => other}/sample-page/sample-page.component.html (100%) rename src/app/demo/{ => other}/sample-page/sample-page.component.scss (100%) rename src/app/demo/{ => other}/sample-page/sample-page.component.ts (69%) create mode 100644 src/app/demo/tables/README.md create mode 100644 src/app/demo/widget/README.md create mode 100644 src/app/theme/shared/_helpers/README.md rename src/app/{demo/default => theme/shared/components/apexchart}/bajaj-chart/bajaj-chart.component.html (100%) rename src/app/{demo/default => theme/shared/components/apexchart}/bajaj-chart/bajaj-chart.component.scss (100%) rename src/app/{demo/default => theme/shared/components/apexchart}/bajaj-chart/bajaj-chart.component.ts (63%) rename src/app/{demo/default => theme/shared/components/apexchart}/bar-chart/bar-chart.component.html (100%) rename src/app/{demo/default => theme/shared/components/apexchart}/bar-chart/bar-chart.component.scss (100%) rename src/app/{demo/default => theme/shared/components/apexchart}/bar-chart/bar-chart.component.ts (72%) rename src/app/{demo/default => theme/shared/components/apexchart}/chart-data-month/chart-data-month.component.html (95%) rename src/app/{demo/default => theme/shared/components/apexchart}/chart-data-month/chart-data-month.component.scss (100%) rename src/app/{demo/default => theme/shared/components/apexchart}/chart-data-month/chart-data-month.component.ts (69%) create mode 100644 src/app/theme/shared/directive/README.md create mode 100644 src/app/theme/shared/service/README.md create mode 100644 src/fake-data/README.md 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..4b6fb7f 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'] + selector: 'app-root', + templateUrl: './app.component.html', + 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..c94a8ab --- /dev/null +++ b/src/app/demo/admin-panel/README.md @@ -0,0 +1,32 @@ +# Admin Panel Demo + +This is a demo of the admin panel for the CodedThemes Angular 19 Admin Template. + +The demo is a fully functional admin panel that showcases the features of the template. It includes a variety of pages and components, including: + +- Dashboard +- Users +- Products +- Settings +- Profile +- Login +- Register +- Forgot Password + +The demo also includes a variety of custom components, including: + +- Sidebar +- Navbar +- Breadcrumbs +- Cards +- Tables +- Forms +- Charts +- Maps +- Notifications + +The demo is built using the latest version of Angular and is fully responsive, meaning it will work on a variety of devices and screen sizes. + +## Running the Demo + +To run the demo, simply clone the repository and run `npm install` followed by `ng serve`. The demo will be available at `http://localhost:4200/`. diff --git a/src/app/demo/application/README.md b/src/app/demo/application/README.md new file mode 100644 index 0000000..c94a8ab --- /dev/null +++ b/src/app/demo/application/README.md @@ -0,0 +1,32 @@ +# Admin Panel Demo + +This is a demo of the admin panel for the CodedThemes Angular 19 Admin Template. + +The demo is a fully functional admin panel that showcases the features of the template. It includes a variety of pages and components, including: + +- Dashboard +- Users +- Products +- Settings +- Profile +- Login +- Register +- Forgot Password + +The demo also includes a variety of custom components, including: + +- Sidebar +- Navbar +- Breadcrumbs +- Cards +- Tables +- Forms +- Charts +- Maps +- Notifications + +The demo is built using the latest version of Angular and is fully responsive, meaning it will work on a variety of devices and screen sizes. + +## Running the Demo + +To run the demo, simply clone the repository and run `npm install` followed by `ng serve`. The demo will be available at `http://localhost:4200/`. diff --git a/src/app/demo/chart-maps/README.md b/src/app/demo/chart-maps/README.md new file mode 100644 index 0000000..c94a8ab --- /dev/null +++ b/src/app/demo/chart-maps/README.md @@ -0,0 +1,32 @@ +# Admin Panel Demo + +This is a demo of the admin panel for the CodedThemes Angular 19 Admin Template. + +The demo is a fully functional admin panel that showcases the features of the template. It includes a variety of pages and components, including: + +- Dashboard +- Users +- Products +- Settings +- Profile +- Login +- Register +- Forgot Password + +The demo also includes a variety of custom components, including: + +- Sidebar +- Navbar +- Breadcrumbs +- Cards +- Tables +- Forms +- Charts +- Maps +- Notifications + +The demo is built using the latest version of Angular and is fully responsive, meaning it will work on a variety of devices and screen sizes. + +## Running the Demo + +To run the demo, simply clone the repository and run `npm install` followed by `ng serve`. The demo will be available at `http://localhost:4200/`. 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..c94a8ab --- /dev/null +++ b/src/app/demo/forms/README.md @@ -0,0 +1,32 @@ +# Admin Panel Demo + +This is a demo of the admin panel for the CodedThemes Angular 19 Admin Template. + +The demo is a fully functional admin panel that showcases the features of the template. It includes a variety of pages and components, including: + +- Dashboard +- Users +- Products +- Settings +- Profile +- Login +- Register +- Forgot Password + +The demo also includes a variety of custom components, including: + +- Sidebar +- Navbar +- Breadcrumbs +- Cards +- Tables +- Forms +- Charts +- Maps +- Notifications + +The demo is built using the latest version of Angular and is fully responsive, meaning it will work on a variety of devices and screen sizes. + +## Running the Demo + +To run the demo, simply clone the repository and run `npm install` followed by `ng serve`. The demo will be available at `http://localhost:4200/`. diff --git a/src/app/demo/layout/README.md b/src/app/demo/layout/README.md new file mode 100644 index 0000000..c94a8ab --- /dev/null +++ b/src/app/demo/layout/README.md @@ -0,0 +1,32 @@ +# Admin Panel Demo + +This is a demo of the admin panel for the CodedThemes Angular 19 Admin Template. + +The demo is a fully functional admin panel that showcases the features of the template. It includes a variety of pages and components, including: + +- Dashboard +- Users +- Products +- Settings +- Profile +- Login +- Register +- Forgot Password + +The demo also includes a variety of custom components, including: + +- Sidebar +- Navbar +- Breadcrumbs +- Cards +- Tables +- Forms +- Charts +- Maps +- Notifications + +The demo is built using the latest version of Angular and is fully responsive, meaning it will work on a variety of devices and screen sizes. + +## Running the Demo + +To run the demo, simply clone the repository and run `npm install` followed by `ng serve`. The demo will be available at `http://localhost:4200/`. 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..c94a8ab --- /dev/null +++ b/src/app/demo/tables/README.md @@ -0,0 +1,32 @@ +# Admin Panel Demo + +This is a demo of the admin panel for the CodedThemes Angular 19 Admin Template. + +The demo is a fully functional admin panel that showcases the features of the template. It includes a variety of pages and components, including: + +- Dashboard +- Users +- Products +- Settings +- Profile +- Login +- Register +- Forgot Password + +The demo also includes a variety of custom components, including: + +- Sidebar +- Navbar +- Breadcrumbs +- Cards +- Tables +- Forms +- Charts +- Maps +- Notifications + +The demo is built using the latest version of Angular and is fully responsive, meaning it will work on a variety of devices and screen sizes. + +## Running the Demo + +To run the demo, simply clone the repository and run `npm install` followed by `ng serve`. The demo will be available at `http://localhost:4200/`. diff --git a/src/app/demo/widget/README.md b/src/app/demo/widget/README.md new file mode 100644 index 0000000..c94a8ab --- /dev/null +++ b/src/app/demo/widget/README.md @@ -0,0 +1,32 @@ +# Admin Panel Demo + +This is a demo of the admin panel for the CodedThemes Angular 19 Admin Template. + +The demo is a fully functional admin panel that showcases the features of the template. It includes a variety of pages and components, including: + +- Dashboard +- Users +- Products +- Settings +- Profile +- Login +- Register +- Forgot Password + +The demo also includes a variety of custom components, including: + +- Sidebar +- Navbar +- Breadcrumbs +- Cards +- Tables +- Forms +- Charts +- Maps +- Notifications + +The demo is built using the latest version of Angular and is fully responsive, meaning it will work on a variety of devices and screen sizes. + +## Running the Demo + +To run the demo, simply clone the repository and run `npm install` followed by `ng serve`. The demo will be available at `http://localhost:4200/`. 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..367e4fa 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, output, 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..dba1d70 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 @@ - -
    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..a76019d 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 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 @@