Pull request #274: Remaining stuff

Merge in TEA/mina-sidor-fa-web from feature/TV-861-digi-ng-form-validation-message-v2-remaining-changes to develop

Squashed commit of the following:

commit 2dc4351060b6a9d209911c414adce42e5efaafa2
Merge: 64bc95d2 60d4ac4b
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 24 13:59:46 2021 +0100

    Merge branch 'develop' into feature/TV-861-digi-ng-form-validation-message-v2-remaining-changes

commit 64bc95d234613ca41a6b4e748890df42462a4d88
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Fri Nov 19 16:23:23 2021 +0100

    - Removed DigiNgFormSelectModule references
    - Replaced remaining digi-ng-form-select with ui-select

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.spec.ts

@@ -2,7 +2,6 @@ import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
 import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
 import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
 import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
-import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@@ -24,7 +23,6 @@ describe('EditEmployeeFormComponent', () => {
         DigiNgFormInputModule,
         DigiNgFormRadiobuttonGroupModule,
         DigiNgFormDatepickerModule,
-        DigiNgFormSelectModule,
         DigiNgPopoverModule,
         DigiNgFormCheckboxModule,
         HttpClientTestingModule,

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.component.spec.ts

@@ -2,7 +2,6 @@ import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
 import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
 import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
 import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
-import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@@ -27,7 +26,6 @@ describe('EmployeeFormComponent', () => {
           DigiNgFormInputModule,
           DigiNgFormRadiobuttonGroupModule,
           DigiNgFormDatepickerModule,
-          DigiNgFormSelectModule,
           DigiNgPopoverModule,
           DigiNgFormCheckboxModule,
         ],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.spec.ts

@@ -1,4 +1,3 @@
-import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
@@ -20,7 +19,6 @@ describe('DeltagareTabReportsComponent', () => {
         HttpClientTestingModule,
         ReactiveFormsModule,
         UiLoaderModule,
-        DigiNgFormSelectModule,
       ],
       providers: [DeltagareCardService],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],

apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts

@@ -1,4 +1,3 @@
-import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel';
 import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
 import { CommonModule } from '@angular/common';
@@ -42,7 +41,6 @@ import { DeltagareCardService } from './deltagare-card.service';
     HandledarePickerFormModule,
     DigiNgLayoutExpansionPanelModule,
     DigiNgPopoverModule,
-    DigiNgFormSelectModule,
     UiSkeletonModule,
     IconModule,
     UiLinkButtonModule,

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

@@ -2,7 +2,6 @@ import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
 import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
 import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
-import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgProgressProgressbarModule } from '@af/digi-ng/_progress/progressbar';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -36,7 +35,6 @@ import { UiSelectModule } from '@ui/select/select.module';
     ConfirmDialogModule,
     UiBackLinkModule,
     UiSkeletonModule,
-    DigiNgFormSelectModule,
     UiLoaderModule,
     UiSelectModule,
     ReportDescriptionListModule,

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

@@ -3,7 +3,6 @@ import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
 import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
 import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
 import { DigiNgFormRangeModule } from '@af/digi-ng/_form/form-range';
-import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgProgressProgressbarModule } from '@af/digi-ng/_progress/progressbar';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -65,7 +64,6 @@ import { SlutredovisningFormService } from './slutredovisning-form.service';
     ConfirmDialogModule,
     UiBackLinkModule,
     UiSkeletonModule,
-    DigiNgFormSelectModule,
     UiLoaderModule,
     UiSelectModule,
     ReportDescriptionListModule,

apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.component.html

@@ -1,17 +1,14 @@
 <form class="handledare-picker-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmitted()">
-  <digi-ng-form-select
+  <ui-select
-    class="handledare-picker-form__select"
     [formControl]="handledareFormControl"
-    [afLabel]="label"
+    [uiLabel]="label"
-    [afPlaceholder]="label"
+    [uiPlaceholder]="label"
-    [afSelectItems]="selectableHandledare"
+    [uiOptions]="selectableHandledare"
-    [afDisableValidStyle]="true"
+    [uiRequired]="true"
-    [afRequired]="true"
+    [uiAnnounceIfOptional]="true"
-    [afAnnounceIfOptional]="true"
+    [uiInvalid]="handledareFormControl.invalid && handledareFormControl.touched || invalid"
-    [afInvalid]="(handledareFormControl.invalid && handledareFormControl.touched) || invalid"
+    (uiOnChange)="handledareChanged()"
-    (afOnChange)="handledareChanged()"
+  ></ui-select>
-  ></digi-ng-form-select>
-
   <digi-button *ngIf="!skipSubmit" class="handledare-picker-form__submit" af-type="submit">
     {{submitText}}
   </digi-button>

apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.component.scss

@@ -23,13 +23,4 @@
   &__validation-wrapper {
     grid-area: validation;
   }
-
-  &__validation-message {
-    display: block;
-    margin-bottom: $digi--layout--gutter--s;
-  }
-
-  ::ng-deep .digi-ng-form-select__footer {
-    display: none !important;
-  }
 }

apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.component.spec.ts

@@ -1,4 +1,3 @@
-import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
@@ -11,7 +10,7 @@ describe('HandledarePickerFormComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule, HttpClientTestingModule, FormsModule, DigiNgFormSelectModule],
+      imports: [ReactiveFormsModule, HttpClientTestingModule, FormsModule],
       declarations: [HandledarePickerFormComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();

apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.module.ts

@@ -1,15 +1,21 @@
-import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { UiLoaderModule } from '@ui/loader/loader.module';
 import { HandledarePickerFormComponent } from './handledare-picker-form.component';
+import { UiSelectModule } from '@ui/select/select.module';
 import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [HandledarePickerFormComponent],
-  imports: [CommonModule, ReactiveFormsModule, UiLoaderModule, DigiNgFormSelectModule, UiValidationMessageModule],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    UiLoaderModule,
+    UiSelectModule,
+    UiValidationMessageModule,
+  ],
   exports: [HandledarePickerFormComponent],
 })
 export class HandledarePickerFormModule {}

apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.html

@@ -5,22 +5,14 @@
   [formGroup]="organizationPickerFormGroup"
   (ngSubmit)="onFormSubmitted()"
 >
-  <digi-ng-form-select
+  <ui-select
-    class="organization-picker-form__select"
     [formControl]="organizationFormControl"
-    [afLabel]="label"
+    [uiLabel]="label"
-    [afPlaceholder]="label"
+    [uiPlaceholder]="label"
-    [afSelectItems]="selectableOrganizations"
+    [uiOptions]="selectableOrganizations"
-    [afDisableValidStyle]="true"
+    [uiRequired]="true"
-    [afRequired]="true"
+    [uiInvalid]="organizationFormControl.invalid && organizationFormControl.touched"
-    [afInvalid]="organizationFormControl.invalid && organizationFormControl.touched"
-  ></digi-ng-form-select>
-
-  <digi-button class="organization-picker-form__submit" af-type="submit">{{submitText}}</digi-button>
-
-  <ui-validation-message
-    class="organization-picker-form__error"
-    [uiShowValidationMessage]="organizationFormControl.invalid && organizationFormControl.touched"
     uiValidationMessage="Du måste välja en organisation för att kunna logga in"
-  ></ui-validation-message>
+  ></ui-select>
+  <digi-button class="organization-picker-form__submit" af-type="submit">{{submitText}}</digi-button>
 </form>

apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.scss

@@ -29,12 +29,4 @@
     margin-top: $digi--layout--gutter--l;
     align-self: end;
   }
-
-  &__error {
-    grid-area: error;
-  }
-
-  ::ng-deep .digi-ng-form-select__footer {
-    display: none !important;
-  }
 }

apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.component.spec.ts

@@ -1,4 +1,3 @@
-import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -10,7 +9,7 @@ describe('OrganizationPickerFormComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule, FormsModule, DigiNgFormSelectModule],
+      imports: [ReactiveFormsModule, FormsModule],
       declarations: [OrganizationPickerFormComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();

apps/mina-sidor-fa/src/app/shared/components/organization-picker-form/organization-picker-form.module.ts

@@ -1,14 +1,14 @@
-import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
 import { OrganizationPickerFormComponent } from './organization-picker-form.component';
+import { UiSelectModule } from '@ui/select/select.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [OrganizationPickerFormComponent],
-  imports: [CommonModule, ReactiveFormsModule, DigiNgFormSelectModule, UiValidationMessageModule],
+  imports: [CommonModule, ReactiveFormsModule, UiSelectModule, UiValidationMessageModule],
   exports: [OrganizationPickerFormComponent],
 })
 export class OrganizationPickerFormModule {}