Pull request #277: - Ersatt alla digi-ng-form-input med ui-input

Merge in TEA/mina-sidor-fa-web from feature/TV-846-digi-ng-form-input to develop

Squashed commit of the following:

commit 80b2e4c19eefa9088767200d191785ce4bd84612
Merge: 4a8dc925 d307bd13
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 24 11:17:16 2021 +0100

    Merge branch 'develop' into feature/TV-846-digi-ng-form-input

commit 4a8dc9255789a3991b6eab2795c28f58a1276ed6
Merge: 5feff43a eeb02c0e
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Tue Nov 23 14:56:07 2021 +0100

    Merge branch 'develop' into feature/TV-846-digi-ng-form-input

commit 5feff43a48eb6553ba7d963b530969ae584db938
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Tue Nov 23 14:55:56 2021 +0100

    - Ersatt alla digi-ng-form-input med ui-input
    - Använt ui-inputs egna validation-message där validation-message används tillsammans
    - La till onBlur som emittar uiOnBlur för att trigga touched på ui-input som annars enbart blev touched på submit där markAllAsTouched körs.

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

@@ -10,18 +10,15 @@
       [headingText]="'Åtgärda följande fel för att spara dina ändringar:'"
       [validationErrorLinks]="getValidationErrorLinks()"
     ></msfa-error-list>
-    <digi-ng-form-input
+    <ui-input
-      [afId]="emailElementId"
+      [uiId]="emailElementId"
-      afLabel="E-post adress"
+      uiLabel="E-post adress"
-      afType="email"
+      uiType="email"
-      [formControlName]="emailFormControlName"
+      [formControl]="emailFormControl"
-      [afDisableValidStyle]="true"
+      (uiOnBlur)="markFormControlAsTouched(emailFormControl)"
-      [afInvalid]="editEmployeeFormGroup.errors?.email && emailFormControl.touched"
+      [uiInvalid]="editEmployeeFormGroup.errors?.email && emailFormControl?.touched"
-    ></digi-ng-form-input>
-    <ui-validation-message
-      [uiShowValidationMessage]="editEmployeeFormGroup.errors?.email && emailFormControl.touched"
       [uiValidationMessage]="editEmployeeFormGroup.errors?.email"
-    ></ui-validation-message>
+    ></ui-input>
     <div class="edit-employee-form__contents">
       <div class="edit-employee-form__block">
         <h2>Behörigheter</h2>

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

@@ -185,6 +185,10 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
     return this.employeeFormService.getFormControlName(role);
   }
 
+  markFormControlAsTouched(formControl: AbstractControl): void {
+    formControl.markAsTouched();
+  }
+
   abortFormSubmit(): void {
     this.displayEditWithoutRolesDialog = false;
   }

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

@@ -2,7 +2,6 @@ import { DigiNgButtonModule } from '@af/digi-ng/_button/button';
 import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 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 { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
 import { DigiNgLoaderSpinnerModule } from '@af/digi-ng/_loader/loader-spinner';
@@ -22,7 +21,7 @@ import { EmployeeDeleteModule } from '../../components/employee-delete/employee-
 import { EditEmployeeFormComponent } from './edit-employee-form/edit-employee-form.component';
 import { EmployeeFormComponent } from './employee-form.component';
 import { UiSelectModule } from '@ui/select/select.module';
-import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
+import { UiInputModule } from '@ui/input/input.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -32,7 +31,6 @@ import { UiValidationMessageModule } from '@ui/validation-message/validation-mes
     RouterModule.forChild([{ path: '', component: EmployeeFormComponent }]),
     ReactiveFormsModule,
     LocalDatePipeModule,
-    DigiNgFormInputModule,
     DigiNgFormRadiobuttonGroupModule,
     DigiNgFormDatepickerModule,
     DigiNgPopoverModule,
@@ -41,7 +39,6 @@ import { UiValidationMessageModule } from '@ui/validation-message/validation-mes
     DigiNgLoaderSpinnerModule,
     UiSkeletonModule,
     UiSelectModule,
-    UiValidationMessageModule,
     LayoutModule,
     EmployeeDeleteModule,
     DigiNgDialogModule,
@@ -50,6 +47,7 @@ import { UiValidationMessageModule } from '@ui/validation-message/validation-mes
     ErrorListModule,
     RolesDialogModule,
     UiLinkButtonModule,
+    UiInputModule,
   ],
 })
 export class EmployeeFormModule {}

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

@@ -99,37 +99,30 @@
               <div *ngIf="showTimePickers">
                 <div class="franvaro-report-form__time-pickers">
                   <div class="franvaro-report-form__time-picker">
-                    <digi-ng-form-input
+                    <ui-input
-                      afLabel="Starttid"
+                      uiLabel="Starttid"
                       [formControl]="startTimeFormControl"
-                      [afDisableValidStyle]="true"
+                      [uiAnnounceIfOptional]="true"
-                      [afAnnounceIfOptional]="true"
+                      [uiRequired]="true"
-                      [afRequired]="true"
+                      uiType="time"
-                      [afInvalid]="formControlIsInvalid(['startTime', 'expectedEndTimeIsBeforeStartTime'])"
+                      [uiInvalid]="formControlIsInvalid(['startTime', 'expectedEndTimeIsBeforeStartTime'])"
-                      afType="time"
-                    ></digi-ng-form-input>
-                    <ui-validation-message
-                      [uiShowValidationMessage]="formControlIsInvalid(['startTime'])"
                       [uiValidationMessage]="formErrors.startTime"
-                    ></ui-validation-message>
+                    ></ui-input>
                   </div>
                   <div class="franvaro-report-form__time-picker">
-                    <digi-ng-form-input
+                    <ui-input
-                      afLabel="Sluttid"
+                      uiLabel="Sluttid"
                       [formControl]="endTimeFormControl"
-                      [afDisableValidStyle]="true"
+                      [uiAnnounceIfOptional]="true"
-                      [afAnnounceIfOptional]="true"
+                      [uiRequired]="true"
-                      [afRequired]="true"
+                      uiType="time"
-                      [afInvalid]="formControlIsInvalid(['endTime', 'expectedEndTimeIsBeforeStartTime'])"
+                      [uiInvalid]="formControlIsInvalid(['endTime', 'expectedEndTimeIsBeforeStartTime'])"
-                      afType="time"
-                    ></digi-ng-form-input>
-                    <ui-validation-message
-                      [uiShowValidationMessage]="formControlIsInvalid(['endTime'])"
                       [uiValidationMessage]="formErrors.endTime"
-                    ></ui-validation-message>
+                    ></ui-input>
                   </div>
                 </div>
                 <ui-validation-message
+                  class="franvaro-report-form__validation-message"
                   [uiShowValidationMessage]="formControlIsInvalid(['expectedEndTimeIsBeforeStartTime'])"
                   [uiValidationMessage]="formErrors.expectedEndTimeIsBeforeStartTime"
                 ></ui-validation-message>
@@ -139,37 +132,30 @@
                 <h2>Tiden deltagaren skulle varit närvarande</h2>
                 <div class="franvaro-report-form__time-pickers">
                   <div class="franvaro-report-form__time-picker">
-                    <digi-ng-form-input
+                    <ui-input
-                      afLabel="Starttid"
+                      uiLabel="Starttid"
                       [formControl]="expectedPresenceStartTimeFormControl"
-                      [afDisableValidStyle]="true"
+                      [uiAnnounceIfOptional]="true"
-                      [afAnnounceIfOptional]="true"
+                      [uiRequired]="true"
-                      [afRequired]="true"
+                      uiType="time"
-                      [afInvalid]="formControlIsInvalid(['expectedPresenceStartTime', 'expectedPresenceEndTimeIsBeforeStartTime'])"
+                      [uiInvalid]="formControlIsInvalid(['expectedPresenceStartTime', 'expectedPresenceEndTimeIsBeforeStartTime'])"
-                      afType="time"
-                    ></digi-ng-form-input>
-                    <ui-validation-message
-                      [uiShowValidationMessage]="formControlIsInvalid(['expectedPresenceStartTime'])"
                       [uiValidationMessage]="formErrors.expectedPresenceStartTime"
-                    ></ui-validation-message>
+                    ></ui-input>
                   </div>
                   <div class="franvaro-report-form__time-picker">
-                    <digi-ng-form-input
+                    <ui-input
-                      afLabel="Sluttid"
+                      uiLabel="Sluttid"
                       [formControl]="expectedPresenceEndTimeFormControl"
-                      [afDisableValidStyle]="true"
+                      [uiAnnounceIfOptional]="true"
-                      [afAnnounceIfOptional]="true"
+                      [uiRequired]="true"
-                      [afRequired]="true"
+                      uiType="time"
-                      [afInvalid]="formControlIsInvalid(['expectedPresenceEndTime', 'expectedPresenceEndTimeIsBeforeStartTime'])"
+                      [uiInvalid]="formControlIsInvalid(['expectedPresenceEndTime', 'expectedPresenceEndTimeIsBeforeStartTime'])"
-                      afType="time"
-                    ></digi-ng-form-input>
-                    <ui-validation-message
-                      [uiShowValidationMessage]="formControlIsInvalid(['expectedPresenceEndTime'])"
                       [uiValidationMessage]="formErrors.expectedPresenceEndTime"
-                    ></ui-validation-message>
+                    ></ui-input>
                   </div>
                 </div>
                 <ui-validation-message
+                  class="franvaro-report-form__validation-message"
                   [uiShowValidationMessage]="formControlIsInvalid(['expectedPresenceEndTimeIsBeforeStartTime'])"
                   [uiValidationMessage]="formErrors.expectedPresenceEndTimeIsBeforeStartTime"
                 ></ui-validation-message>

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

@@ -37,4 +37,10 @@
     display: flex;
     gap: var(--digi--layout--gutter);
   }
+
+  &__validation-message {
+    ::ng-deep .ui-validation-message {
+      margin-top: var(--digi--layout--gutter--s);
+    }
+  }
 }

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

@@ -1,6 +1,5 @@
 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 { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -18,6 +17,7 @@ import { ReportDescriptionListModule } from '../../../components/report-descript
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { FranvaroReportFormComponent } from './franvaro-report-form.component';
 import { FranvaroReportFormService } from './franvaro-report-form.service';
+import { UiInputModule } from '@ui/input/input.module';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -34,12 +34,12 @@ import { FranvaroReportFormService } from './franvaro-report-form.service';
     DigiNgFormDatepickerModule,
     UiSkeletonModule,
     UiValidationMessageModule,
-    DigiNgFormInputModule,
     DigiNgDialogModule,
     UiTextareaModule,
     UiSelectModule,
     UiRadiobuttonGroupModule,
     UiLinkButtonModule,
+    UiInputModule,
   ],
   providers: [FranvaroReportFormService],
   exports: [FranvaroReportFormComponent],

apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect-panel/multiselect-panel.component.scss

@@ -42,10 +42,6 @@
     margin-bottom: var(--digi--layout--gutter--l);
   }
 
-  &__search-input ::ng-deep .digi-ng-form-input__label {
-    @include msfa__a11y-sr-only;
-  }
-
   &__input-reset-button {
     position: absolute;
     right: 0;

libs/ui/src/input/input.component.html

@@ -14,6 +14,7 @@
     [afValue]="currentValue"
     [afValidation]="uiInvalid ? 'error' : 'neutral'"
     (afOnInput)="checkForChange($event.detail.target.value)"
+    (afOnBlur)="onBlur()"
   ></digi-form-input>
   <ui-validation-message
     [uiShowValidationMessage]="uiInvalid && uiValidationMessage"

libs/ui/src/input/input.component.ts

@@ -47,6 +47,7 @@ export class InputComponent implements AfterViewInit, ControlValueAccessor, OnCh
   @Input() uiInvalid: boolean;
   @Input() uiValidationMessage: string;
   @Output() uiOnChange: EventEmitter<any> = new EventEmitter();
+  @Output() uiOnBlur: EventEmitter<any> = new EventEmitter();
 
   name: string | number;
 
@@ -85,6 +86,10 @@ export class InputComponent implements AfterViewInit, ControlValueAccessor, OnCh
     }
   }
 
+  onBlur(): void {
+    this.uiOnBlur.emit(true);
+  }
+
   writeValue(value: any): void {
     this._value = value;
     this.changeDetectorRef.detectChanges();

libs/ui/src/validation-message/validation-message.component.html

@@ -1,4 +1,4 @@
-<div aria-atomic="true" role="alert">
+<div class="ui-validation-message" aria-atomic="true" role="alert">
   <digi-form-validation-message *ngIf="uiShowValidationMessage" [afVariation]="uiValidationMessageType">
     {{ uiValidationMessage }}
   </digi-form-validation-message>