Merge pull request #4 in TEA/dafa-web-monorepo from TV-107 to develop

* commit '5f10baae0c438b079f2620ea9b9c0088194561c3':
  more changes
  more changes according to PR comments
  changed code according to comments from pull request
  updated startpage from flex to grid, and other minor changes
  startpage added and employee, administration page updated

apps/dafa-web/src/app/data/models/staff.model.ts

@@ -6,7 +6,7 @@ export interface Staff {
   staffId: string;
   firstName: string;
   lastName: string;
-  kommun: string;
+  utforandeverksamhet: string;
   active: boolean;
   service: string;
   fullName?: string;

apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.html

@@ -10,25 +10,22 @@
   <form [formGroup]="formGroup" (ngSubmit)="submitForm()">
     <div class="create-account__block">
       <h2>Personuppgifter</h2>
-
+      <digi-ng-form-input
-      <div class="create-account__combined-inputs">
+        class="create-account__input"
-        <digi-ng-form-input
+        formControlName="firstName"
-          class="create-account__input"
+        afLabel="Förnamn"
-          formControlName="firstName"
+        afInvalidMessage="Förnamn är obligatoriskt"
-          afLabel="Förnamn"
+        [afDisableValidStyle]="true"
-          afInvalidMessage="Förnamn är obligatoriskt"
+        [afInvalid]="firstNameControl.invalid && firstNameControl.dirty"
-          [afDisableValidStyle]="true"
+      ></digi-ng-form-input>
-          [afInvalid]="firstNameControl.invalid && firstNameControl.dirty"
+      <digi-ng-form-input
-        ></digi-ng-form-input>
+        class="create-account__input"
-        <digi-ng-form-input
+        formControlName="lastName"
-          class="create-account__input"
+        afLabel="Efternamn"
-          formControlName="lastName"
+        afInvalidMessage="Efternamn är obligatoriskt"
-          afLabel="Efternamn"
+        [afDisableValidStyle]="true"
-          afInvalidMessage="Efternamn är obligatoriskt"
+        [afInvalid]="lastNameControl.invalid && lastNameControl.dirty"
-          [afDisableValidStyle]="true"
+      ></digi-ng-form-input>
-          [afInvalid]="lastNameControl.invalid && lastNameControl.dirty"
-        ></digi-ng-form-input>
-      </div>
       <digi-ng-form-input
         class="create-account__input"
         formControlName="ssn"
@@ -37,72 +34,54 @@
         [afDisableValidStyle]="true"
         [afInvalid]="ssnControl.invalid && ssnControl.dirty"
       ></digi-ng-form-input>
-      <digi-ng-form-input
-        class="create-account__input"
-        formControlName="staffId"
-        afLabel="Personal-ID"
-        [afInvalidMessage]="staffIdControl.errors?.message || ''"
-        [afDisableValidStyle]="true"
-        [afInvalid]="staffIdControl.invalid && staffIdControl.dirty"
-      ></digi-ng-form-input>
-      <digi-ng-form-input
-        class="create-account__input"
-        formControlName="email"
-        afLabel="Arbetsmejl"
-        afType="email"
-        [afInvalidMessage]="emailControl.errors?.message || ''"
-        [afDisableValidStyle]="true"
-        [afInvalid]="emailControl.invalid && emailControl.dirty"
-      ></digi-ng-form-input>
-      <digi-ng-form-input
-        class="create-account__input"
-        formControlName="phone"
-        afLabel="Telefonnummer arbete"
-        afType="tel"
-        [afInvalidMessage]="phoneControl.errors?.message || ''"
-        [afDisableValidStyle]="true"
-        [afInvalid]="phoneControl.invalid && phoneControl.dirty"
-      ></digi-ng-form-input>
     </div>
-
     <div class="create-account__block">
-      <h2>Bemanning av personal</h2>
+      <h2>Tjänst</h2>
 
-      <fieldset class="create-account__fieldset">
+      <digi-ng-form-select afPlaceholder=" " afLabel="Välj tjänst" formControlName="service" [afSelectItems]="list">
-        <legend>Är {{ firstNameControl.value || 'medarbetaren' }} i aktiv tjänst?</legend>
+      </digi-ng-form-select>
-        <digi-ng-form-radiobutton-group
-          [afRadiobuttons]="activeRadioButtons"
-          formControlName="active"
-        ></digi-ng-form-radiobutton-group>
-      </fieldset>
-
-      <fieldset class="create-account__fieldset">
-        <legend>Planerad frånvaroperiod</legend>
-        <div class="create-account__combined-inputs">
-          <digi-ng-form-datepicker
-            formControlName="outOfOfficeStart"
-            afLabel="Från"
-            [afMinDate]="todaysDate"
-          ></digi-ng-form-datepicker>
-          <digi-ng-form-datepicker
-            formControlName="outOfOfficeEnd"
-            afLabel="Till"
-            [afMinDate]="todaysDate"
-          ></digi-ng-form-datepicker>
-        </div>
-        <digi-button (afOnClick)="addOutOfOfficeDate()">Lägg till</digi-button>
-
-        <ul class="create-account__pending-out-of-office-list" *ngIf="pendingOutOfOfficeDates.length">
-          <li *ngFor="let date of pendingOutOfOfficeDates">
-            Från {{ date.start | localDate }} till {{ date.end | localDate }}
-            <digi-button af-variation="secondary" af-size="s" (afOnClick)="removeOutOfOfficeDate(date.id)">
-              <digi-icon-x slot="icon"></digi-icon-x>
-              <span>Ta bort</span>
-            </digi-button>
-          </li>
-        </ul>
-      </fieldset>
     </div>
+    <fieldset class="create-account__fieldset">
+      <legend>Tilldela behörigheter</legend>
+
+      <div class="create-account__permission-checkbox">
+        <digi-ng-form-checkbox formControlName="permissions" afLabel="Välj administrera behörigheter">
+        </digi-ng-form-checkbox>
+        <digi-ng-popover afDirection="block-start">
+          <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
+          <a href="#">Tab to me</a>
+        </digi-ng-popover>
+      </div>
+
+      <div class="create-account__permission-checkbox">
+        <digi-ng-form-checkbox formControlName="participant" afLabel="Välj ta emot deltagare"></digi-ng-form-checkbox>
+        <digi-ng-popover afDirection="block-start">
+          <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
+          <a href="#">Tab to me</a>
+        </digi-ng-popover>
+      </div>
+
+      <div class="create-account__permission-checkbox">
+        <digi-ng-form-checkbox
+          formControlName="infoParticipant"
+          afLabel="Välj rapportering, planering och infomration om deltagare"
+        >
+        </digi-ng-form-checkbox>
+        <digi-ng-popover afDirection="block-start">
+          <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
+          <a href="#">Tab to me</a>
+        </digi-ng-popover>
+      </div>
+
+      <div class="create-account__permission-checkbox">
+        <digi-ng-form-checkbox formControlName="orderBills" afLabel="Välj administrera ordrar och fakturor">
+        </digi-ng-form-checkbox>
+        <digi-ng-popover afDirection="block-start">
+          <p>Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).</p>
+          <a href="#">Tab to me</a>
+        </digi-ng-popover>
+      </div>
+    </fieldset>
 
     <div class="create-account__footer">
       <digi-button af-type="reset" af-variation="secondary">Avbryt</digi-button>

apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.scss

@@ -4,7 +4,6 @@
   &__block {
     max-width: var(--digi--typography--text--max-width);
   }
-
   &__combined-inputs {
     display: flex;
     gap: var(--digi--layout--gutter);
@@ -16,11 +15,16 @@
     margin-bottom: var(--digi--layout--gutter);
   }
 
+  &__permission-checkbox {
+    display: flex;
+    height: 5rem;
+    align-items: center;
+  }
+
   &__fieldset {
-    margin: 0;
-    margin-bottom: var(--digi--layout--gutter);
     padding: 0;
-    border-width: 0;
+    border: 0;
+    margin-top: var(--digi--layout--gutter);
 
     legend {
       width: 100%;
@@ -28,7 +32,7 @@
       align-items: center;
       margin: 0;
       font-weight: var(--digi--typography--font-weight--bold);
-      font-size: var(--digi--typography--font-size);
+      font-size: 1.5rem;
       padding-bottom: var(--digi--layout--gutter--s);
     }
   }
@@ -51,7 +55,16 @@
   }
 
   &__footer {
+    margin-top: var(--digi--layout--gutter);
     display: flex;
     gap: var(--digi--layout--gutter);
   }
 }
+
+.search-address {
+  width: 30%;
+}
+
+digi-ng-popover {
+  margin-left: var(--digi--layout--gutter);
+}

apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts

@@ -1,7 +1,10 @@
 import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
+import { FormSelectBaseItem } from '@af/digi-ng/_form/form-select-base';
+import { PopoverDirection, PopoverOrientation } from '@af/digi-ng/_popover/popover';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
+import { Service } from '@dafa-enums/service.enum';
 import { OutOfOfficeDate } from '@dafa-models/out-of-office-date.model';
 import { StaffService } from '@dafa-services/api/staff.service';
 import { RequiredValidator } from '@dafa-validators/required.validator';
@@ -15,47 +18,61 @@ import { BehaviorSubject } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CreateAccountComponent {
-  private _pendingOutOfOfficeDates$ = new BehaviorSubject<OutOfOfficeDate[]>([
+  private _searchValue$ = new BehaviorSubject<string>('');
-    {
+
-      id: 123456789,
-      start: new Date(),
-      end: new Date(),
-    },
-    {
-      id: 987654321,
-      start: new Date(),
-      end: new Date(),
-    },
-  ]);
   formGroup: FormGroup;
   todaysDate = new Date();
 
+  list: FormSelectBaseItem[] = [
+    {
+      name: Service.STOM,
+      value: '1',
+    },
+    {
+      name: Service.KVL,
+      value: '2',
+    },
+    {
+      name: Service.KROM,
+      value: '3',
+    },
+  ];
+
   constructor(private formBuilder: FormBuilder, private staffService: StaffService, private router: Router) {
     this.formGroup = this.formBuilder.group({
       firstName: this.formBuilder.control('', [RequiredValidator('Förnamn')]),
       lastName: this.formBuilder.control('', [RequiredValidator('Efternamn')]),
       ssn: this.formBuilder.control('', [RequiredValidator('Personnummer'), SocialSecurityNumberValidator()]),
       staffId: this.formBuilder.control('', [RequiredValidator('Personal-ID')]),
-      email: this.formBuilder.control('', [RequiredValidator('Arbetsmejl')]),
+      service: this.formBuilder.control(''),
-      phone: this.formBuilder.control('', [RequiredValidator('Telefonnummer arbete')]),
+      permissions: this.formBuilder.control(false),
-      active: this.formBuilder.control(true),
+      participant: this.formBuilder.control(false),
-      outOfOfficeStart: this.formBuilder.control(''),
+      infoParticipant: this.formBuilder.control(false),
-      outOfOfficeEnd: this.formBuilder.control(''),
+      orderBills: this.formBuilder.control(false),
     });
   }
 
-  get pendingOutOfOfficeDates(): OutOfOfficeDate[] {
+  handleSearchSubmit(): void {
-    return this._pendingOutOfOfficeDates$.getValue();
+    // skicka searchvalue till en service och filtrera
   }
-  get activeRadioButtons(): RadiobuttonModel[] {
+
+  handleSearchInput($event: CustomEvent): void {
+    this._searchValue$.next($event.detail.target.value);
+  }
+
+  get formselectItem(): FormSelectBaseItem[] {
     return [
       {
-        label: 'Ja',
+        name: Service.STOM,
-        value: true,
+        value: '1',
       },
       {
-        label: 'Nej',
+        name: Service.KVL,
-        value: false,
+        value: '2',
+      },
+      {
+        name: Service.KROM,
+        value: '3',
       },
     ];
   }
@@ -69,41 +86,6 @@ export class CreateAccountComponent {
   get ssnControl(): AbstractControl {
     return this.formGroup.get('ssn');
   }
-  get staffIdControl(): AbstractControl {
-    return this.formGroup.get('staffId');
-  }
-  get emailControl(): AbstractControl {
-    return this.formGroup.get('email');
-  }
-  get phoneControl(): AbstractControl {
-    return this.formGroup.get('phone');
-  }
-  get outOfOfficeStartControl(): AbstractControl {
-    return this.formGroup.get('outOfOfficeStart');
-  }
-  get outOfOfficeEndControl(): AbstractControl {
-    return this.formGroup.get('outOfOfficeEnd');
-  }
-
-  addOutOfOfficeDate(): void {
-    if (this.outOfOfficeStartControl.value && this.outOfOfficeEndControl.value) {
-      this._pendingOutOfOfficeDates$.next([
-        ...this.pendingOutOfOfficeDates,
-        {
-          id: Date.now(),
-          start: new Date(this.outOfOfficeStartControl.value),
-          end: new Date(this.outOfOfficeEndControl.value),
-        },
-      ]);
-
-      this.outOfOfficeStartControl.patchValue('');
-      this.outOfOfficeEndControl.patchValue('');
-    }
-  }
-
-  removeOutOfOfficeDate(id: number): void {
-    this._pendingOutOfOfficeDates$.next(this.pendingOutOfOfficeDates.filter(date => date.id !== id));
-  }
 
   private _markFormAsDirty(): void {
     Object.keys(this.formGroup.controls).forEach(control => {
@@ -117,7 +99,6 @@ export class CreateAccountComponent {
       const submittableValues = {
         ...this.formGroup.value,
         fullName: `${this.firstNameControl.value} ${this.lastNameControl.value}`,
-        outOfOffice: this.pendingOutOfOfficeDates,
       };
 
       delete submittableValues.outOfOfficeStart;

apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.module.ts

@@ -7,6 +7,9 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module';
 import { CreateAccountComponent } from './create-account.component';
+import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
+import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
+import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -19,6 +22,9 @@ import { CreateAccountComponent } from './create-account.component';
     DigiNgFormInputModule,
     DigiNgFormRadiobuttonGroupModule,
     DigiNgFormDatepickerModule,
+    DigiNgFormSelectModule,
+    DigiNgPopoverModule,
+    DigiNgFormCheckboxModule,
   ],
 })
 export class CreateAccountModule {}

apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.html

@@ -11,33 +11,6 @@
             </ng-container>
           </button>
         </th>
-        <th scope="col" class="staff-list__column-head">
-          <button class="staff-list__sort-button" (click)="handleSort('staffId')">
-            Personal-ID
-            <ng-container *ngIf="sortBy?.key === 'staffId'">
-              <digi-icon-caret-up class="staff-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
-              <digi-icon-caret-down class="staff-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
-            </ng-container>
-          </button>
-        </th>
-        <th scope="col" class="staff-list__column-head">
-          <button class="staff-list__sort-button" (click)="handleSort('kommun')">
-            Kommun
-            <ng-container *ngIf="sortBy?.key === 'kommun'">
-              <digi-icon-caret-up class="staff-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
-              <digi-icon-caret-down class="staff-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
-            </ng-container>
-          </button>
-        </th>
-        <th scope="col" class="staff-list__column-head">
-          <button class="staff-list__sort-button" (click)="handleSort('active')">
-            Aktiv i tjänst
-            <ng-container *ngIf="sortBy?.key === 'active'">
-              <digi-icon-caret-up class="staff-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
-              <digi-icon-caret-down class="staff-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
-            </ng-container>
-          </button>
-        </th>
         <th scope="col" class="staff-list__column-head">
           <button class="staff-list__sort-button" (click)="handleSort('service')">
             Tjänst
@@ -47,6 +20,15 @@
             </ng-container>
           </button>
         </th>
+        <th scope="col" class="staff-list__column-head">
+          <button class="staff-list__sort-button" (click)="handleSort('utforandeverksamhet')">
+            Utförandeverksamhet
+            <ng-container *ngIf="sortBy?.key === 'utforandeverksamhet'">
+              <digi-icon-caret-up class="staff-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
+              <digi-icon-caret-down class="staff-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+            </ng-container>
+          </button>
+        </th>
       </tr>
     </thead>
     <tbody>
@@ -54,10 +36,8 @@
         <th scope="row">
           <a [routerLink]="staff.id" class="staff-list__link">{{ staff.fullName }}</a>
         </th>
-        <td>{{ staff.staffId }}</td>
-        <td>{{ staff.kommun }}</td>
-        <td>{{ staff.active ? 'Ja' : 'Nej' }}</td>
         <td>{{ staff.service }}</td>
+        <td>{{ staff.kommun }}</td>
       </tr>
     </tbody>
   </table>
@@ -72,4 +52,5 @@
   [afTotalResults]="staff.length"
   (afOnPageChange)="handlePagination($event.detail)"
   af-result-name="deltagare"
-></digi-navigation-pagination>
+>
+</digi-navigation-pagination>

apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.ts

@@ -17,6 +17,8 @@ export class StaffListComponent {
   private _currentPage$ = new BehaviorSubject<number>(1);
   private _staffPerPage = 10;
 
+  private _searchValue$ = new BehaviorSubject<string>('');
+
   get currentPage(): number {
     return this._currentPage$.getValue();
   }

apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.module.ts

@@ -4,6 +4,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { StaffListComponent } from './staff-list.component';
 
+
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [StaffListComponent],

apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.html

@@ -8,14 +8,18 @@
     </p>
 
     <div class="staff__cta-wrapper">
-      <digi-ng-link-internal afText="Skapa nytt konto" afRoute="/administration/skapa-konto"></digi-ng-link-internal>
+      <digi-ng-link-button afText="Skapa nytt konto" afRoute="/administration/skapa-konto"></digi-ng-link-button>
     </div>
 
     <h2>Personallista</h2>
-    <p>
+
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, officia perferendis? Excepturi animi rem culpa
+    <form class="staff__search-wrapper" (ngSubmit)="handleSearchSubmit()">
-      facere, laboriosam vel, quia eos eligendi, cupiditate doloribus aspernatur unde nihil iste earum corrupti illo.
+      <digi-form-input-search
-    </p>
+        af-label="Sök kunder"
+        af-label-description="Sök på namn eller ärendenummer"
+        (afOnInput)="handleSearchInput($event)"
+      ></digi-form-input-search>
+    </form>
 
     <dafa-staff-list
       *ngIf="filteredStaff$ | async as staff; else loadingRef"

apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.scss

@@ -1,3 +1,4 @@
+@import 'variables/gutters';
 .staff {
   &__cta-wrapper {
     margin-top: var(--digi--layout--gutter);
@@ -8,4 +9,10 @@
     align-items: center;
     gap: var(--digi--layout--gutter--s);
   }
+  &__search-wrapper {
+    display: flex;
+    max-width: var(--digi--typography--text--max-width);
+    margin-top: $digi--layout--gutter--l;
+    margin-bottom: $digi--layout--gutter--xl;
+  }
 }

apps/dafa-web/src/app/pages/administration/pages/staff/staff.module.ts

@@ -5,6 +5,8 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { StaffListModule } from './components/staff-list/staff-list.module';
 import { StaffComponent } from './staff.component';
+import { DigiNgLinkButtonModule } from '@af/digi-ng/_link/link-button';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -15,6 +17,8 @@ import { StaffComponent } from './staff.component';
     DigiNgLinkInternalModule,
     DigiNgSkeletonBaseModule,
     StaffListModule,
+    DigiNgLinkButtonModule,
+    FormsModule,
   ],
 })
 export class StaffModule {}

apps/dafa-web/src/app/pages/start/start.component.html

@@ -1 +1,40 @@
-<section class="start">Start funkar!</section>
+<section class="start">
+  <digi-typography>
+    <h1>Välkommen till DAFA 2.0</h1>
+    <p>Här finner du de senaste nyheterna om uppdateringar, notiser och mer.</p>
+  </digi-typography>
+  <div class="start__wrapper">
+    <div class="start__main">
+      <digi-info-card af-heading="Notiser" af-heading-level="h1" af-type="info" af-link-text="Deltagare">
+        <p>
+          Det har kommit in nya avrop med deltagare, länken nedan tar dig till fliken Nya deltagare. Du finner den också
+          i vänster menyn på sidan
+        </p>
+
+        <digi-ng-link-internal afText="Deltagare" afRoute="/mina-deltagare"></digi-ng-link-internal>
+      </digi-info-card>
+    </div>
+
+    <div class="start__sidebar">
+      <digi-ng-notification-alert afVariation="info" afSize="l" afHeading="Viktig information" afHeadingLevel="h3">
+        <p>Large alert! Check the knobs section and play around!</p>
+      </digi-ng-notification-alert>
+      <div class="start__sidebar-alert">
+        <digi-ng-notification-alert
+          afVariation="success"
+          afSize="l"
+          afCloseable="true"
+          afHeading="Allt gick bra"
+          afHeadingLevel="h3"
+        >
+          <p>Dina skickade tilldelningar har nått fram till handledare som godkänt och arbetat vidare med deltagarna</p>
+        </digi-ng-notification-alert>
+      </div>
+    </div>
+    <div class="start__footer">
+      <digi-info-card af-heading="Statistik" af-heading-level="h1" af-type="info">
+        <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
+      </digi-info-card>
+    </div>
+  </div>
+</section>

apps/dafa-web/src/app/pages/start/start.component.scss

@@ -0,0 +1,24 @@
+@import 'variables/gutters';
+.start {
+  &__wrapper {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-areas:
+      'header header '
+      'main  sidebar'
+      'footer footer ';
+    grid-gap: var(--digi--layout--gutter);
+  }
+  &__main {
+    grid-area: main;
+  }
+  &__sidebar {
+    grid-area: sidebar;
+  }
+  &__sidebar-alert {
+    margin-top: var(--digi--layout--gutter);
+  }
+  &__footer {
+    grid-area: footer;
+  }
+}

apps/dafa-web/src/app/pages/start/start.component.ts

@@ -1,4 +1,12 @@
+import { CardHeadingLevel, CardVariation } from '@af/digi-ng/_card/card';
+import {
+  NotificationAlertHeadingLevel,
+  NotificationAlertSize,
+  NotificationAlertVariation,
+} from '@af/digi-ng/_notification/notification-alert';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { InfoCardHeadingLevel } from '@digi/core/dist/types/components/_info-card/info-card/info-card-heading-level.enum';
+import { InfoCardType } from '@digi/core/dist/types/components/_info-card/info-card/info-card-type.enum';
 
 @Component({
   selector: 'dafa-start',

apps/dafa-web/src/app/pages/start/start.module.ts

@@ -1,10 +1,20 @@
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { StartComponent } from './start.component';
+import { DigiNgCardModule } from '@af/digi-ng/_card/card';
+import { DigiNgNotificationAlertModule } from '@af/digi-ng/_notification/notification-alert';
+import { DigiNgLinkInternalModule } from '@af/digi-ng/_link/link-internal';
 
 @NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [StartComponent],
-  imports: [CommonModule, RouterModule.forChild([{ path: '', component: StartComponent }])],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: StartComponent }]),
+    DigiNgCardModule,
+    DigiNgNotificationAlertModule,
+    DigiNgLinkInternalModule,
+  ],
 })
 export class StartModule {}

package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "repository": "https://bitbucket.arbetsformedlingen.se/projects/TEA/repos/dafa-web-monorepo",
   "engines": {
-    "node": "15.11.0"
+    "node": "14.16.1"
   },
   "scripts": {
     "ng": "nx",