Skip to content

chore(angular): update Angular from v20 to v21 #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lannodev merged 1 commit into from
Dec 24, 2025
Merged

chore(angular): update Angular from v20 to v21 #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10,679 changes: 6,212 additions & 4,467 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

34 changes: 17 additions & 17 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,14 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^20.0.2",
"@angular/common": "^20.0.2",
"@angular/compiler": "^20.0.2",
"@angular/core": "^20.0.2",
"@angular/forms": "^20.0.2",
"@angular/platform-browser": "^20.0.2",
"@angular/platform-browser-dynamic": "^20.0.2",
"@angular/router": "^20.0.2",
"@angular/animations": "^21.0.6",
"@angular/common": "^21.0.6",
"@angular/compiler": "^21.0.6",
"@angular/core": "^21.0.6",
"@angular/forms": "^21.0.6",
"@angular/platform-browser": "^21.0.6",
"@angular/platform-browser-dynamic": "^21.0.6",
"@angular/router": "^21.0.6",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.10",
"@tailwindcss/postcss": "^4.0.3",
Expand All @@ -52,9 +52,9 @@
"tslib": "^2.3.0"
},
"devDependencies": {
"@angular/build": "^20.0.1",
"@angular/cli": "^20.0.1",
"@angular/compiler-cli": "^20.0.2",
"@angular/build": "^21.0.4",
"@angular/cli": "^21.0.4",
"@angular/compiler-cli": "^21.0.6",
"@playwright/test": "^1.50.1",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
Expand All @@ -67,15 +67,15 @@
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"postcss": "^8.5.3",
"prettier": "^2.7.1",
"prettier-plugin-tailwindcss": "^0.1.12",
"tailwind-scrollbar": "^4.0.0",
"tailwindcss": "^4.0.5",
"typescript": "~5.8.3"
"prettier": "^3.7.4",
"prettier-plugin-tailwindcss": "^0.7.2",
"tailwind-scrollbar": "^4.0.2",
"tailwindcss": "^4.1.18",
"typescript": "~5.9.3"
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
}
}
128 changes: 69 additions & 59 deletions src/app/modules/auth/pages/sign-in/sign-in.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,74 +27,84 @@ <h2 class="text-foreground mb-1 text-3xl font-semibold">Hello Again <span class=
class="peer block"
placeholder=" "
formControlName="email" />
<label
for="email"
[ngClass]="{ 'peer-focus:text-destructive!': submitted && f['email'].errors }"
class="bg-background text-muted-foreground peer-focus:text-primary absolute top-2 z-10 origin-[0] -translate-y-4 scale-95 transform px-2 text-sm duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-95 peer-focus:px-2 ltr:left-1 rtl:right-1">
Email address
</label>
<label
for="email"
[ngClass]="{ 'peer-focus:text-destructive!': submitted && f['email'].errors }"
class="bg-background text-muted-foreground peer-focus:text-primary absolute top-2 z-10 origin-[0] -translate-y-4 scale-95 transform px-2 text-sm duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-95 peer-focus:px-2 ltr:left-1 rtl:right-1">
Email address
</label>
</div>
@if (submitted && f['email'].errors) {
<div class="is__invalid-error">
@if (f['email'].errors['required']) {
<div>Required field</div>
}
@if (f['email'].errors['email']) {
<div>Email must be an email address valid</div>
}
</div>
}
</div>
<div *ngIf="submitted && f['email'].errors" class="is__invalid-error">
<div *ngIf="f['email'].errors['required']">Required field</div>
<div *ngIf="f['email'].errors['email']">Email must be an email address valid</div>
</div>
</div>

<div class="form__group">
<div class="relative">
<input
[type]="passwordTextType ? 'text' : 'password'"
id="password"
[ngClass]="{ 'is__invalid-input': submitted && f['password'].errors }"
class="peer block"
placeholder=" "
formControlName="password" />
<label
for="password"
[ngClass]="{ 'peer-focus:text-destructive!': submitted && f['password'].errors }"
class="bg-background text-muted-foreground peer-focus:text-primary absolute top-2 z-10 origin-[0] -translate-y-4 scale-95 transform px-2 text-sm duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-95 peer-focus:px-2 ltr:left-1 rtl:right-1">
Password
</label>
<span
class="text-muted-foreground absolute top-2 cursor-pointer ltr:right-3 rtl:left-3"
(click)="togglePasswordTextType()">
<svg-icon
<div class="form__group">
<div class="relative">
<input
[type]="passwordTextType ? 'text' : 'password'"
id="password"
[ngClass]="{ 'is__invalid-input': submitted && f['password'].errors }"
class="peer block"
placeholder=" "
formControlName="password" />
<label
for="password"
[ngClass]="{ 'peer-focus:text-destructive!': submitted && f['password'].errors }"
class="bg-background text-muted-foreground peer-focus:text-primary absolute top-2 z-10 origin-[0] -translate-y-4 scale-95 transform px-2 text-sm duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-95 peer-focus:px-2 ltr:left-1 rtl:right-1">
Password
</label>
<span
class="text-muted-foreground absolute top-2 cursor-pointer ltr:right-3 rtl:left-3"
(click)="togglePasswordTextType()">
<svg-icon
[src]="
!passwordTextType
? 'assets/icons/heroicons/outline/eye-off.svg'
: 'assets/icons/heroicons/outline/eye.svg'
"
[svgClass]="'h-5 w-5'">
</svg-icon>
</span>
[svgClass]="'h-5 w-5'">
</svg-icon>
</span>
</div>
@if (submitted && f['password'].errors) {
<div class="is__invalid-error">
@if (f['password'].errors['required']) {
<div>Required field</div>
}
</div>
}
</div>
</div>
<div *ngIf="submitted && f['password'].errors" class="is__invalid-error">
<div *ngIf="f['password'].errors['required']">Required field</div>
</div>
</div>
</div>

<div class="mb-2 flex items-center justify-between space-x-3">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" />
<label for="remember-me" class="text-muted-foreground ml-2 block text-sm"> Remember me </label>
</div>
<div class="mb-2 flex items-center justify-between space-x-3">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" />
<label for="remember-me" class="text-muted-foreground ml-2 block text-sm"> Remember me </label>
</div>

<app-button routerLink="/auth/forgot-password" impact="none" tone="primary" shape="rounded" size="small">
Forgot your password?
</app-button>
</div>
<app-button routerLink="/auth/forgot-password" impact="none" tone="primary" shape="rounded" size="small">
Forgot your password?
</app-button>
</div>

<!-- Submit Button -->
<div>
<app-button full impact="bold" tone="primary" shape="rounded" size="medium">Sign in</app-button>
</div>
<!-- Submit Button -->
<div>
<app-button full impact="bold" tone="primary" shape="rounded" size="medium">Sign in</app-button>
</div>

<!-- Sign-up -->
<div class="text-muted-foreground flex items-center text-sm">
Not a Member yet?
<app-button routerLink="/auth/sign-up" impact="none" tone="primary" shape="rounded" size="small">
Sign up
</app-button>
</div>
</form>
<!-- Sign-up -->
<div class="text-muted-foreground flex items-center text-sm">
Not a Member yet?
<app-button routerLink="/auth/sign-up" impact="none" tone="primary" shape="rounded" size="small">
Sign up
</app-button>
</div>
</form>
4 changes: 2 additions & 2 deletions src/app/modules/auth/pages/sign-in/sign-in.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { NgClass, NgIf } from '@angular/common';
import { NgClass } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { Router, RouterLink } from '@angular/router';
Expand All @@ -9,7 +9,7 @@ import { ButtonComponent } from '../../../../shared/components/button/button.com
selector: 'app-sign-in',
templateUrl: './sign-in.component.html',
styleUrls: ['./sign-in.component.css'],
imports: [FormsModule, ReactiveFormsModule, RouterLink, AngularSvgIconModule, NgIf, ButtonComponent, NgClass],
imports: [FormsModule, ReactiveFormsModule, RouterLink, AngularSvgIconModule, ButtonComponent, NgClass],
})
export class SignInComponent implements OnInit {
form!: FormGroup;
Expand Down
9 changes: 5 additions & 4 deletions ...app/modules/dashboard/components/nft/nft-auctions-table/nft-auctions-table.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,12 @@ <h3 class="text-md font-bold text-foreground">Active Auctions</h3>
<!--end Table head-->
<!--Table body-->
<tbody>
<tr
*ngFor="let auction of activeAuction"
[auction]="auction"
nft-auctions-table-item
@for (auction of activeAuction; track auction) {
<tr
[auction]="auction"
nft-auctions-table-item
class="border-b border-dashed border-border hover:bg-card"></tr>
}
</tbody>
<!--end::Table body-->
</table>
Expand Down
4 changes: 2 additions & 2 deletions src/app/modules/dashboard/components/nft/nft-auctions-table/nft-auctions-table.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { NgFor } from '@angular/common';

import { Component, OnInit } from '@angular/core';
import { Nft } from '../../../models/nft';
import { NftAuctionsTableItemComponent } from '../nft-auctions-table-item/nft-auctions-table-item.component';

@Component({
selector: '[nft-auctions-table]',
templateUrl: './nft-auctions-table.component.html',
imports: [NgFor, NftAuctionsTableItemComponent],
imports: [NftAuctionsTableItemComponent],
})
export class NftAuctionsTableComponent implements OnInit {
public activeAuction: Nft[] = [];
Expand Down
24 changes: 13 additions & 11 deletions src/app/modules/layout/components/navbar/navbar-menu/navbar-menu.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
<div class="dropdown relative inline-block" *ngFor="let menu of menuService.pagesMenu">
<!-- Button -->
<button
@for (menu of menuService.pagesMenu; track menu) {
<div class="dropdown relative inline-block">
<!-- Button -->
<button
[ngClass]="
menu.selected || menu.active
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground/50 hover:bg-card hover:text-muted-foreground '
"
class="mr-2 inline-flex rounded-md px-3 py-2 text-sm font-medium">
<span>{{ menu.group }}</span>
</button>
<!-- Dropdown -->
<div
class="dropdown-content absolute top-[100%] min-w-[200px] origin-top-left z-10"
navbar-submenu
class="mr-2 inline-flex rounded-md px-3 py-2 text-sm font-medium">
<span>{{ menu.group }}</span>
</button>
<!-- Dropdown -->
<div
class="dropdown-content absolute top-[100%] min-w-[200px] origin-top-left z-10"
navbar-submenu
[submenu]="menu.items"></div>
</div>
</div>
}
4 changes: 2 additions & 2 deletions src/app/modules/layout/components/navbar/navbar-menu/navbar-menu.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { NgClass, NgFor } from '@angular/common';
import { NgClass } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'src/app/core/models/menu.model';
import { MenuService } from '../../../services/menu.service';
Expand All @@ -8,7 +8,7 @@ import { NavbarSubmenuComponent } from '../navbar-submenu/navbar-submenu.compone
selector: 'app-navbar-menu',
templateUrl: './navbar-menu.component.html',
styleUrls: ['./navbar-menu.component.css'],
imports: [NgFor, NgClass, NavbarSubmenuComponent],
imports: [NgClass, NavbarSubmenuComponent],
})
export class NavbarMenuComponent implements OnInit {
private showMenuClass = ['scale-100', 'animate-fade-in-up', 'opacity-100', 'pointer-events-auto'];
Expand Down
Loading
Loading