chore(images): apply NgOptimizedImage

javascript/apps/taiga/src/app/modules/auth/components/auth-forest/auth-forest.component.css

@@ -7,6 +7,7 @@ Copyright (c) 2023-present Kaleidos INC
 */
 
 img {
+  inline-size: auto;
   inset-block-start: var(--banner-height);
   max-block-size: calc(100vh - var(--banner-height));
   pointer-events: none;

javascript/apps/taiga/src/app/modules/auth/components/auth-forest/auth-forest.component.html

@@ -7,12 +7,16 @@
 -->
 
 <img
-  src="/assets/images/signup/login-left.svg"
+  ngSrc="/assets/images/signup/login-left.svg"
   alt=""
+  width="385"
+  height="1080"
   class="left" />
 <img
-  src="/assets/images/signup/login-right.svg"
+  ngSrc="/assets/images/signup/login-right.svg"
   alt=""
+  width="485"
+  height="1081"
   class="right" />
 
 <ng-content></ng-content>

javascript/apps/taiga/src/app/modules/auth/components/auth-forest/auth-forest.component.ts

@@ -6,14 +6,14 @@
  * Copyright (c) 2023-present Kaleidos INC
  */
 
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'tg-auth-forest',
   standalone: true,
   templateUrl: './auth-forest.component.html',
   styleUrls: ['./auth-forest.component.css'],
-  imports: [CommonModule],
+  imports: [CommonModule, NgOptimizedImage],
 })
 export class AuthForestComponent {}

javascript/apps/taiga/src/app/modules/auth/components/social-login-button/social-login-button.component.html

@@ -12,7 +12,9 @@
     <img
       class="social-logo"
       role="presentation"
-      [attr.src]="socialImage"
+      width="18"
+      height="18"
+      [ngSrc]="socialImage"
       alt="" />
     {{ socialText }}
   </a>

javascript/apps/taiga/src/app/modules/auth/components/social-login-button/social-login-button.component.ts

@@ -6,7 +6,7 @@
  * Copyright (c) 2023-present Kaleidos INC
  */
 
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import {
@@ -30,7 +30,7 @@ interface SocialParams {
   standalone: true,
   templateUrl: './social-login-button.component.html',
   styleUrls: ['./social-login-button.component.css'],
-  imports: [CommonModule, TranslocoModule],
+  imports: [CommonModule, TranslocoModule, NgOptimizedImage],
   providers: [
     {
       provide: TRANSLOCO_SCOPE,

javascript/apps/taiga/src/app/modules/auth/feature-login/auth-feature-login.component.html

@@ -14,7 +14,9 @@
         <img
           class="taiga-logo"
           role="presentation"
-          src="/assets/images/LogoTaiga.svg"
+          width="56"
+          height="56"
+          ngSrc="/assets/images/LogoTaiga.svg"
           alt="" />
         <h1 class="auth-title">{{ t('login.title') }}</h1>
         <tg-social-login *ngIf="displaySocialNetworks"></tg-social-login>

javascript/apps/taiga/src/app/modules/auth/feature-login/auth-feature-login.component.ts

@@ -13,7 +13,7 @@ import { fadeIntOutAnimation } from '~/app/shared/utils/animations';
 import { AuthService } from '../services/auth.service';
 import { LoginComponent } from './components/login/login.component';
 import { SocialLoginComponent } from '../components/social-login/social-login.component';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { AuthForestComponent } from '../components/auth-forest/auth-forest.component';
 import { TranslocoDirective } from '@ngneat/transloco';
 import { TitleComponent } from '~/app/shared/title/title.component';
@@ -32,6 +32,7 @@ import { TitleComponent } from '~/app/shared/title/title.component';
     SocialLoginComponent,
     LoginComponent,
     RouterLink,
+    NgOptimizedImage,
   ],
 })
 export class AuthFeatureLoginComponent implements OnInit {

javascript/apps/taiga/src/app/modules/auth/feature-reset-password/auth-feature-reset-password.component.html

@@ -28,7 +28,9 @@
           <img
             class="taiga-logo"
             role="presentation"
-            src="/assets/images/LogoTaiga.svg"
+            width="56"
+            height="56"
+            ngSrc="/assets/images/LogoTaiga.svg"
             alt="" />
           <h1 class="auth-title">{{ t('reset_password.title') }}</h1>
           <p class="description">{{ t('reset_password.description') }}</p>
@@ -96,7 +98,9 @@ <h1 class="auth-title">{{ t('reset_password.title') }}</h1>
         data-test="verify-email-page">
         <img
           class="owl"
-          src="/assets/images/signup/verify-email-owl.svg"
+          ngSrc="/assets/images/signup/verify-email-owl.svg"
+          width="180"
+          height="146"
           alt="" />
         <h1 class="verify-title">{{ t('reset_password.confirm.title') }}</h1>
         <p class="verify-text">{{ t('reset_password.confirm.description') }}</p>

javascript/apps/taiga/src/app/modules/auth/feature-reset-password/auth-feature-reset-password.component.ts

@@ -22,7 +22,7 @@ import {
 } from '../data-access/+state/actions/auth.actions';
 import { selectShowResetPasswordConfirmation } from '../data-access/+state/selectors/auth.selectors';
 import { AuthForestComponent } from '../components/auth-forest/auth-forest.component';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 
 import { TranslocoDirective } from '@ngneat/transloco';
 import { InputsModule } from '@taiga/ui/inputs';
@@ -53,6 +53,7 @@ import { TitleComponent } from '~/app/shared/title/title.component';
     InternalLinkDirective,
     RouterLink,
     getUrlPipe,
+    NgOptimizedImage,
   ],
 })
 export class AuthFeatureResetPasswordComponent implements OnInit {

javascript/apps/taiga/src/app/modules/auth/feature-reset-password/components/new-password.component.html

@@ -12,7 +12,9 @@
       <img
         class="taiga-logo"
         role="presentation"
-        src="/assets/images/LogoTaiga.svg"
+        width="56"
+        height="56"
+        ngSrc="/assets/images/LogoTaiga.svg"
         alt="" />
       <h1 class="auth-title">{{ t('reset_password.new_password.title') }}</h1>
 

javascript/apps/taiga/src/app/modules/auth/feature-reset-password/components/new-password.component.ts

@@ -22,7 +22,7 @@ import { PasswordStrengthComponent } from '@taiga/ui/inputs/password-strength/pa
 import { newPassword } from '~/app/modules/auth/data-access/+state/actions/auth.actions';
 import { TuiButtonModule } from '@taiga-ui/core';
 import { TranslocoDirective } from '@ngneat/transloco';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { InputsModule } from '@taiga/ui/inputs';
 import { ButtonLoadingDirective } from '~/app/shared/directives/button-loading/button-loading.directive';
 import { InternalLinkDirective } from '~/app/shared/directives/internal-link/internal-link.directive';
@@ -44,6 +44,7 @@ import { getUrlPipe } from '~/app/shared/pipes/get-url/get-url.pipe';
     InternalLinkDirective,
     RouterLink,
     getUrlPipe,
+    NgOptimizedImage,
   ],
 })
 export class NewPasswordComponent implements OnInit {

javascript/apps/taiga/src/app/modules/auth/feature-sign-up/auth-feature-sign-up.component.html

@@ -35,7 +35,9 @@
         <img
           class="taiga-logo"
           role="presentation"
-          src="/assets/images/LogoTaiga.svg"
+          width="56"
+          height="56"
+          ngSrc="/assets/images/LogoTaiga.svg"
           alt="" />
         <h1 class="auth-title">{{ t('signup.title') }}</h1>
         <p class="auth-subtitle">{{ t('signup.subtitle') }}</p>

javascript/apps/taiga/src/app/modules/auth/feature-sign-up/auth-feature-sign-up.component.ts

@@ -23,7 +23,7 @@ import { AuthFeatureVerifyEmailComponent } from './components/verify-email/verif
 import { SignupComponent } from './components/signup/signup.component';
 import { TuiButtonModule } from '@taiga-ui/core';
 import { SocialLoginComponent } from '../components/social-login/social-login.component';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { TranslocoDirective } from '@ngneat/transloco';
 import { ContextNotificationComponent } from '@taiga/ui/context-notification/context-notification.component';
 import { InlineNotificationComponent } from '@taiga/ui/inline-notification';
@@ -55,6 +55,7 @@ import { TitleComponent } from '~/app/shared/title/title.component';
     InternalLinkDirective,
     AuthFeatureVerifyEmailComponent,
     getUrlPipe,
+    NgOptimizedImage,
   ],
 })
 export class AuthFeatureSignUpComponent implements OnInit {

javascript/apps/taiga/src/app/modules/auth/feature-sign-up/components/verify-email/verify-email.component.html

@@ -11,7 +11,9 @@
     data-test="verify-email-page">
     <img
       class="owl"
-      src="/assets/images/signup/verify-email-owl.svg"
+      ngSrc="/assets/images/signup/verify-email-owl.svg"
+      width="182"
+      height="148"
       alt="" />
     <h1 class="verify-title">{{ t('verify.title') }}</h1>
     <p class="verify-text">{{ t('verify.verification_link_sent') }}</p>

javascript/apps/taiga/src/app/modules/auth/feature-sign-up/components/verify-email/verify-email.component.ts

@@ -26,7 +26,7 @@ import {
 import { SignUp } from '~/app/modules/auth/feature-sign-up/models/sign-up.model';
 import { AppService } from '~/app/services/app.service';
 import { TranslocoDirective } from '@ngneat/transloco';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 
 @UntilDestroy()
 @Component({
@@ -35,7 +35,7 @@ import { CommonModule } from '@angular/common';
   styleUrls: ['./verify-email.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, TranslocoDirective, TuiLinkModule],
+  imports: [CommonModule, TranslocoDirective, TuiLinkModule, NgOptimizedImage],
 })
 export class AuthFeatureVerifyEmailComponent implements OnInit {
   @Input()

javascript/apps/taiga/src/app/modules/errors/403/error-403.component.html

@@ -13,7 +13,9 @@
         [routerLink]="['/']"
         [attr.aria-label]="t('navigation.go_home')">
         <img
-          src="/assets/images/LogoTaiga.svg"
+          width="56"
+          height="56"
+          ngSrc="/assets/images/LogoTaiga.svg"
           alt="" />
       </a>
       <h1 class="error-title">{{ t('errors_page.403.title') }}</h1>
@@ -30,7 +32,9 @@ <h1 class="error-title">{{ t('errors_page.403.title') }}</h1>
     </div>
     <img
       class="error-background-image"
-      src="https://c.tenor.com/TbuJBSvnCLkAAAAd/cheese-challenge-cat.gif"
+      width="600"
+      height="608"
+      ngSrc="https://c.tenor.com/TbuJBSvnCLkAAAAd/cheese-challenge-cat.gif"
       alt="" />
   </div>
 </ng-container>

javascript/apps/taiga/src/app/modules/errors/403/error-403.component.ts

@@ -11,14 +11,20 @@ import { Router, RouterLink } from '@angular/router';
 import { ConfigService } from '@taiga/cdk/services/config';
 import { TuiButtonModule } from '@taiga-ui/core';
 import { TranslocoDirective } from '@ngneat/transloco';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 
 @Component({
   selector: 'tg-error-403',
   templateUrl: './error-403.component.html',
   styleUrls: ['./error-403.component.css'],
   standalone: true,
-  imports: [CommonModule, TranslocoDirective, RouterLink, TuiButtonModule],
+  imports: [
+    CommonModule,
+    TranslocoDirective,
+    RouterLink,
+    TuiButtonModule,
+    NgOptimizedImage,
+  ],
 })
 export class Error403Component {
   constructor(private router: Router, public config: ConfigService) {}

javascript/apps/taiga/src/app/modules/errors/404/error-404.component.html

@@ -13,7 +13,9 @@
         [routerLink]="['/']"
         [attr.aria-label]="t('navigation.go_home')">
         <img
-          src="/assets/images/LogoTaiga.svg"
+          width="56"
+          height="56"
+          ngSrc="/assets/images/LogoTaiga.svg"
           alt="" />
       </a>
       <h1 class="error-title">{{ t('errors_page.404.title') }}</h1>
@@ -30,7 +32,9 @@ <h1 class="error-title">{{ t('errors_page.404.title') }}</h1>
     </div>
     <img
       class="error-background-image"
-      src="https://media.tenor.com/VBTAFdK3d1MAAAAd/dog-cute.gif"
+      width="512"
+      height="640"
+      ngSrc="https://media.tenor.com/VBTAFdK3d1MAAAAd/dog-cute.gif"
       alt="" />
   </div>
 </ng-container>

javascript/apps/taiga/src/app/modules/errors/404/error-404.component.ts

@@ -11,14 +11,20 @@ import { Router, RouterLink } from '@angular/router';
 import { ConfigService } from '@taiga/cdk/services/config';
 import { TuiButtonModule } from '@taiga-ui/core';
 import { TranslocoDirective } from '@ngneat/transloco';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 
 @Component({
   selector: 'tg-error-404',
   templateUrl: './error-404.component.html',
   styleUrls: ['./error-404.component.css'],
   standalone: true,
-  imports: [CommonModule, TranslocoDirective, RouterLink, TuiButtonModule],
+  imports: [
+    CommonModule,
+    TranslocoDirective,
+    RouterLink,
+    TuiButtonModule,
+    NgOptimizedImage,
+  ],
 })
 export class Error404Component {
   constructor(private router: Router, public config: ConfigService) {}

javascript/apps/taiga/src/app/modules/errors/500/error-500.component.html

@@ -13,7 +13,9 @@
         [routerLink]="['/']"
         [attr.aria-label]="t('navigation.go_home')">
         <img
-          src="/assets/images/LogoTaiga.svg"
+          width="56"
+          height="56"
+          ngSrc="/assets/images/LogoTaiga.svg"
           alt="" />
       </a>
       <h1 class="error-title">{{ t('errors_page.500.something_wrong') }}</h1>
@@ -38,8 +40,10 @@ <h1 class="error-title">{{ t('errors_page.500.something_wrong') }}</h1>
       </button>
     </div>
     <img
+      width="674"
+      height="495"
       class="error-background-image"
-      src="/assets/images/error-500.svg"
+      ngSrc="/assets/images/error-500.svg"
       alt="" />
     <a
       class="error-home"

javascript/apps/taiga/src/app/modules/errors/500/error-500.component.ts

@@ -11,14 +11,20 @@ import { ConfigService } from '@taiga/cdk/services/config';
 import { Router, RouterLink } from '@angular/router';
 import { TuiButtonModule } from '@taiga-ui/core';
 import { TranslocoDirective } from '@ngneat/transloco';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 
 @Component({
   selector: 'tg-error-500',
   templateUrl: './error-500.component.html',
   styleUrls: ['./error-500.component.css'],
   standalone: true,
-  imports: [CommonModule, TranslocoDirective, RouterLink, TuiButtonModule],
+  imports: [
+    CommonModule,
+    TranslocoDirective,
+    RouterLink,
+    TuiButtonModule,
+    NgOptimizedImage,
+  ],
 })
 export class Error500Component {
   constructor(private router: Router, public config: ConfigService) {}

javascript/apps/taiga/src/app/modules/project/feature-kanban/components/empty/kanban-empty.component.ts

@@ -16,8 +16,7 @@ import {
 import { TranslocoModule } from '@ngneat/transloco';
 import { TuiButtonModule } from '@taiga-ui/core';
 
-import { CommonModule } from '@angular/common';
-import { NgOptimizedImage } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 
 @Component({
   selector: 'tg-kanban-empty',

javascript/apps/taiga/src/app/shared/invite-user-modal/invite-user-modal.component.html

@@ -214,7 +214,9 @@
               <img
                 class="tip-icon"
                 role="presentation"
-                src="/assets/images/curved-arrow.svg"
+                width="176"
+                height="150"
+                ngSrc="/assets/images/curved-arrow.svg"
                 alt="" />
               <p class="tip">{{ t('invitation_modal.add_people') }}</p>
             </div>

javascript/apps/taiga/src/app/shared/invite-user-modal/invite-user-modal.component.ts

@@ -79,7 +79,7 @@ import { UserCardComponent } from '../user-card/user-card.component';
 import { TuiDropdownModule } from '@taiga-ui/core/directives/dropdown';
 import { TuiAutoFocusModule, TuiActiveZoneModule } from '@taiga-ui/cdk';
 import { TuiScrollbarModule } from '@taiga-ui/core/components/scrollbar';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { InputsModule } from '@taiga/ui/inputs';
 import { BadgeComponent } from '@taiga/ui/badge/badge.component';
 import { ContextNotificationComponent } from '@taiga/ui/context-notification/context-notification.component';
@@ -141,6 +141,7 @@ interface InviteUserState {
     TuiLinkModule,
     ButtonLoadingDirective,
     capitalizePipe,
+    NgOptimizedImage,
   ],
 })
 export class InviteUserModalComponent implements OnInit, OnChanges {