mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
chore: migrate to Angular 20 and Material 20
- Update Angular from 19.2.18 to 20.3.9 - Update Angular Material/CDK from 19.2.19 to 20.2.14 - Update TypeScript from 5.8.3 to 5.9.3 - Update @typescript-eslint from 6.21.0 to 8.18.2 - Update @angular-eslint from 19.8.1 to 20.0.0 - Update ng-packagr from 19.2.2 to 20.3.2 - Update @mat-datetimepicker/core from 15.0.2 to 16.0.1 (Angular 20 compatible) Angular Migrations Applied: - Convert templates to new control flow syntax (@if, @for, @switch) - Migrate DOCUMENT imports from @angular/common to @angular/core - Update Router.getCurrentNavigation() to currentNavigation signal - Replace deprecated InjectFlags enum usage - Replace TestBed.get with TestBed.inject Breaking Changes Fixed: - Remove deprecated Directionality.value setter (read-only in Angular 20) - Update ESLint config: replace @typescript-eslint/no-var-requires with no-require-imports - Remove @typescript-eslint/brace-style rule (deprecated in v8) Configuration: - Add .npmrc with legacy-peer-deps for CI/CD compatibility - Update ESLint rules for @typescript-eslint v8 compatibility BREAKING CHANGE: Requires Angular 20+ and @mat-datetimepicker/core@16.0.1 Note: Nx build system currently has plugin worker issues. TypeScript compilation verified successfully. Full builds and tests pending Nx worker resolution. See MIGRATION_SUMMARY.md for complete details. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Denys Vuika
Cursor
@@ -20,50 +20,51 @@ import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { BreadcrumbItemComponent } from '../components/breadcrumb-item/breadcrumb-item.component';
|
||||
import { BreadcrumbComponent } from '../components/breadcrumb/breadcrumb.component';
|
||||
import { NgIf } from '@angular/common';
|
||||
|
||||
import { IconModule } from '@alfresco/adf-core';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-demo-breadcrumb',
|
||||
template: `
|
||||
<adf-breadcrumb [compact]="compact">
|
||||
<adf-breadcrumb-item>
|
||||
<a href="/">Home</a>
|
||||
</adf-breadcrumb-item>
|
||||
|
||||
<adf-breadcrumb-item>
|
||||
<a href="https://www.alfresco.com/">Alfresco</a>
|
||||
</adf-breadcrumb-item>
|
||||
|
||||
<adf-breadcrumb-item>
|
||||
<a href="https://www.alfresco.com">External Link 1</a>
|
||||
</adf-breadcrumb-item>
|
||||
|
||||
<adf-breadcrumb-item>
|
||||
<a href="https://www.alfresco.com/">External Link 2</a>
|
||||
</adf-breadcrumb-item>
|
||||
|
||||
<adf-breadcrumb-item>
|
||||
<a href="https://www.alfresco.com/">External Link 3</a>
|
||||
</adf-breadcrumb-item>
|
||||
|
||||
<adf-breadcrumb-item *ngIf="showBreadcrumbItemWithMenu" aria-current="location" aria-haspopup="true">
|
||||
<div>
|
||||
Current Page
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Menu">
|
||||
<mat-icon adf-icon="menu_open" />
|
||||
</button>
|
||||
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item>Menu Item 1</button>
|
||||
<button mat-menu-item>Menu Item 2</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
<adf-breadcrumb-item>
|
||||
<a href="/">Home</a>
|
||||
</adf-breadcrumb-item>
|
||||
|
||||
<adf-breadcrumb-item>
|
||||
<a href="https://www.alfresco.com/">Alfresco</a>
|
||||
</adf-breadcrumb-item>
|
||||
|
||||
<adf-breadcrumb-item>
|
||||
<a href="https://www.alfresco.com">External Link 1</a>
|
||||
</adf-breadcrumb-item>
|
||||
|
||||
<adf-breadcrumb-item>
|
||||
<a href="https://www.alfresco.com/">External Link 2</a>
|
||||
</adf-breadcrumb-item>
|
||||
|
||||
<adf-breadcrumb-item>
|
||||
<a href="https://www.alfresco.com/">External Link 3</a>
|
||||
</adf-breadcrumb-item>
|
||||
|
||||
@if (showBreadcrumbItemWithMenu) {
|
||||
<adf-breadcrumb-item aria-current="location" aria-haspopup="true">
|
||||
<div>
|
||||
Current Page
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Menu">
|
||||
<mat-icon adf-icon="menu_open" />
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item>Menu Item 1</button>
|
||||
<button mat-menu-item>Menu Item 2</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
</adf-breadcrumb-item>
|
||||
}
|
||||
</adf-breadcrumb>
|
||||
`,
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [MatButtonModule, MatMenuModule, IconModule, BreadcrumbItemComponent, BreadcrumbComponent, NgIf]
|
||||
imports: [MatButtonModule, MatMenuModule, IconModule, BreadcrumbItemComponent, BreadcrumbComponent]
|
||||
})
|
||||
export class DemoBreadcrumbComponent {
|
||||
compact = false;
|
||||
|
||||
@@ -1,25 +1,28 @@
|
||||
<ng-container>
|
||||
<nav class="adf-breadcrumb" [class.adf-breadcrumb--compact]="compact" [attr.aria-label]="'CORE.BREADCRUMBS.TITLE' | translate" >
|
||||
<ol>
|
||||
<ng-container *ngFor="let breadcrumbTemplate of selectedBreadcrumbs; last as last">
|
||||
@for (breadcrumbTemplate of selectedBreadcrumbs; track breadcrumbTemplate; let last = $last) {
|
||||
<li adf-breadcrumb-focus class="adf-breadcrumb__item-wrapper">
|
||||
<ng-container *ngTemplateOutlet="breadcrumbTemplate" />
|
||||
<div *ngIf="!last" class="adf-breadcrumb__chevron" [class.adf-breadcrumb__chevron-before--compact]="compact" ></div>
|
||||
@if (!last) {
|
||||
<div class="adf-breadcrumb__chevron" [class.adf-breadcrumb__chevron-before--compact]="compact" ></div>
|
||||
}
|
||||
</li>
|
||||
|
||||
<li *ngIf="!last && compact === true" class="adf-breadcrumb__show-all-button-wrapper">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleCompact()"
|
||||
color="primary"
|
||||
[title]="'CORE.BREADCRUMBS.SHOWALL' | translate"
|
||||
[attr.aria-label]="'CORE.BREADCRUMBS.SHOWALL' | translate"
|
||||
>
|
||||
<mat-icon class="adf-breadcrumb__show-all-button-icon--rotate" adf-icon="more_vert" />
|
||||
</button>
|
||||
<div class="adf-breadcrumb__chevron" [class.adf-breadcrumb__chevron-after--compact]="compact" ></div>
|
||||
</li>
|
||||
</ng-container>
|
||||
@if (!last && compact === true) {
|
||||
<li class="adf-breadcrumb__show-all-button-wrapper">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="toggleCompact()"
|
||||
color="primary"
|
||||
[title]="'CORE.BREADCRUMBS.SHOWALL' | translate"
|
||||
[attr.aria-label]="'CORE.BREADCRUMBS.SHOWALL' | translate"
|
||||
>
|
||||
<mat-icon class="adf-breadcrumb__show-all-button-icon--rotate" adf-icon="more_vert" />
|
||||
</button>
|
||||
<div class="adf-breadcrumb__chevron" [class.adf-breadcrumb__chevron-after--compact]="compact" ></div>
|
||||
</li>
|
||||
}
|
||||
}
|
||||
</ol>
|
||||
</nav>
|
||||
</ng-container>
|
||||
|
||||
Reference in New Issue
Block a user