chore: Migrate more code to @if

frontend/src/app/helpers/display-value/display-value.component.html

@@ -9,29 +9,34 @@
       value
     }}</span></span
   >
-  <button
-    *ngIf="blurValue && !valueRevealed"
-    (click)="valueRevealed = true"
-    matTooltip="Show value"
-    class="flex"
-  >
-    <mat-icon>blur_off</mat-icon>
-  </button>
-  <button
-    *ngIf="blurValue && valueRevealed"
-    (click)="valueRevealed = false"
-    matTooltip="Hide value"
-    class="flex"
-  >
-    <mat-icon>blur_on</mat-icon>
-  </button>
-  <button
-    *ngIf="value"
-    [cdkCopyToClipboard]="value!"
-    matTooltip="Copy value to clipboard"
-    (click)="showClipboardMessage()"
-    class="flex"
-  >
-    <mat-icon>content_copy</mat-icon>
-  </button>
+  @if (blurValue) {
+    @if (valueRevealed) {
+      <button
+        (click)="valueRevealed = false"
+        matTooltip="Hide value"
+        class="flex"
+      >
+        <mat-icon>blur_on</mat-icon>
+      </button>
+    } @else {
+      <button
+        (click)="valueRevealed = true"
+        matTooltip="Show value"
+        class="flex"
+      >
+        <mat-icon>blur_off</mat-icon>
+      </button>
+    }
+  }
+
+  @if (value) {
+    <button
+      [cdkCopyToClipboard]="value!"
+      matTooltip="Copy value to clipboard"
+      (click)="showClipboardMessage()"
+      class="flex"
+    >
+      <mat-icon>content_copy</mat-icon>
+    </button>
+  }
 </div>

frontend/src/app/helpers/display-value/display-value.component.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
@@ -12,9 +12,8 @@ import { ToastService } from 'src/app/helpers/toast/toast.service';
 @Component({
   selector: 'app-display-value',
   templateUrl: './display-value.component.html',
-  styleUrls: ['./display-value.component.css'],
   standalone: true,
-  imports: [NgClass, NgIf, MatTooltip, MatIcon, CdkCopyToClipboard],
+  imports: [NgClass, MatTooltip, MatIcon, CdkCopyToClipboard],
 })
 export class DisplayValueComponent {
   constructor(private toastService: ToastService) {}

frontend/src/app/helpers/display-value/display-value.stories.ts

@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Meta, StoryObj } from '@storybook/angular';
+import { DisplayValueComponent } from './display-value.component';
+
+const meta: Meta<DisplayValueComponent> = {
+  title: 'Helpers / Display Value',
+  component: DisplayValueComponent,
+};
+
+export default meta;
+type Story = StoryObj<DisplayValueComponent>;
+
+export const Normal: Story = {
+  args: {
+    valueName: 'Normal Value',
+    value: 'value',
+    blurValue: false,
+  },
+};
+
+export const Blurred: Story = {
+  args: {
+    valueName: 'Blurred Value',
+    value: 'blurred value',
+    blurValue: true,
+  },
+};

frontend/src/app/helpers/input-dialog/input-dialog.component.html

@@ -11,9 +11,9 @@ <h2>{{ data.title }}</h2>
     <mat-form-field class="my-2 w-full" appearance="fill">
       <mat-label>Reason</mat-label>
       <textarea rows="6" matInput formControlName="result"></textarea>
-      <mat-error *ngIf="form.controls.result.errors?.required">
-        Please provide a reason.
-      </mat-error>
+      @if (form.controls.result.errors?.required) {
+        <mat-error> Please provide a reason. </mat-error>
+      }
     </mat-form-field>
     <div class="flex justify-between">
       <button mat-flat-button type="button" (click)="onCancel()">Cancel</button>

frontend/src/app/helpers/input-dialog/input-dialog.component.ts

@@ -2,7 +2,6 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NgIf } from '@angular/common';
 import { Component, Inject, OnInit } from '@angular/core';
 import {
   FormControl,
@@ -36,7 +35,6 @@ export interface InputDialogResult {
     MatFormField,
     MatLabel,
     MatInput,
-    NgIf,
     MatError,
     MatButton,
   ],

frontend/src/app/helpers/input-dialog/input-dialog.stories.ts

@@ -0,0 +1,34 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { dialogWrapper } from 'src/storybook/decorators';
+import { InputDialogComponent } from './input-dialog.component';
+
+const meta: Meta<InputDialogComponent> = {
+  title: 'Helpers / Input Dialog',
+  component: InputDialogComponent,
+};
+
+export default meta;
+type Story = StoryObj<InputDialogComponent>;
+
+export const General: Story = {
+  args: {},
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {
+            title: 'This is the title of the Input Dialog',
+            text: 'This is the text of the Input Dialog',
+          },
+        },
+      ],
+    }),
+    dialogWrapper,
+  ],
+};

frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component.html

@@ -3,7 +3,7 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<ng-container *ngIf="loading">
+@if (loading) {
   <ngx-skeleton-loader
     appearance="circle"
     [theme]="{
@@ -13,4 +13,4 @@
       border: '1px solid white',
     }"
   ></ngx-skeleton-loader>
-</ng-container>
+}

frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.component.ts

@@ -2,16 +2,14 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NgIf } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
   selector: 'app-button-skeleton-loader',
   templateUrl: './button-skeleton-loader.component.html',
-  styleUrls: ['./button-skeleton-loader.component.css'],
   standalone: true,
-  imports: [NgIf, NgxSkeletonLoaderModule],
+  imports: [NgxSkeletonLoaderModule],
 })
 export class ButtonSkeletonLoaderComponent {
   @Input() loading = true;

frontend/src/app/helpers/skeleton-loaders/button-skeleton-loader/button-skeleton-loader.stories.ts

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Meta, StoryObj } from '@storybook/angular';
+import { ButtonSkeletonLoaderComponent } from './button-skeleton-loader.component';
+
+const meta: Meta<ButtonSkeletonLoaderComponent> = {
+  title: 'Helpers / Skeleton Loaders / Button',
+  component: ButtonSkeletonLoaderComponent,
+};
+
+export default meta;
+type Story = StoryObj<ButtonSkeletonLoaderComponent>;
+
+export const Loading: Story = {
+  args: {},
+};
+
+export const DoneLoading: Story = {
+  args: {
+    loading: false,
+  },
+};

frontend/src/app/helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.component.html

@@ -2,8 +2,7 @@
  ~ SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  ~ SPDX-License-Identifier: Apache-2.0
  -->
-
-<ng-container *ngIf="loading">
+@if (loading) {
   <div class="margin">
     <ngx-skeleton-loader
       appearance="circle"
@@ -15,4 +14,4 @@
       }"
     ></ngx-skeleton-loader>
   </div>
-</ng-container>
+}

frontend/src/app/helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.component.ts

@@ -2,7 +2,6 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NgIf } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -11,7 +10,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
   templateUrl: './form-field-skeleton-loader.component.html',
   styleUrls: ['./form-field-skeleton-loader.component.css'],
   standalone: true,
-  imports: [NgIf, NgxSkeletonLoaderModule],
+  imports: [NgxSkeletonLoaderModule],
 })
 export class FormFieldSkeletonLoaderComponent {
   @Input() loading = true;

frontend/src/app/helpers/skeleton-loaders/form-field-skeleton-loader/form-field-skeleton-loader.stories.ts

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Meta, StoryObj } from '@storybook/angular';
+import { FormFieldSkeletonLoaderComponent } from './form-field-skeleton-loader.component';
+
+const meta: Meta<FormFieldSkeletonLoaderComponent> = {
+  title: 'Helpers / Skeleton Loaders / Form Field',
+  component: FormFieldSkeletonLoaderComponent,
+};
+
+export default meta;
+type Story = StoryObj<FormFieldSkeletonLoaderComponent>;
+
+export const Loading: Story = {
+  args: {},
+};
+
+export const DoneLoading: Story = {
+  args: {
+    loading: false,
+  },
+};

frontend/src/app/helpers/skeleton-loaders/mat-card-overview-skeleton-loader/mat-card-overview-skeleton-loader.stories.ts

@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { componentWrapperDecorator, Meta, StoryObj } from '@storybook/angular';
+import { MatCardOverviewSkeletonLoaderComponent } from './mat-card-overview-skeleton-loader.component';
+
+const meta: Meta<MatCardOverviewSkeletonLoaderComponent> = {
+  title: 'Helpers / Skeleton Loaders / Mat Card Overview',
+  component: MatCardOverviewSkeletonLoaderComponent,
+};
+
+export default meta;
+type Story = StoryObj<MatCardOverviewSkeletonLoaderComponent>;
+
+export const General: Story = {
+  args: {
+    rows: 3,
+    reservedCards: 0,
+  },
+  decorators: [
+    componentWrapperDecorator(
+      (story) =>
+        `<div class="flex flex-wrap gap-5 [&>*]:contents">${story}</div>`,
+    ),
+  ],
+};

frontend/src/app/helpers/skeleton-loaders/text-line-skeleton-loader/text-line-skeleton-loader.component.ts

@@ -8,7 +8,6 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 @Component({
   selector: 'app-text-line-skeleton-loader',
   templateUrl: './text-line-skeleton-loader.component.html',
-  styleUrls: ['./text-line-skeleton-loader.component.css'],
   standalone: true,
   imports: [NgxSkeletonLoaderModule],
 })