chore(deps): bump the npm_and_yarn group across 1 directory with 24 updates

apps/frontend/src/main.server.ts

@@ -1,8 +1,12 @@
-import { bootstrapApplication } from '@angular/platform-browser';
+import {
+  BootstrapContext,
+  bootstrapApplication,
+} from '@angular/platform-browser';
 
 import { AppComponent } from './app/app.component';
 import { config } from './app/app.config.server';
 
-const bootstrap = () => bootstrapApplication(AppComponent, config);
+const bootstrap = (context: BootstrapContext) =>
+  bootstrapApplication(AppComponent, config, context);
 
 export default bootstrap;

libs/feature/about-me/src/lib/about-me/about-me.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { CustomizationStateService } from '@portfolio/customization-state';
@@ -13,7 +12,6 @@ import { ProfessionalFocusComponent } from '../professional-focus/professional-f
   selector: 'lib-about-me',
   host: { '[class.print-mode]': 'isPrintMode()' },
   imports: [
-    CommonModule,
     MatCardModule,
     HeroContentComponent,
     CommunityWritingComponent,

libs/feature/about-me/src/lib/about-me/media-wrapper.component.stories.ts

@@ -1,4 +1,10 @@
-import { AfterViewInit, Component, ElementRef, input } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  inject,
+  input,
+} from '@angular/core';
 import type { Meta } from '@storybook/angular';
 
 // Default export for CSF compliance
@@ -15,7 +21,7 @@ export default {
 export class MediaWrapperComponent implements AfterViewInit {
   media = input<'screen' | 'print'>('screen');
 
-  constructor(private host: ElementRef) {}
+  private readonly host = inject(ElementRef);
 
   ngAfterViewInit(): void {
     this.simulateMedia(this.media());

libs/feature/about-me/src/lib/hero-content/hero-content.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatIconModule } from '@angular/material/icon';
@@ -7,7 +6,7 @@ import { CustomizationStateService } from '@portfolio/customization-state';
 @Component({
   selector: 'lib-hero-content',
   host: { '[class.print-mode]': 'isPrintMode()' },
-  imports: [CommonModule, MatChipsModule, MatIconModule],
+  imports: [MatChipsModule, MatIconModule],
   templateUrl: './hero-content.component.html',
   styleUrl: './hero-content.component.scss',
 })

libs/feature/contact-section/src/lib/contact-section.component.ts

@@ -1,5 +1,4 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
@@ -8,18 +7,12 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'lib-contact-section',
-  imports: [
-    CommonModule,
-    MatCardModule,
-    MatIconModule,
-    MatButtonModule,
-    MatTooltipModule,
-  ],
+  imports: [MatCardModule, MatIconModule, MatButtonModule, MatTooltipModule],
   templateUrl: './contact-section.component.html',
   styleUrl: './contact-section.component.scss',
 })
 export class ContactSectionComponent {
-  constructor(private snackBar: MatSnackBar) {}
+  private readonly snackBar = inject(MatSnackBar);
 
   async copyToClipboard(text: string): Promise<void> {
     try {

libs/feature/footer/src/lib/footer.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -9,13 +8,7 @@ import { CustomizationStateService } from '@portfolio/customization-state';
 @Component({
   selector: 'lib-footer',
   standalone: true,
-  imports: [
-    CommonModule,
-    RouterModule,
-    MatToolbarModule,
-    MatButtonModule,
-    MatIconModule,
-  ],
+  imports: [RouterModule, MatToolbarModule, MatButtonModule, MatIconModule],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss',
 })

libs/feature/page-home/src/lib/home/customization-sidenav.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -9,7 +8,6 @@ import { CustomizationStateService } from '@portfolio/customization-state';
 @Component({
   selector: 'lib-customization-sidenav',
   imports: [
-    CommonModule,
     MatSidenavModule,
     MatButtonModule,
     MatCheckboxModule,

libs/feature/page-legal/src/lib/language-switch/language-switch.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { Component, input, output } from '@angular/core';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 
@@ -7,7 +6,7 @@ import { Language } from './language.enum';
 @Component({
   selector: 'legal-language-switch',
   standalone: true,
-  imports: [CommonModule, MatButtonToggleModule],
+  imports: [MatButtonToggleModule],
   templateUrl: './language-switch.component.html',
   styleUrls: ['./language-switch.component.scss'],
 })

libs/feature/page-legal/src/lib/legal-texts/generated-wrapper-components/imprint.de.component.ts

@@ -1,9 +1,8 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'legal-imprint-de',
-  imports: [CommonModule],
+  imports: [],
   templateUrl: '../generated/imprint.de.html',
   styleUrl: './generated-wrapper-components.scss',
 })

libs/feature/page-legal/src/lib/legal-texts/generated-wrapper-components/imprint.en.component.ts

@@ -1,9 +1,8 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'legal-imprint-en',
-  imports: [CommonModule],
+  imports: [],
   templateUrl: '../generated/imprint.en.html',
   styleUrl: './generated-wrapper-components.scss',
 })

libs/feature/page-legal/src/lib/legal-texts/generated-wrapper-components/privacy-policy.de.component.ts

@@ -1,9 +1,8 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'legal-privacy-policy-de',
-  imports: [CommonModule],
+  imports: [],
   templateUrl: '../generated/privacy-policy.de.html',
   styleUrl: './generated-wrapper-components.scss',
 })

libs/feature/page-legal/src/lib/legal-texts/generated-wrapper-components/privacy-policy.en.component.ts

@@ -1,9 +1,8 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'legal-privacy-policy-en',
-  imports: [CommonModule],
+  imports: [],
   templateUrl: '../generated/privacy-policy.en.html',
   styleUrl: './generated-wrapper-components.scss',
 })

libs/feature/page-legal/src/lib/legal-texts/legal-text.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { Component, input } from '@angular/core';
 
 import { Language } from '../language-switch/language.enum';
@@ -10,7 +9,6 @@ import { PrivacyPolicyEnComponent } from './generated-wrapper-components/privacy
 @Component({
   selector: 'legal-text',
   imports: [
-    CommonModule,
     ImprintDeComponent,
     ImprintEnComponent,
     PrivacyPolicyDeComponent,

libs/feature/project-list/src/lib/project-item-meta-tiles.component.ts

@@ -1,11 +1,10 @@
-import { CommonModule } from '@angular/common';
 import { Component, input } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { Project } from '@portfolio/search-engine-domain';
 
 @Component({
   selector: 'lib-project-item-meta-tiles',
-  imports: [CommonModule, MatIconModule],
+  imports: [MatIconModule],
   templateUrl: './project-item-meta-tiles.component.html',
   styleUrl: './project-item-meta-tiles.component.scss',
 })

libs/feature/project-list/src/lib/project-item.component.html

@@ -31,14 +31,14 @@ <h3 [class.compact]="compact()">{{ project().title }}</h3>
   </header>
   <div>
     <!-- Compact Content (Collapsed State) -->
-    <section *ngIf="!showExpandedContent" class="compact-content">
+    @if (!showExpandedContent) {
+    <section class="compact-content">
       <div class="compact-description">
         {{ project().compactDescription }}
       </div>
       <div class="key-achievements" [class.compact]="compact()">
         {{ project().keyAchievements }}
       </div>
-
       @if (!printMode()) {
       <nav class="content-toggle">
         <button
@@ -53,33 +53,36 @@ <h3 [class.compact]="compact()">{{ project().title }}</h3>
       </nav>
       }
     </section>
+    }
 
     <!-- Expanded Content (Full State) -->
-    <section *ngIf="showExpandedContent" class="expanded-content">
+    @if (showExpandedContent) {
+    <section class="expanded-content">
       <div class="expanded-description">{{ project().fullDescription }}</div>
-
       <section class="features-section">
         <h4>Key Features</h4>
         <mat-list dense>
-          <mat-list-item *ngFor="let feature of project().features">
+          @for (feature of project().features; track feature) {
+          <mat-list-item>
             <mat-icon matListItemIcon color="primary">check</mat-icon>
             <div matListItemTitle>{{ feature }}</div>
           </mat-list-item>
+          }
         </mat-list>
       </section>
-
       <section class="highlights-section">
         <h4>Highlights</h4>
         <mat-list dense>
-          <mat-list-item *ngFor="let highlight of project().highlights">
+          @for (highlight of project().highlights; track highlight) {
+          <mat-list-item>
             <mat-icon matListItemIcon color="accent">star</mat-icon>
             <div matListItemTitle>
               {{ highlight }}
             </div>
           </mat-list-item>
+          }
         </mat-list>
       </section>
-
       <nav class="content-toggle">
         <button
           mat-button
@@ -92,6 +95,7 @@ <h4>Highlights</h4>
         </button>
       </nav>
     </section>
+    }
 
     <lib-project-item-meta-tiles
       [project]="project()"

libs/feature/project-list/src/lib/project-item.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { Component, input, output } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -14,7 +13,6 @@ import { ProjectItemMetaTilesComponent } from './project-item-meta-tiles.compone
 @Component({
   selector: 'lib-project-item',
   imports: [
-    CommonModule,
     MatButtonModule,
     MatCardModule,
     MatChipsModule,

libs/feature/skill-section/src/lib/skill-section.component.ts

@@ -5,7 +5,6 @@ import {
   Component,
   ElementRef,
   HostListener,
-  Inject,
   inject,
   OnDestroy,
   PLATFORM_ID,
@@ -67,8 +66,7 @@ export class SkillSectionComponent implements AfterViewInit, OnDestroy {
 
   private renderer = inject(Renderer2);
   private changeDetectorRef = inject(ChangeDetectorRef);
-
-  constructor(@Inject(PLATFORM_ID) private platformId: object) {}
+  private readonly platformId = inject(PLATFORM_ID);
 
   ngAfterViewInit(): void {
     this.showSkeletons$.pipe(takeUntil(this.destroy$)).subscribe(show => {

libs/feature/tag-input/src/lib/tag-input/tag-input.component.html

@@ -21,16 +21,17 @@
         Add
       </button>
     </mat-form-field>
-    <div *ngIf="tags.length > 0" class="tag-list">
+    @if (tags.length > 0) {
+    <div class="tag-list">
+      @for (tag of tags; track tag) {
       <lib-color-chip
-        *ngFor="let tag of tags"
         [text]="tag"
         color="green"
         [showCloseButton]="true"
         (closeClick)="removeTag(tag)"
         class="search-tag"
       ></lib-color-chip>
-      @if((loadingProgress$ | async); as progress) { @if(progress < 100) {
+      } @if((loadingProgress$ | async); as progress) { @if(progress < 100) {
       <mat-progress-spinner
         class="progress-indicator"
         mode="determinate"
@@ -40,5 +41,6 @@
       />
       } }
     </div>
+    }
   </div>
 </div>

libs/ui/color-chip-list/src/lib/color-chip-list.component.ts

@@ -1,4 +1,4 @@
-import { CommonModule, isPlatformServer } from '@angular/common';
+import { isPlatformServer } from '@angular/common';
 import {
   AfterViewInit,
   booleanAttribute,
@@ -7,7 +7,7 @@ import {
   computed,
   ElementRef,
   HostListener,
-  Inject,
+  inject,
   input,
   PLATFORM_ID,
   signal,
@@ -32,7 +32,7 @@ const DEFAULT_MAX_ROW_WIDTH = 1000;
 @Component({
   selector: 'lib-color-chip-list',
   host: { '[class.print-mode]': 'printMode()' },
-  imports: [CommonModule, MatButtonModule, MatIconModule, ColorChipComponent],
+  imports: [MatButtonModule, MatIconModule, ColorChipComponent],
   templateUrl: './color-chip-list.component.html',
   styleUrl: './color-chip-list.component.scss',
 })
@@ -63,11 +63,11 @@ export class ColorChipListComponent implements AfterViewInit {
     () => this.allItems().length > this.itemsFittingInRow().length
   );
 
-  constructor(
-    @Inject(PLATFORM_ID) private platformId: object,
-    private colorChipDimensionsService: ColorChipDimensionsService,
-    private changeDetectorRef: ChangeDetectorRef
-  ) {}
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly colorChipDimensionsService = inject(
+    ColorChipDimensionsService
+  );
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
 
   ngAfterViewInit(): void {
     setTimeout(() => {

libs/ui/color-chip/src/lib/color-chip-dimensions.service.ts

@@ -1,5 +1,5 @@
 import { isPlatformServer } from '@angular/common';
-import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { inject, Injectable, PLATFORM_ID } from '@angular/core';
 
 import { ChipSpacing } from './color-chip.component';
 
@@ -14,7 +14,7 @@ export interface ColorChipInputs {
   providedIn: 'root',
 })
 export class ColorChipDimensionsService {
-  constructor(@Inject(PLATFORM_ID) private platformId: object) {}
+  private readonly platformId = inject(PLATFORM_ID);
 
   getWidth(colorChipInputs: ColorChipInputs): number {
     const textWidth = this.getTextWidth(colorChipInputs.text);