feature(digi-ng-migrering): Valideringsmeddelanden är nu flyttat från digi till vår kod (TV-861)

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

Squashed commit of the following:

commit 0f499871aca875dfcca640e8fbf871f52adc33d3
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Nov 19 11:54:42 2021 +0100

    fix minor bugs

commit ba3d2784903127e1b9dacbd04ad523a846cfe3f4
Merge: 20a004ba 981fb51d
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Nov 19 11:51:17 2021 +0100

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

    # Conflicts:
    #	apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.module.ts
    #	apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.module.ts
    #	apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.ts
    #	apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.module.ts

commit 20a004ba2f75f92043713704305815d60c61e2ef
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 18 15:54:16 2021 +0100

    Removed unused messagetypes from validation messages

commit 7dd5317267560dfdc95390b32f61b3df1518eb40
Merge: 9ffdefae c6bbfb1b
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 18 15:48:34 2021 +0100

    Fixed some issues with a11y

commit 9ffdefaea78c90f9d4f0ee3f9b4bf5a157c34667
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 16:47:47 2021 +0100

    removed reference to digiNgFormSelect

commit 6c54a0ea9b0f3101adf60c6d04c7ac92010206c9
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 16:45:29 2021 +0100

    Replaced digi-ng-form-sleect with ui-select (handledare-picker and organization-picker-form left.

commit 58341f57612bd70204bbdf3f9805bb54f8fc2078
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 15:56:42 2021 +0100

    removed reference in employee-form for digiNgFormSelect

commit 663743508264cb781c3cb60682f6e6937a8e4eeb
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 15:50:29 2021 +0100

    Replaced digi-ng-form-select with ui-select for edit-employee-form

commit fea6215809128f78229cbded5f92fc5de461317e
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 14:33:58 2021 +0100

    - Replaced all references to digi-form-validation-message (digi-core) to our new ui-validation-message ( a few left to change in this feature).
    - Replaced references from digi-ng-form-select to our new ui-select  in franvaro-report and signal-form

commit 28c152efe90acf766dbd190b12fd262344e39010
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 10:14:50 2021 +0100

    Removed blank space

commit 42fa243d15bba562cd019d542e9815350623db63
Merge: a7a4a4c1 8f05343e
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 10:10:44 2021 +0100

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

commit a7a4a4c111bc7a7cd3704d7c2866fcbb31ef00e0
Author: WP\holno <nikola.holst-nikolic@arbetsformedlingen.se>
Date:   Wed Nov 17 10:10:32 2021 +0100

    - Created ui-validation-message component for digi-form-validation-message to replace digi-ng´s form-validation.
    - Removed css style as it did not work earlier and looks the same without (good margin top as it is).

    FYI: the new validation-message from digi-core includes three types (success, error, warning), digi-ng´s included only two types (success, error).
This commit is contained in:
Daniel Appelgren
2021-11-19 11:57:10 +01:00
parent 981fb51d92
commit f166c530d9
42 changed files with 244 additions and 264 deletions

View File

@@ -10,9 +10,8 @@
[afChecked]="currentValue"
(afOnChange)="checkForChange($event.detail.target.checked)"
></digi-form-checkbox>
<div aria-atomic="true" role="alert">
<digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
>{{uiValidationMessage}}</digi-form-validation-message
>
</div>
<ui-validation-message
[uiShowValidationMessage]="uiInvalid && uiValidationMessage"
[uiValidationMessage]="uiValidationMessage"
></ui-validation-message>
</div>

View File

@@ -1,11 +1,12 @@
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 { CheckboxComponent } from './checkbox.component';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [CommonModule, ReactiveFormsModule],
imports: [CommonModule, ReactiveFormsModule, UiValidationMessageModule],
declarations: [CheckboxComponent],
exports: [CheckboxComponent],
})

View File

@@ -15,9 +15,8 @@
[afValidation]="uiInvalid ? 'error' : 'neutral'"
(afOnInput)="checkForChange($event.detail.target.value)"
></digi-form-input>
<div class="ui-input__validation" aria-atomic="true" role="alert">
<digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
>{{uiValidationMessage}}</digi-form-validation-message
>
</div>
<ui-validation-message
[uiShowValidationMessage]="uiInvalid && uiValidationMessage"
[uiValidationMessage]="uiValidationMessage"
></ui-validation-message>
</div>

View File

@@ -1,11 +1,12 @@
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 { InputComponent } from './input.component';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [CommonModule, ReactiveFormsModule],
imports: [CommonModule, ReactiveFormsModule, UiValidationMessageModule],
declarations: [InputComponent],
exports: [InputComponent],
})

View File

@@ -14,9 +14,8 @@
(afOnChange)="checkForChange($event.detail.target.value)"
></digi-form-radiobutton>
</div>
<div aria-atomic="true" role="alert">
<digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
>{{uiValidationMessage}}</digi-form-validation-message
>
</div>
<ui-validation-message
[uiShowValidationMessage]="uiInvalid && uiValidationMessage"
[uiValidationMessage]="uiValidationMessage"
></ui-validation-message>
</div>

View File

@@ -9,7 +9,7 @@ import {
OnChanges,
Output,
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
import { ControlValueAccessor, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { uuid } from '@utils/uuid.util';
import { RadiobuttonGroupDirection } from './radiobutton-group-direction.enum';
import { Radiobutton } from './radiobutton.model';

View File

@@ -1,11 +1,12 @@
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 { RadiobuttonGroupComponent } from './radiobutton-group.component';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [CommonModule, ReactiveFormsModule],
imports: [CommonModule, ReactiveFormsModule, UiValidationMessageModule],
declarations: [RadiobuttonGroupComponent],
exports: [RadiobuttonGroupComponent],
})

View File

@@ -37,9 +37,8 @@
<digi-icon-arrow-down aria-hidden="true" class="ui-select__icon" slot="icon"></digi-icon-arrow-down>
</div>
</div>
<div aria-atomic="true" role="alert">
<digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
>{{uiValidationMessage}}</digi-form-validation-message
>
</div>
<ui-validation-message
[uiShowValidationMessage]="uiInvalid && uiValidationMessage"
[uiValidationMessage]="uiValidationMessage"
></ui-validation-message>
</div>

View File

@@ -2,10 +2,11 @@ import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { SelectComponent } from './select.component';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [CommonModule, ReactiveFormsModule],
imports: [CommonModule, ReactiveFormsModule, UiValidationMessageModule],
declarations: [SelectComponent],
exports: [SelectComponent],
})

View File

@@ -18,9 +18,10 @@
(afOnInput)="checkForChange($event.detail.target.value)"
></digi-form-textarea>
<span class="ui-textarea__counter" *ngIf="uiMaxLength">{{charactersLeft}} tecken kvar</span>
<div class="ui-textarea__validation" aria-atomic="true" role="alert">
<digi-form-validation-message *ngIf="uiInvalid && uiValidationMessage" af-variation="error"
>{{uiValidationMessage}}</digi-form-validation-message
>
<div class="ui-textarea__validation">
<ui-validation-message
[uiShowValidationMessage]="uiInvalid && uiValidationMessage"
[uiValidationMessage]="uiValidationMessage"
></ui-validation-message>
</div>
</div>

View File

@@ -2,10 +2,11 @@ import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { TextareaComponent } from './textarea.component';
import { UiValidationMessageModule } from '@ui/validation-message/validation-message.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [CommonModule, ReactiveFormsModule],
imports: [CommonModule, ReactiveFormsModule, UiValidationMessageModule ],
declarations: [TextareaComponent],
exports: [TextareaComponent],
})

View File

@@ -0,0 +1,5 @@
export enum UiValidationMessageType {
SUCCESS = 'success',
ERROR = 'error',
WARNING = 'warning'
}

View File

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

View File

@@ -0,0 +1,25 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ValidationMessageComponent } from './validation-message.component';
describe('ValidationMessageComponent', () => {
let component: ValidationMessageComponent;
let fixture: ComponentFixture<ValidationMessageComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [ValidationMessageComponent],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ValidationMessageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@@ -0,0 +1,14 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { UiValidationMessageType } from './validation-message-type.enum';
@Component({
selector: 'ui-validation-message',
templateUrl: './validation-message.component.html',
styleUrls: ['./validation-message.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ValidationMessageComponent {
@Input() uiValidationMessage: string;
@Input() uiValidationMessageType: UiValidationMessageType = UiValidationMessageType.ERROR;
@Input() uiShowValidationMessage: boolean;
}

View File

@@ -0,0 +1,11 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ValidationMessageComponent } from './validation-message.component';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [CommonModule],
declarations: [ValidationMessageComponent],
exports: [ValidationMessageComponent],
})
export class UiValidationMessageModule {}