diff --git a/.gitattributes b/.gitattributes deleted file mode 100644 index dfe07704..00000000 --- a/.gitattributes +++ /dev/null @@ -1,2 +0,0 @@ -# Auto detect text files and perform LF normalization -* text=auto diff --git a/.github/workflows/prod.yml b/.github/workflows/prod.yml index 1188af83..4e3325d8 100644 --- a/.github/workflows/prod.yml +++ b/.github/workflows/prod.yml @@ -22,14 +22,14 @@ jobs: - name: 🚚 Get latest code uses: actions/checkout@v4 - - name: Install Node.js 22 + - name: Install Node.js 24 uses: actions/setup-node@v4 with: - node-version: '22' + node-version: '24' - name: πŸ”¨ Build Project run: | - yarn + yarn install yarn build-prod - name: πŸ“‚ Deploy to Server diff --git a/README.md b/README.md index 3f08adec..ce02058e 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,7 @@ Datta Able is offers everything you need to create dashboards. We have included ## Technology Stack - Bootstrap 5 -- Angular 18 +- Angular 21 - Typescript ## Other Technologies diff --git a/angular.json b/angular.json index 41108c48..12d33a3c 100644 --- a/angular.json +++ b/angular.json @@ -21,7 +21,9 @@ "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", - "polyfills": "src/polyfills.ts", + "polyfills": [ + "@angular/localize/init" + ], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", "assets": ["src/favicon.ico", "src/assets", "src/fake-data"], diff --git a/package.json b/package.json index 2ff25592..67c3860f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { "name": "datta-able-free-angular-admin-template", - "version": "6.2.0", + "version": "6.3.0", "author": "CodedThemes", + "private": false, "scripts": { "ng": "ng", "start": "ng serve", @@ -13,45 +14,43 @@ "lint:fix": "ng lint --fix", "prettier": "prettier --write ./src" }, - "private": false, "dependencies": { - "@angular/animations": "20.0.5", - "@angular/cdk": "20.0.4", - "@angular/common": "20.0.5", - "@angular/compiler": "20.0.5", - "@angular/core": "20.0.5", - "@angular/forms": "20.0.5", - "@angular/localize": "20.0.5", - "@angular/platform-browser": "20.0.5", - "@angular/platform-browser-dynamic": "20.0.5", - "@angular/router": "20.0.5", - "@ng-bootstrap/ng-bootstrap": "19.0.0", + "@angular/animations": "21.0.5", + "@angular/cdk": "21.0.3", + "@angular/common": "21.0.5", + "@angular/compiler": "21.0.5", + "@angular/core": "21.0.5", + "@angular/forms": "21.0.5", + "@angular/localize": "21.0.5", + "@angular/platform-browser": "21.0.5", + "@angular/platform-browser-dynamic": "21.0.5", + "@angular/router": "21.0.5", + "@ng-bootstrap/ng-bootstrap": "20.0.0", "@popperjs/core": "2.11.8", - "apexcharts": "4.7.0", - "bootstrap": "5.3.7", - "ng-apexcharts": "1.16.0", + "apexcharts": "5.3.6", + "bootstrap": "5.3.8", + "ng-apexcharts": "2.0.4", "ngx-scrollbar": "18.0.0", "rxjs": "~7.8.2", "screenfull": "6.0.2", - "tslib": "2.8.1", - "zone.js": "~0.15.1" + "tslib": "2.8.1" }, "devDependencies": { - "@angular-devkit/build-angular": "20.0.4", - "@angular-eslint/builder": "20.1.1", - "@angular-eslint/eslint-plugin": "20.1.1", - "@angular-eslint/eslint-plugin-template": "20.1.1", - "@angular-eslint/schematics": "20.1.1", - "@angular-eslint/template-parser": "20.1.1", - "@angular/cli": "20.0.4", - "@angular/compiler-cli": "20.0.5", - "@eslint/eslintrc": "3.3.1", - "@eslint/js": "9.29.0", - "@types/node": "24.0.4", - "@typescript-eslint/eslint-plugin": "8.35.0", - "@typescript-eslint/parser": "8.35.0", - "eslint": "9.29.0", - "prettier": "3.6.1", - "typescript": "5.8.3" + "@angular-devkit/build-angular": "21.0.3", + "@angular-eslint/builder": "21.1.0", + "@angular-eslint/eslint-plugin": "21.1.0", + "@angular-eslint/eslint-plugin-template": "21.1.0", + "@angular-eslint/schematics": "21.1.0", + "@angular-eslint/template-parser": "21.1.0", + "@angular/cli": "21.0.3", + "@angular/compiler-cli": "21.0.5", + "@eslint/eslintrc": "3.3.3", + "@eslint/js": "9.39.1", + "@types/node": "25.0.1", + "@typescript-eslint/eslint-plugin": "8.49.0", + "@typescript-eslint/parser": "8.49.0", + "eslint": "9.39.1", + "prettier": "3.7.4", + "typescript": "5.9.3" } } diff --git a/src/app/app.component.html b/src/app/app.component.html index a84ca09b..93ded4b2 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1 @@ - + diff --git a/src/app/demo/dashboard/dashboard.component.html b/src/app/demo/dashboard/dashboard.component.html index b5e9b5b3..af9f32d1 100644 --- a/src/app/demo/dashboard/dashboard.component.html +++ b/src/app/demo/dashboard/dashboard.component.html @@ -148,8 +148,8 @@
- Reject - Approve + Reject + Approve } diff --git a/src/app/demo/pages/authentication/auth-signin/auth-signin.component.html b/src/app/demo/pages/authentication/auth-signin/auth-signin.component.html index 4de412cb..b258a921 100644 --- a/src/app/demo/pages/authentication/auth-signin/auth-signin.component.html +++ b/src/app/demo/pages/authentication/auth-signin/auth-signin.component.html @@ -8,27 +8,73 @@
-
- -
-

Login

-
- -
-
- -
-
-
- - +
+
+
-
- -

- Forgot password? - Reset -

+

Login

+
+ + @if (submitted() && loginForm.email().invalid()) { +
+ @for (error of loginForm.email().errors(); track error.kind) { +
{{ error.message }}
+ } +
+ } +
+
+ @if (!showPassword()) { + + } @else { + + } + + @if (submitted() && loginForm.password().errors().length > 0) { +
+ @for (error of loginForm.password().errors(); track error.kind) { +
{{ error.message }}
+ } +
+ } +
+
+
+ + +
+
+ +

+ Forgot password? + Reset +

+

Don’t have an account? Sign up diff --git a/src/app/demo/pages/authentication/auth-signin/auth-signin.component.scss b/src/app/demo/pages/authentication/auth-signin/auth-signin.component.scss index e69de29b..e396528b 100644 --- a/src/app/demo/pages/authentication/auth-signin/auth-signin.component.scss +++ b/src/app/demo/pages/authentication/auth-signin/auth-signin.component.scss @@ -0,0 +1,12 @@ +#togglePassword { + cursor: pointer; + position: absolute; + right: 15px; + top: 50%; + transform: translateY(-50%); + + ::ng-deep.datta-rtl & { + right: auto; + left: 15px; + } +} diff --git a/src/app/demo/pages/authentication/auth-signin/auth-signin.component.ts b/src/app/demo/pages/authentication/auth-signin/auth-signin.component.ts index 5c6d0197..657fa3e7 100644 --- a/src/app/demo/pages/authentication/auth-signin/auth-signin.component.ts +++ b/src/app/demo/pages/authentication/auth-signin/auth-signin.component.ts @@ -1,10 +1,47 @@ -import { Component } from '@angular/core'; +// angular import +import { ChangeDetectorRef, Component, inject, signal } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; +import { email, Field, form, minLength, required } from '@angular/forms/signals'; + +// project import +import { SharedModule } from 'src/app/theme/shared/shared.module'; @Component({ selector: 'app-auth-signin', - imports: [RouterModule], + imports: [CommonModule, RouterModule, SharedModule, Field], templateUrl: './auth-signin.component.html', styleUrls: ['./auth-signin.component.scss'] }) -export class AuthSigninComponent {} +export class AuthSigninComponent { + private cd = inject(ChangeDetectorRef); + + submitted = signal(false); + error = signal(''); + showPassword = signal(false); + + loginModal = signal<{ email: string; password: string }>({ + email: '', + password: '' + }); + + loginForm = form(this.loginModal, (schemaPath) => { + required(schemaPath.email, { message: 'Email is required' }); + email(schemaPath.email, { message: 'Enter a valid email address' }); + required(schemaPath.password, { message: 'Password is required' }); + minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' }); + }); + + onSubmit(event: Event) { + this.submitted.set(true); + this.error.set(''); + event.preventDefault(); + const credentials = this.loginModal(); + console.log('login user logged in with:', credentials); + this.cd.detectChanges(); + } + + togglePasswordVisibility() { + this.showPassword.set(!this.showPassword()); + } +} diff --git a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.html b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.html index 28e2b1c9..1dddeb61 100644 --- a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.html +++ b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.html @@ -8,36 +8,96 @@

-
- -
-

Sign up

-
- -
-
- -
-
- -
-
-
- - +
+
+
-
-
-
- - +

Sign up

+
+ + @if (submitted() && registerForm.username().errors().length > 0) { +
+ @for (error of registerForm.username().errors(); track error.kind) { +
{{ error.message }}
+ } +
+ }
-
- +
+ + @if (submitted() && registerForm.email().invalid()) { +
+ @for (error of registerForm.email().errors(); track error.kind) { +
{{ error.message }}
+ } +
+ } +
+
+ @if (!showPassword()) { + + } @else { + + } + + @if (submitted() && registerForm.password().errors().length > 0) { +
+ @for (error of registerForm.password().errors(); track error.kind) { +
{{ error.message }}
+ } +
+ } +
+
+
+ + +
+
+
+
+ + +
+
+ +

Already have an account? Log in diff --git a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.scss b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.scss index e69de29b..e396528b 100644 --- a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.scss +++ b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.scss @@ -0,0 +1,12 @@ +#togglePassword { + cursor: pointer; + position: absolute; + right: 15px; + top: 50%; + transform: translateY(-50%); + + ::ng-deep.datta-rtl & { + right: auto; + left: 15px; + } +} diff --git a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.ts b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.ts index e4c68321..d24b4cab 100644 --- a/src/app/demo/pages/authentication/auth-signup/auth-signup.component.ts +++ b/src/app/demo/pages/authentication/auth-signup/auth-signup.component.ts @@ -1,10 +1,49 @@ -import { Component } from '@angular/core'; +// angular import +import { ChangeDetectorRef, Component, inject, signal } from '@angular/core'; +import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; +import { email, Field, form, minLength, required } from '@angular/forms/signals'; + +// project import +import { SharedModule } from 'src/app/theme/shared/shared.module'; @Component({ selector: 'app-auth-signup', - imports: [RouterModule], + imports: [CommonModule, RouterModule, SharedModule, Field], templateUrl: './auth-signup.component.html', styleUrls: ['./auth-signup.component.scss'] }) -export class AuthSignupComponent {} +export class AuthSignupComponent { + private cd = inject(ChangeDetectorRef); + + submitted = signal(false); + error = signal(''); + showPassword = signal(false); + + registerModel = signal<{ email: string; password: string; username: string }>({ + email: '', + password: '', + username: '' + }); + + registerForm = form(this.registerModel, (schemaPath) => { + required(schemaPath.email, { message: 'Email is required' }); + email(schemaPath.email, { message: 'Enter a valid email address' }); + required(schemaPath.password, { message: 'Password is required' }); + minLength(schemaPath.password, 8, { message: 'Password must be at least 8 characters' }); + required(schemaPath.username, { message: 'Username is required' }); + }); + + onSubmit(event: Event) { + this.submitted.set(true); + this.error.set(''); + event.preventDefault(); + const credentials = this.registerModel(); + console.log('register user logged in with:', credentials); + this.cd.detectChanges(); + } + + togglePasswordVisibility() { + this.showPassword.set(!this.showPassword()); + } +} diff --git a/src/app/demo/pages/form-element/form-element.html b/src/app/demo/pages/form-element/form-element.html index 19aa5750..ba0ab889 100644 --- a/src/app/demo/pages/form-element/form-element.html +++ b/src/app/demo/pages/form-element/form-element.html @@ -5,7 +5,7 @@

Form controls
-
+
@@ -23,7 +23,7 @@
Form controls
-
+
@@ -81,7 +81,7 @@
Readonly
Readonly plain Text
- +
@@ -99,7 +99,7 @@
Readonly plain Text
Inline
- +
@@ -130,7 +130,7 @@
Inline
Form Grid
-
+
@@ -178,7 +178,7 @@
Form Grid
Horizontal Form
- +
@@ -229,7 +229,7 @@
Horizontal Form
Horizontal Form Label Sizing
- +
@@ -258,7 +258,7 @@
Help Text
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. - +
@@ -267,7 +267,7 @@
Help Text
Validation
-
+
@@ -370,7 +370,7 @@
Supported Elements
Tooltips
- +
@@ -600,11 +600,11 @@
Buttons With Dropdowns
@@ -614,11 +614,11 @@
Buttons With Dropdowns
@@ -626,17 +626,17 @@
Buttons With Dropdowns
@@ -644,16 +644,16 @@
Buttons With Dropdowns
Dropdown
@@ -667,11 +667,11 @@
Segmented Buttons
Toggle Dropdown
@@ -682,11 +682,11 @@
Segmented Buttons
Toggle Dropdown
diff --git a/src/app/demo/ui-elements/ui-basic/basic-badge/basic-badge.component.html b/src/app/demo/ui-elements/ui-basic/basic-badge/basic-badge.component.html index b73e6b21..b523197e 100644 --- a/src/app/demo/ui-elements/ui-basic/basic-badge/basic-badge.component.html +++ b/src/app/demo/ui-elements/ui-basic/basic-badge/basic-badge.component.html @@ -81,14 +81,14 @@
- Primary - Secondary - Success - Danger - Warning - Info - Light - Dark + Primary + Secondary + Success + Danger + Warning + Info + Light + Dark
diff --git a/src/app/demo/ui-elements/ui-basic/basic-button/basic-button.component.html b/src/app/demo/ui-elements/ui-basic/basic-button/basic-button.component.html index 6537189c..74338189 100644 --- a/src/app/demo/ui-elements/ui-basic/basic-button/basic-button.component.html +++ b/src/app/demo/ui-elements/ui-basic/basic-button/basic-button.component.html @@ -395,49 +395,49 @@
@@ -450,11 +450,11 @@ Toggle Dropdown
@@ -463,11 +463,11 @@ Toggle Dropdown
@@ -476,11 +476,11 @@ Toggle Dropdown
@@ -489,11 +489,11 @@ Toggle Dropdown
@@ -502,11 +502,11 @@ Toggle Dropdown
@@ -515,11 +515,11 @@ Toggle Dropdown
@@ -529,49 +529,49 @@
@@ -584,11 +584,11 @@ Toggle Dropdown
@@ -597,11 +597,11 @@ Toggle Dropdown
@@ -610,11 +610,11 @@ Toggle Dropdown
@@ -623,11 +623,11 @@ Toggle Dropdown
@@ -636,11 +636,11 @@ Toggle Dropdown
@@ -649,11 +649,11 @@ Toggle Dropdown
@@ -665,9 +665,9 @@
@@ -675,9 +675,9 @@
@@ -685,9 +685,9 @@
@@ -695,9 +695,9 @@
@@ -705,9 +705,9 @@
@@ -715,9 +715,9 @@
@@ -729,9 +729,9 @@
@@ -739,9 +739,9 @@
@@ -749,9 +749,9 @@
@@ -759,9 +759,9 @@
@@ -769,9 +769,9 @@
@@ -779,9 +779,9 @@
@@ -793,9 +793,9 @@
@@ -803,9 +803,9 @@
@@ -813,9 +813,9 @@
@@ -823,9 +823,9 @@
@@ -833,9 +833,9 @@
@@ -843,9 +843,9 @@
@@ -857,9 +857,9 @@
@@ -867,9 +867,9 @@
@@ -877,9 +877,9 @@
@@ -887,9 +887,9 @@
@@ -897,9 +897,9 @@
@@ -907,9 +907,9 @@
@@ -993,8 +993,8 @@
@@ -1020,8 +1020,8 @@ Dropdown
- Dropdown link - Dropdown link + Dropdown link + Dropdown link
diff --git a/src/app/demo/ui-elements/ui-basic/breadcrumb-paging/breadcrumb-paging.component.html b/src/app/demo/ui-elements/ui-basic/breadcrumb-paging/breadcrumb-paging.component.html index 7ea392f1..93b02b70 100644 --- a/src/app/demo/ui-elements/ui-basic/breadcrumb-paging/breadcrumb-paging.component.html +++ b/src/app/demo/ui-elements/ui-basic/breadcrumb-paging/breadcrumb-paging.component.html @@ -13,14 +13,14 @@
Breadcrumb
@@ -43,7 +43,7 @@
Breadcrumb Icon