Updated styling

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/components/slutredovisning-view-description-list/slutredovisning-view-description-list.component.html

@@ -1,5 +1,6 @@
-<h3>Huvudsysselsättning</h3>
+<div class="slutredovisning-view-description-list">
-<dl>
+  <h3>Huvudsysselsättning</h3>
+  <dl>
     <dt>Vilken är deltagarens huvudsakliga sysselsättning just nu?</dt>
     <dd>{{mainOccupationName}}</dd>
 
@@ -39,12 +40,11 @@
 
     <ng-container *ngIf="stillUnemployed">
       <dt>Anledning till att arbetssökanden under tjänstens gång inte nått målet:</dt>
-
+      <dd>
         <ul>
-      <ng-container *ngFor="let reason of stillUnemployed.reasonsGoalNotReached">
+          <li *ngFor="let reason of stillUnemployed.reasonsGoalNotReached">{{capitalizeSentence(reason) }}</li>
-        <li>{{capitalizeSentence(reason) }}</li>
-      </ng-container>
         </ul>
+      </dd>
 
       <ng-container *ngIf="stillUnemployed.otherExplanation">
         <dt>Beskrivning av Annat</dt>
@@ -56,24 +56,23 @@
       <dt>Förtydling av Annan huvudsysselsättning:</dt>
       <dd>{{other.otherExplanation }}</dd>
     </ng-container>
-</dl>
+  </dl>
 
-<h3>Aktiviteter</h3>
+  <h3>Aktiviteter</h3>
-<dl>
+  <dl>
     <ng-container *ngFor="let activity of slutredovisning.activities">
       <dt>{{activity.name}}</dt>
-    <dd>
+      <dd><pre>{{activity.whatHasBeenDone}}</pre></dd>
-      <pre>{{activity.whatHasBeenDone}}</pre>
-    </dd>
     </ng-container>
-</dl>
+  </dl>
 
-<h3>Deltagarens framsteg och utveckling</h3>
+  <h3>Deltagarens framsteg och utveckling</h3>
-<dl>
+  <dl>
     <dt>Beskriv deltagarens framsteg och utveckling under perioden</dt>
     <dd><pre>{{slutredovisning.progressDescription}}</pre></dd>
     <dt>Information om lämpligt nästa steg för deltagaren</dt>
     <dd><pre>{{slutredovisning.nextStepDescription}}</pre></dd>
     <dt>Övrig information</dt>
     <dd><pre>{{slutredovisning.otherInformation}}</pre></dd>
-</dl>
+  </dl>
+</div>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/components/slutredovisning-view-description-list/slutredovisning-view-description-list.component.scss

@@ -0,0 +1,5 @@
+.slutredovisning-view-description-list {
+  pre {
+    margin: 0;
+  }
+}

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/components/slutredovisning-view-description-list/slutredovisning-view-description-list.component.ts

@@ -1,4 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  SlutredovisningResponseMainOccupationEducationDetails,
+  SlutredovisningResponseMainOccupationOtherDetails,
+  SlutredovisningResponseMainOccupationStillUnemployedDetails,
+  SlutredovisningResponseMainOccupationWorkDetails,
+} from '@msfa-models/api/slutredovisning.response.model';
 import {
   educationLengthToString,
   educationLevelToString,
@@ -9,17 +15,12 @@ import {
   Slutredovisning,
 } from '@msfa-models/slutredovisning.model';
 import { capitalizeSentence } from '@msfa-utils/capitalize-sentence.util';
-import {
-  SlutredovisningResponseMainOccupationEducationDetails,
-  SlutredovisningResponseMainOccupationOtherDetails,
-  SlutredovisningResponseMainOccupationStillUnemployedDetails,
-  SlutredovisningResponseMainOccupationWorkDetails,
-} from '@msfa-models/api/slutredovisning.response.model';
 
 @Component({
   selector: 'msfa-slutredovisning-view-description-list',
   templateUrl: './slutredovisning-view-description-list.component.html',
-  styleUrls: ['./slutredovisning-view-description-list.component.css'],
+  styleUrls: ['./slutredovisning-view-description-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SlutredovisningViewDescriptionListComponent {
   capitalizeSentence = capitalizeSentence;

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-education/slutredovisning-form-step0-education.component.ts

@@ -1,9 +1,9 @@
 import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
+import { EducationLength, EducationLevel, MainOccupation } from '@msfa-models/slutredovisning.model';
 import { RequiredValidator } from '@msfa-validators/required.validator';
 import { SlutredovisningFormStep0Education } from './slutredovisning-form-step0-education.validator';
-import { EducationLength, EducationLevel, MainOccupation } from '@msfa-models/slutredovisning.model';
 
 export interface SlutredovisningFormStep0EducationFormData {
   educationLevel: EducationLevel;
@@ -18,6 +18,7 @@ type FormKeys = keyof SlutredovisningFormStep0EducationFormData;
   selector: 'msfa-slutredovisning-form-step0-education',
   templateUrl: './slutredovisning-form-step0-education.component.html',
   styleUrls: ['./slutredovisning-form-step0-education.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SlutredovisningFormStep0EducationComponent implements OnInit {
   readonly formGroupKey: MainOccupation = MainOccupation.Education;

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-other/slutredovisning-form-step0-other.component.ts

@@ -1,7 +1,7 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
-import { RequiredValidator } from '@msfa-validators/required.validator';
 import { MainOccupation } from '@msfa-models/slutredovisning.model';
+import { RequiredValidator } from '@msfa-validators/required.validator';
 
 export interface SlutredovisningFormStep0OtherFormData {
   otherExplanation: string;
@@ -13,6 +13,7 @@ type FormKeys = keyof SlutredovisningFormStep0OtherFormData;
   selector: 'msfa-slutredovisning-form-step0-other',
   templateUrl: './slutredovisning-form-step0-other.component.html',
   styleUrls: ['./slutredovisning-form-step0-other.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SlutredovisningFormStep0OtherComponent implements OnInit {
   readonly formGroupKey: MainOccupation = MainOccupation.Other;

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-still-unemployed/slutredovisning-form-step0-still-unemployed.component.ts

@@ -1,7 +1,7 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
-import { SlutredovisningFormStep0StillUnemployed } from './slutredovisning-form-step0-still-unemployed.validator';
 import { MainOccupation, StillUnemployedReason } from '@msfa-models/slutredovisning.model';
+import { SlutredovisningFormStep0StillUnemployed } from './slutredovisning-form-step0-still-unemployed.validator';
 
 type ReasonCheckboxValues = { [key: string]: boolean };
 
@@ -21,6 +21,7 @@ interface CheckboxModel {
   selector: 'msfa-slutredovisning-form-step0-still-unemployed',
   templateUrl: './slutredovisning-form-step0-still-unemployed.component.html',
   styleUrls: ['./slutredovisning-form-step0-still-unemployed.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SlutredovisningFormStep0StillUnemployedComponent implements OnInit {
   readonly formGroupKey: MainOccupation = MainOccupation.StillUnemployed;

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0-work/slutredovisning-form-step0-work.component.ts

@@ -1,5 +1,5 @@
 import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { Anstallningsform, MainOccupation, Omfattning } from '@msfa-models/slutredovisning.model';
 import { Yrkesgrupp } from '@msfa-models/yrkesgrupp.model';
@@ -16,6 +16,7 @@ import { SlutredovisningFormStep0WorkValidator } from './slutredovisning-form-st
   selector: 'msfa-slutredovisning-form-step0-work',
   templateUrl: './slutredovisning-form-step0-work.component.html',
   styleUrls: ['./slutredovisning-form-step0-work.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SlutredovisningFormStep0WorkComponent implements OnInit {
   readonly formGroupKey: MainOccupation = MainOccupation.Work;

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0.component.html

@@ -1,11 +1,12 @@
-<h2>Huvudsaklig sysselsättning</h2>
+<div class="slutredovisning-form-step0">
+  <h2>Huvudsaklig sysselsättning</h2>
 
-<form
+  <form
-  class="slutredovisning-form-step0"
+    class="slutredovisning-form-step0__form"
     [formGroup]="formGroup"
     name="slutredovisning-form-step0"
     (ngSubmit)="verifyAndEmitData()"
->
+  >
     <digi-form-fieldset
       af-legend="Vilken är deltagarens huvudsakliga sysselsättning nu?"
       af-name="mainOccupation"
@@ -46,5 +47,12 @@
       [shouldValidate]="shouldValidate$ | async"
     ></msfa-slutredovisning-form-step0-other>
 
+    <footer class="slutredovisning-form-step0__footer">
       <digi-button af-type="submit">Vidare till steg 2</digi-button>
-</form>
+      <msfa-back-link [showIcon]="false" [asButton]="true" route="../">
+        <span>Avbryt</span>
+        <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
+      </msfa-back-link>
+    </footer>
+  </form>
+</div>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0.component.scss

@@ -1,7 +1,14 @@
 @import 'variables/gutters';
 
 .slutredovisning-form-step0 {
+  &__form {
     display: flex;
     flex-direction: column;
     gap: $digi--layout--gutter--l;
+  }
+
+  &__footer {
+    display: flex;
+    gap: var(--digi--layout--gutter);
+  }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step0/slutredovisning-form-step0.component.ts

@@ -1,14 +1,14 @@
 import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
+import { MainOccupation } from '@msfa-models/slutredovisning.model';
 import { markControlsAsDirty } from '@msfa-utils/mark-controls-as-dirty.util';
 import { RequiredValidator } from '@msfa-validators/required.validator';
 import { BehaviorSubject } from 'rxjs';
 import { SlutredovisningFormStep0EducationFormData } from './slutredovisning-form-step0-education/slutredovisning-form-step0-education.component';
-import { SlutredovisningFormStep0WorkFormData } from './slutredovisning-form-step0-work/slutredovisning-form-step0-work.model';
-import { SlutredovisningFormStep0StillUnemployedFormData } from './slutredovisning-form-step0-still-unemployed/slutredovisning-form-step0-still-unemployed.component';
 import { SlutredovisningFormStep0OtherFormData } from './slutredovisning-form-step0-other/slutredovisning-form-step0-other.component';
-import { MainOccupation } from '@msfa-models/slutredovisning.model';
+import { SlutredovisningFormStep0StillUnemployedFormData } from './slutredovisning-form-step0-still-unemployed/slutredovisning-form-step0-still-unemployed.component';
+import { SlutredovisningFormStep0WorkFormData } from './slutredovisning-form-step0-work/slutredovisning-form-step0-work.model';
 
 export interface SlutredovisningStep0FormData {
   mainOccupation: MainOccupation;
@@ -29,6 +29,7 @@ type FormKeys = keyof SlutredovisningStep0FormData;
   selector: 'msfa-slutredovisning-form-step0',
   templateUrl: './slutredovisning-form-step0.component.html',
   styleUrls: ['./slutredovisning-form-step0.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SlutredovisningFormStep0Component implements OnInit {
   shouldValidate$ = new BehaviorSubject<boolean>(false);

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step1/slutredovisning-form-step1.component.html

@@ -1,12 +1,18 @@
-<h2>Aktiviteter</h2>
+<div class="slutredovisning-form-step1">
-<form [formGroup]="formGroup" name="report-form" (ngSubmit)="verifyAndEmitData()">
+  <h2>Aktiviteter</h2>
+  <form
+    class="slutredovisning-form-step1__form"
+    [formGroup]="formGroup"
+    name="report-form"
+    (ngSubmit)="verifyAndEmitData()"
+  >
     <ng-container *ngIf="activitiesFormArray.controls.length; else loadingRef" [formArrayName]="ACTIVITES_FORM_NAME">
       <div
         class="slutredovisning-form__activity"
         *ngFor="let activityFormGroup of activitiesFormArray.controls; let i=index"
         [formGroupName]="i"
       >
-      <h3>{{activityFormGroup.get('name').value}}</h3>
+        <h3 class="slutredovisning-form-step1__sub-heading">{{activityFormGroup.get('name').value}}</h3>
         <ui-textarea
           formControlName="whatHasBeenDone"
           uiLabel="Beskriv vad deltagaren har gjort inom aktiviteten"
@@ -20,15 +26,16 @@
       </div>
       <!--    TODO: If something is required at the top of the form it will be hard to see when at the bottom and clicking next -->
 
-    <footer class="slutredovisning-report-form-step1__footer">
+      <footer class="slutredovisning-form-step1__footer">
-      <digi-button af-type="button" af-variation="tertiary" (click)="goBack()">
-        <digi-icon-arrow-left slot="icon"></digi-icon-arrow-left>
-        Tillbaka
-      </digi-button>
         <digi-button af-type="submit">Nästa</digi-button>
+        <digi-button af-type="button" af-variation="secondary" (click)="goBack()">
+          Tillbaka
+          <span class="msfa__a11y-sr-only">&nbsp;till steg förgående steg</span>
+        </digi-button>
       </footer>
     </ng-container>
-</form>
+  </form>
+</div>
 
 <ng-template #loadingRef>
   <ui-loader uiType="padded"></ui-loader>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step1/slutredovisning-form-step1.component.scss

@@ -1,6 +1,18 @@
-.slutredovisning-report-form-step1 {
+@import 'variables/gutters';
+
+.slutredovisning-form-step1 {
+  &__form {
+    display: flex;
+    flex-direction: column;
+    gap: $digi--layout--gutter--l;
+  }
+
+  &__sub-heading {
+    margin-top: 0;
+  }
+
   &__footer {
     display: flex;
-    justify-content: space-between;
+    gap: var(--digi--layout--gutter);
   }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step1/slutredovisning-form-step1.component.ts

@@ -1,11 +1,19 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
 import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
-import { BehaviorSubject } from 'rxjs';
-import { markControlsAsDirty } from '@msfa-utils/mark-controls-as-dirty.util';
 import { Activity } from '@msfa-models/activity.model';
-import { SlutredovisningFormService } from '../slutredovisning-form.service';
+import { markControlsAsDirty } from '@msfa-utils/mark-controls-as-dirty.util';
-import { take } from 'rxjs/operators';
 import { RequiredValidator } from '@msfa-validators/required.validator';
+import { BehaviorSubject } from 'rxjs';
+import { take } from 'rxjs/operators';
+import { SlutredovisningFormService } from '../slutredovisning-form.service';
 
 export interface SlutredovisningStep1FormData {
   activities: { whatHasBeenDone: string; id: string; name: string }[];
@@ -17,6 +25,7 @@ type FormControlNames = keyof SlutredovisningStep1FormData;
   selector: 'msfa-slutredovisning-form-step1',
   templateUrl: './slutredovisning-form-step1.component.html',
   styleUrls: ['./slutredovisning-form-step1.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SlutredovisningFormStep1Component implements OnInit {
   readonly ACTIVITES_FORM_NAME: FormControlNames = 'activities';

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step2/slutredovisning-form-step2.component.html

@@ -1,5 +1,11 @@
-<h2>Deltagarens framsteg och utveckling</h2>
+<div class="slutredovisning-form-step2">
-<form [formGroup]="formGroup" name="slutredovisning-report-form-step1__form" (ngSubmit)="verifyAndEmitData()">
+  <h2>Deltagarens framsteg och utveckling</h2>
+  <form
+    [formGroup]="formGroup"
+    class="slutredovisning-form-step2__form"
+    name="slutredovisning-form-step2-form"
+    (ngSubmit)="verifyAndEmitData()"
+  >
     <ui-textarea
       [formControl]="framstegFormControl"
       uiLabel="Beskriv deltagarens framsteg och utveckling under perioden"
@@ -33,14 +39,15 @@
       [uiInvalid]="ovrigtFormControl?.touched  && !!ovrigtFormControl?.errors?.required"
     ></ui-textarea>
 
-  <footer class="slutredovisning-report-form-step1__footer">
+    <footer class="slutredovisning-form-step2__footer">
-    <digi-button af-type="button" af-variation="tertiary" (click)="goBack()">
-      <digi-icon-arrow-left slot="icon"></digi-icon-arrow-left>
-      Tillbaka
-    </digi-button>
       <digi-button af-type="submit">Nästa</digi-button>
+      <digi-button af-type="button" af-variation="secondary" (click)="goBack()">
+        Tillbaka
+        <span class="msfa__a11y-sr-only">&nbsp;till steg förgående steg</span>
+      </digi-button>
     </footer>
-</form>
+  </form>
+</div>
 
 <ng-template #loadingRef>
   <ui-loader uiType="padded"></ui-loader>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step2/slutredovisning-form-step2.component.scss

@@ -1,6 +1,6 @@
 @import 'variables/gutters';
 
-.slutredovisning-report-form-step1 {
+.slutredovisning-form-step2 {
   &__form {
     display: flex;
     flex-direction: column;
@@ -8,6 +8,6 @@
   }
   &__footer {
     display: flex;
-    justify-content: space-between;
+    gap: var(--digi--layout--gutter);
   }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step2/slutredovisning-form-step2.component.ts

@@ -1,8 +1,8 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup } from '@angular/forms';
-import { BehaviorSubject } from 'rxjs';
 import { markControlsAsDirty } from '@msfa-utils/mark-controls-as-dirty.util';
 import { RequiredValidator } from '@msfa-validators/required.validator';
+import { BehaviorSubject } from 'rxjs';
 
 export interface SlutredovisningStep2FormData {
   progressDescription: string;
@@ -16,6 +16,7 @@ type FormControlNames = keyof SlutredovisningStep2FormData;
   selector: 'msfa-slutredovisning-form-step2',
   templateUrl: './slutredovisning-form-step2.component.html',
   styleUrls: ['./slutredovisning-form-step2.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SlutredovisningFormStep2Component implements OnInit {
   readonly framstegFormName: FormControlNames = 'progressDescription';

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step3/slutredovisning-form-step3.component.html

@@ -1,7 +1,10 @@
-<div class="slutredovisning-report-form-step3__view">
+<div class="slutredovisning-form-step3">
   <h2>Förhandsgranskning</h2>
 
-  <div class="informativ-rapport-form__confirmation" *ngIf="submittedDate$ | async as submittedDate; else previewRef">
+  <div
+    class="slutredovisning-form-step3__confirmation"
+    *ngIf="submittedDate$ | async as submittedDate; else previewRef"
+  >
     <digi-notification-alert af-variation="success" af-heading="Allt gick bra" af-heading-level="h3">
       <p>Slutredovisning för deltagare {{avrop.fullName}} är nu inskickad till Arbetsförmedlingen.</p>
       <dl>
@@ -13,6 +16,7 @@
   </div>
 
   <ng-template #previewRef>
+    <div class="slutredovisning-form-step3__preview">
       <ui-loader *ngIf="submitIsLoading$ | async" uiType="absolute"></ui-loader>
       <msfa-slutredovisning-view-description-list
         [slutredovisning]="slutredovisning$ | async"
@@ -20,7 +24,7 @@
 
       <digi-notification-alert
         *ngIf="submitError$ | async as error"
-      class="slutredovisnin-rapport-form__alert"
+        class="slutredovisning-form-step3__alert"
         af-variation="danger"
         af-heading="Någonting gick fel"
       >
@@ -28,13 +32,13 @@
         <p *ngIf="error.message" class="msfa__small-text">{{error.message}}</p>
       </digi-notification-alert>
 
-    <footer class="slutredovisning-report-form-step3__footer">
+      <footer class="slutredovisning-form-step3__footer">
-      <digi-button af-type="button" af-variation="tertiary" (click)="goBack()">
-        <digi-icon-arrow-left slot="icon"></digi-icon-arrow-left>
-        Tillbaka
-      </digi-button>
         <digi-button af-type="button" (click)="submitSlutredovisning()">Skicka in Slutredovisning</digi-button>
+        <digi-button af-type="button" af-variation="secondary" (click)="goBack()">
+          Tillbaka
+          <span class="msfa__a11y-sr-only">&nbsp;till steg förgående steg</span>
+        </digi-button>
       </footer>
+    </div>
   </ng-template>
 </div>
-<!--<pre>{{slutredovisning$|async|json}}</pre>-->

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step3/slutredovisning-form-step3.component.scss

@@ -1,18 +1,15 @@
 @import 'variables/gutters';
 
-.slutredovisning-report-form-step3 {
+.slutredovisning-form-step3 {
-  &__view {
+  &__preview,
+  &__confirmation {
     display: flex;
     flex-direction: column;
     gap: $digi--layout--gutter--l;
   }
-  //&__form {
+
-  //  display: flex;
-  //  flex-direction: column;
-  //  gap: $digi--layout--gutter--l;
-  //}
   &__footer {
     display: flex;
-    justify-content: space-between;
+    gap: var(--digi--layout--gutter);
   }
 }

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form-step3/slutredovisning-form-step3.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { SlutredovisningResponseMainOccupationDetails } from '@msfa-models/api/slutredovisning.response.model';
 import { DeltagareAvrop } from '@msfa-models/avrop.model';
 import { CustomError } from '@msfa-models/error/custom-error';
@@ -13,6 +13,7 @@ import { slutredovisningFormDataToSlutredovisningRequest } from '../utils/form-d
   selector: 'msfa-slutredovisning-form-step3',
   templateUrl: './slutredovisning-form-step3.component.html',
   styleUrls: ['./slutredovisning-form-step3.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SlutredovisningFormStep3Component {
   @Output() backClick = new EventEmitter<void>();

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form.component.html

@@ -50,44 +50,6 @@
         </ng-container>
       </ng-template>
     </div>
-
-    <!--    <h2>Step 0 valueChanges:</h2>-->
-    <!--    <pre>-->
-    <!--          {{ step0FormGroup.valueChanges | async | json}}-->
-    <!--        </pre-->
-    <!--    >-->
-    <!--    <h2>Step 1 valueChanges:</h2>-->
-    <!--    <pre>-->
-    <!--          {{ step1FormGroup.valueChanges | async | json}}-->
-    <!--        </pre-->
-    <!--    >-->
-    <!--    <h2>Step 2 valueChanges:</h2>-->
-    <!--    <pre>-->
-    <!--          {{ step2FormGroup.valueChanges | async | json}}-->
-    <!--        </pre-->
-    <!--    >-->
-
-    <!--    <h2>Step 0 data:</h2>-->
-    <!--    <pre>-->
-    <!--              {{step0FormData$ | async | json}}-->
-    <!--            </pre-->
-    <!--    >-->
-
-    <!--    <h2>Step 1 data:</h2>-->
-    <!--    <pre>-->
-    <!--              {{step1FormData$ | async | json}}-->
-    <!--            </pre-->
-    <!--    >-->
-    <!--    <h2>Step 2 data:</h2>-->
-    <!--    <pre>-->
-    <!--              {{step2FormData$ | async | json}}-->
-    <!--            </pre-->
-    <!--    >-->
-    <!--    <h2>slutredovisningFormData$ data:</h2>-->
-    <!--    <pre>-->
-    <!--              {{slutredovisningFormData$ | async | json}}-->
-    <!--            </pre-->
-    <!--    >-->
   </msfa-report-layout>
 </msfa-layout>
 <ng-template #skeletonRef>

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/slutredovisning-form/slutredovisning-form.module.ts

@@ -75,6 +75,7 @@ import { SlutredovisningFormService } from './slutredovisning-form.service';
     UiErrorListModule,
     UiInputModule,
     SlutredovisningViewDescriptionListModule,
+    BackLinkModule,
   ],
   providers: [SlutredovisningFormService],
   exports: [SlutredovisningFormComponent],

libs/ui/src/skeleton/skeleton.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 /**
  * Placeholder for content being loaded
@@ -10,6 +10,7 @@ import { Component, Input } from '@angular/core';
   selector: 'ui-skeleton',
   templateUrl: './skeleton.component.html',
   styleUrls: ['./skeleton.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SkeletonComponent {
   /**