@chat21/chat21-web-widget 5.1.34-rc1 → 5.1.34

package/src/app/component/form/form-builder/form-builder.component.spec.ts

@@ -1,185 +1,43 @@
-import { CommonModule } from '@angular/common';
-import { SimpleChange } from '@angular/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { CustomTranslateService } from './../../../../chat21-core/providers/custom-translate.service';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
-import { TranslateModule } from '@ngx-translate/core';
-
-import { FormCheckboxComponent } from '../inputs/form-checkbox/form-checkbox.component';
-import { FormLabelComponent } from '../inputs/form-label/form-label.component';
-import { FormTextComponent } from '../inputs/form-text/form-text.component';
-import { FormTextareaComponent } from '../inputs/form-textarea/form-textarea.component';
-import { clonePrechatFormJsonMock } from '../prechat-form-test-mock';
-import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
-import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { FormBuilderComponent } from './form-builder.component';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { NGXLogger } from 'ngx-logger';
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 
 describe('FormBuilderComponent', () => {
   let component: FormBuilderComponent;
   let fixture: ComponentFixture<FormBuilderComponent>;
-  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error']);
-  const customLogger = new CustomLogger(ngxlogger);
-  let origLanguages: PropertyDescriptor | undefined;
-
-  beforeEach(() => {
-    origLanguages = Object.getOwnPropertyDescriptor(navigator, 'languages');
-    Object.defineProperty(navigator, 'languages', {
-      configurable: true,
-      get: () => ['en-US', 'en'],
-    });
-  });
-
-  afterEach(() => {
-    if (origLanguages) {
-      Object.defineProperty(navigator, 'languages', origLanguages);
-    } else {
-      delete (navigator as any).languages;
-    }
-  });
-
+  let ngxlogger: NGXLogger;
+  let customLogger = new CustomLogger(ngxlogger)
+  
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        FormBuilderComponent,
-        FormTextComponent,
-        FormTextareaComponent,
-        FormCheckboxComponent,
-        FormLabelComponent,
+      declarations: [ FormBuilderComponent ],
+      imports: [
+        ReactiveFormsModule,
+        TranslateModule.forRoot(),
       ],
-      imports: [CommonModule, ReactiveFormsModule, TranslateModule.forRoot()],
       providers: [
-        {
-          provide: CustomTranslateService,
-          useValue: {
-            translateLanguage: (keys: string[]) => {
-              const m = new Map<string, string>();
-              keys.forEach((k: string) => m.set(k, k));
-              return m;
-            },
-          },
-        },
-      ],
-    }).compileComponents();
+        CustomTranslateService,
+      ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FormBuilderComponent);
     component = fixture.componentInstance;
-    LoggerInstance.setInstance(customLogger);
-    component['logger'] = LoggerInstance.getInstance();
-    component.stylesMap = new Map([
-      ['themeColor', '#2a6ac1'],
-      ['foregroundColor', '#ffffff'],
-    ]);
-    component.isOpenPrechatForm = true;
-  });
-
-  function applyFormArray(arr: any[]) {
-    component.formArray = arr;
-    component.ngOnChanges({ formArray: new SimpleChange(null, arr, true) } as any);
+    LoggerInstance.setInstance(customLogger)
+    let logger = LoggerInstance.getInstance()
+    component['logger']= logger
     fixture.detectChanges();
-  }
+  });
 
   it('should create', () => {
-    applyFormArray([]);
     expect(component).toBeTruthy();
   });
-
-  it('with pre-chat mock should translate labels to English and build validators', () => {
-    const mock = clonePrechatFormJsonMock();
-    applyFormArray(mock);
-    expect(mock[0].text).toBe('User fullname');
-    expect(mock[1].text).toBe('Email');
-    expect(mock[1].errorLabel).toBe('Invalid email address');
-    expect(component.preChatFormGroupCustom.get('userFullname')?.hasError('required')).toBe(true);
-    expect(component.preChatFormGroupCustom.valid).toBe(false);
-    component.preChatFormGroupCustom.patchValue({
-      userFullname: 'John',
-      userEmail: 'john@example.com',
-    });
-    expect(component.preChatFormGroupCustom.valid).toBe(true);
-  });
-
-  it('onSubmitPreChatForm should emit value when form is valid', () => {
-    spyOn(component.onSubmitForm, 'emit');
-    applyFormArray(clonePrechatFormJsonMock());
-    component.preChatFormGroupCustom.patchValue({
-      userFullname: 'John',
-      userEmail: 'john@example.com',
-    });
-    component.onSubmitPreChatForm();
-    expect(component.onSubmitForm.emit).toHaveBeenCalledWith({
-      userFullname: 'John',
-      userEmail: 'john@example.com',
-    });
-  });
-
-  it('onSubmitPreChatForm should not emit when invalid but set submitted', () => {
-    spyOn(component.onSubmitForm, 'emit');
-    applyFormArray(clonePrechatFormJsonMock());
-    component.onSubmitPreChatForm();
-    expect(component.onSubmitForm.emit).not.toHaveBeenCalled();
-    expect(component.submitted).toBe(true);
-  });
-
-  it('onEnterButtonPressed should delegate to submit', () => {
-    spyOn(component, 'onSubmitPreChatForm');
-    component.onEnterButtonPressed({});
-    expect(component.onSubmitPreChatForm).toHaveBeenCalled();
-  });
-
-  it('unsupported field type should emit onErrorRenderForm and yield empty group', () => {
-    spyOn(component.onErrorRenderForm, 'emit');
-    applyFormArray([{ name: 'x', type: 'select', label: { en: 'X' } }]);
-    expect(component.onErrorRenderForm.emit).toHaveBeenCalled();
-    expect(Object.keys(component.preChatFormGroupCustom.controls)).toEqual([]);
-  });
-
-  it('getAcceptLanguage should pick browser language when keys match navigator.languages', () => {
-    const lang = component.getAcceptLanguage({ default: 'fallback', en: 'English', it: 'Italian' } as any);
-    expect(lang).toBe('en');
-  });
-
-  describe('getAcceptLanguage with non-matching browser languages', () => {
-    beforeEach(() => {
-      Object.defineProperty(navigator, 'languages', {
-        configurable: true,
-        get: () => ['xx-XX'],
-      });
-    });
-    afterEach(() => {
-      Object.defineProperty(navigator, 'languages', {
-        configurable: true,
-        get: () => ['en-US', 'en'],
-      });
-    });
-
-    it('should return default when present and no other key matches', () => {
-      const lang = component.getAcceptLanguage({ default: 'fallback', fr: 'Français' } as any);
-      expect(lang).toBe('default');
-    });
-  });
-
-  it('onResetForm should clear submitted flag and reset controls', () => {
-    applyFormArray(clonePrechatFormJsonMock());
-    component.preChatFormGroupCustom.patchValue({
-      userFullname: 'John',
-      userEmail: 'john@example.com',
-    });
-    component.onSubmitPreChatForm();
-    expect(component.submitted).toBe(true);
-    component.onResetForm();
-    expect(component.submitted).toBe(false);
-    expect(component.preChatFormGroupCustom.value).toEqual({
-      userFullname: null,
-      userEmail: null,
-    });
-  });
-
-  it('should render text inputs from mock in the template', () => {
-    applyFormArray(clonePrechatFormJsonMock());
-    const inputs = fixture.nativeElement.querySelectorAll('input[type="text"], input[type="email"]');
-    expect(inputs.length).toBeGreaterThanOrEqual(2);
-  });
 });

package/src/app/component/form/inputs/form-checkbox/form-checkbox.component.html

@@ -1,18 +1,14 @@
 <form [formGroup]="form">
   <div class="c21-body-header-checkbox">
-    <input  class="form-check-input errors"
-            type="checkbox"
-            [id]="fieldBaseId"
+    <input  class="form-check-input errors" 
+            type="checkbox" 
             [formControlName]="element?.name"
             [checked]="element?.value"
             [tabIndex]="element?.tabIndex"
             [ngClass]="{'errors': hasSubmitted && form.controls[element?.name].errors}"
-            [attr.aria-required]="element?.mandatory ? 'true' : null"
-            [attr.aria-invalid]="ariaInvalid"
-            [attr.aria-describedby]="ariaDescribedByErrors"
             (keydown.enter)="onEnterPressed($event)">
-    <label class="c21-form-message-field" [attr.for]="fieldBaseId">{{element?.text}}</label>
-    <div [id]="errorsId" *ngIf="hasSubmitted && form.get(element?.name)?.errors" class="text-danger" role="alert">
+    <label class="c21-form-message-field">{{element?.text}}</label>
+    <div *ngIf="hasSubmitted && form.get(element?.name).errors" class="text-danger">
       {{translationErrorLabelMap.get('LABEL_ERROR_FIELD_REQUIRED')}}
     </div>
   </div>

package/src/app/component/form/inputs/form-checkbox/form-checkbox.component.scss

@@ -40,7 +40,7 @@ input[type="checkbox"] {
 
 // /* hover state */
 input[type="checkbox"]:not(:checked):hover,
-input[type="checkbox"]:not(:checked):focus:not(:focus-visible) {
+input[type="checkbox"]:not(:checked):focus {
     border-width: 2px;
 
     //box-shadow
@@ -59,15 +59,10 @@ input[type="checkbox"]:active:not(:disabled) {
 }
 
 // /* focus state */
-input[type="radio"]:focus:not(:focus-visible),
-input[type="checkbox"]:focus:not(:focus-visible) {
-    outline: none;
-}
-
-input[type="radio"]:focus-visible,
-input[type="checkbox"]:focus-visible {
-    outline: 2px solid var(--themeColor, #1a73e8);
-    outline-offset: 2px;
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+    outline:none;
+  
 }
 
 // /* input checked border color */

package/src/app/component/form/inputs/form-checkbox/form-checkbox.component.spec.ts

@@ -1,104 +1,30 @@
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-import { By } from '@angular/platform-browser';
+import { style } from '@angular/animations';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormGroupDirective } from '@angular/forms';
 
-import { FormArray } from 'src/chat21-core/models/formArray';
 import { FormCheckboxComponent } from './form-checkbox.component';
 
-@Component({
-  template: `
-    <form [formGroup]="form">
-      <chat-form-checkbox
-        [element]="element"
-        controlName="acceptTerms"
-        [translationErrorLabelMap]="translationErrorLabelMap"
-        [stylesMap]="stylesMap"
-        [hasSubmitted]="hasSubmitted"
-      ></chat-form-checkbox>
-    </form>`,
-})
-class FormCheckboxHostComponent {
-  form = new FormBuilder().group({
-    acceptTerms: [false, [Validators.requiredTrue]],
-  });
-  element = {
-    name: 'acceptTerms',
-    type: 'checkbox',
-    text: 'I accept the terms',
-    mandatory: true,
-    tabIndex: 1500,
-  } as FormArray;
-  stylesMap = new Map<string, string>([
-    ['themeColor', '#2a6ac1'],
-    ['foregroundColor', '#ffffff'],
-  ]);
-  translationErrorLabelMap = new Map<string, string>([
-    ['LABEL_ERROR_FIELD_REQUIRED', 'You must accept'],
-  ]);
-  hasSubmitted = false;
-}
-
 describe('FormCheckboxComponent', () => {
-  let fixture: ComponentFixture<FormCheckboxHostComponent>;
-  let host: FormCheckboxHostComponent;
-
+  let component: FormCheckboxComponent;
+  let fixture: ComponentFixture<FormCheckboxComponent>;
+  let stylesMap = new Map<string, string>();
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [FormCheckboxHostComponent, FormCheckboxComponent],
-      imports: [ReactiveFormsModule],
-    }).compileComponents();
+      declarations: [ FormCheckboxComponent ],
+      providers: [ FormGroupDirective ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(FormCheckboxHostComponent);
-    host = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create with checkbox wired to label for=id', () => {
-    const box = fixture.nativeElement.querySelector(
-      'input#c21-prechat-acceptTerms',
-    ) as HTMLInputElement;
-    expect(box.type).toBe('checkbox');
-    const label = fixture.nativeElement.querySelector(
-      'label[for="c21-prechat-acceptTerms"]',
-    ) as HTMLLabelElement;
-    expect(label.textContent?.trim()).toBe('I accept the terms');
-  });
-
-  it('should expose aria-invalid after submit when still unchecked', () => {
-    host.hasSubmitted = true;
+    fixture = TestBed.createComponent(FormCheckboxComponent);
+    component = fixture.componentInstance;
+    component.stylesMap = stylesMap.set('themeColor', "#2a6ac1")
+                                    .set('foregroundColor', "#ffffff")
     fixture.detectChanges();
-    const box = fixture.nativeElement.querySelector(
-      'input#c21-prechat-acceptTerms',
-    ) as HTMLInputElement;
-    expect(box.getAttribute('aria-invalid')).toBe('true');
-    expect(box.getAttribute('aria-describedby')).toBe('c21-prechat-acceptTerms-errors');
-    const alert = fixture.nativeElement.querySelector(
-      '#c21-prechat-acceptTerms-errors',
-    ) as HTMLElement;
-    expect(alert.textContent).toContain('You must accept');
-  });
-
-  it('onEnterPressed should bubble intent to parent form-builder via output', () => {
-    const inner = fixture.debugElement.query(By.directive(FormCheckboxComponent))
-      .componentInstance as FormCheckboxComponent;
-    spyOn(inner.onKeyEnterPressed, 'emit');
-    inner.onEnterPressed(new KeyboardEvent('keydown', { key: 'Enter' }));
-    expect(inner.onKeyEnterPressed.emit).toHaveBeenCalled();
-  });
-
-  it('ariaInvalid should be false before first submit', () => {
-    const inner = fixture.debugElement.query(By.directive(FormCheckboxComponent))
-      .componentInstance as FormCheckboxComponent;
-    expect(inner.ariaInvalid).toBe('false');
   });
 
-  it('fieldBaseId should sanitize special characters in name', () => {
-    const inner = fixture.debugElement.query(By.directive(FormCheckboxComponent))
-      .componentInstance as FormCheckboxComponent;
-    inner.element = { name: 'a/b', text: 'x' } as FormArray;
-    expect(inner.fieldBaseId).toBe('c21-prechat-a_b');
+  it('should create', () => {
+    expect(component).toBeTruthy();
   });
 });

package/src/app/component/form/inputs/form-checkbox/form-checkbox.component.ts

@@ -17,32 +17,6 @@ export class FormCheckboxComponent implements OnInit {
   @Output() onKeyEnterPressed = new EventEmitter<any>();
   
   form: FormGroup<any>;
-
-  get fieldBaseId(): string {
-    const raw = this.element?.name || this.controlName || 'field';
-    return 'c21-prechat-' + String(raw).replace(/[^a-zA-Z0-9_-]/g, '_');
-  }
-
-  get errorsId(): string {
-    return this.fieldBaseId + '-errors';
-  }
-
-  get ariaDescribedByErrors(): string | null {
-    const name = this.element?.name;
-    if (!this.hasSubmitted || !this.form?.controls?.[name]?.errors) {
-      return null;
-    }
-    return this.errorsId;
-  }
-
-  get ariaInvalid(): 'true' | 'false' {
-    const name = this.element?.name;
-    if (!this.hasSubmitted || !this.form?.controls?.[name]) {
-      return 'false';
-    }
-    return this.form.controls[name].invalid ? 'true' : 'false';
-  }
-
   constructor(private rootFormGroup: FormGroupDirective,
               private elementRef: ElementRef) { }
 

package/src/app/component/form/inputs/form-label/form-label.component.spec.ts

@@ -1,61 +1,27 @@
-import { Component } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
-import { By } from '@angular/platform-browser';
+import { FormGroupDirective } from '@angular/forms';
 
-import { FormArray } from 'src/chat21-core/models/formArray';
 import { FormLabelComponent } from './form-label.component';
 
-@Component({
-  template: `
-    <form [formGroup]="form">
-      <chat-form-label
-        [element]="element"
-        controlName="intro"
-        [hasSubmitted]="hasSubmitted"
-      ></chat-form-label>
-    </form>`,
-})
-class FormLabelHostComponent {
-  form = new FormBuilder().group({});
-  hasSubmitted = false;
-  element = {
-    name: 'intro',
-    type: 'static',
-    text: '<strong>Welcome</strong> to support',
-    tabIndex: 0,
-  } as FormArray;
-}
-
 describe('FormLabelComponent', () => {
-  let fixture: ComponentFixture<FormLabelHostComponent>;
+  let component: FormLabelComponent;
+  let fixture: ComponentFixture<FormLabelComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [FormLabelHostComponent, FormLabelComponent],
-      imports: [ReactiveFormsModule],
-    }).compileComponents();
+      declarations: [ FormLabelComponent ],
+      providers: [ FormGroupDirective ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(FormLabelHostComponent);
+    fixture = TestBed.createComponent(FormLabelComponent);
+    component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-  it('should create and bind innerHTML from static field text', () => {
-    const host = fixture.nativeElement.querySelector('.c21-header-label label') as HTMLElement;
-    expect(host.innerHTML).toContain('<strong>Welcome</strong>');
-  });
-
-  it('should assign tabindex from element', () => {
-    const host = fixture.nativeElement.querySelector('.c21-header-label label') as HTMLElement;
-    expect(host.getAttribute('tabindex')).toBe('0');
-  });
-
-  it('should wire FormGroup from parent via FormGroupDirective', () => {
-    const inner = fixture.componentInstance;
-    const labelComp = fixture.debugElement.query(By.directive(FormLabelComponent))
-      .componentInstance as FormLabelComponent;
-    expect(labelComp.form).toBe(inner.form);
+  it('should create', () => {
+    expect(component).toBeTruthy();
   });
 });

package/src/app/component/form/inputs/form-radio-button/form-radio-button.component.spec.ts

@@ -1,15 +1,16 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FormRadioButtonComponent } from './form-radio-button.component';
 
-describe('FormRadioButtonComponent', () => {
+describe('RadioButtonComponent', () => {
   let component: FormRadioButtonComponent;
   let fixture: ComponentFixture<FormRadioButtonComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [FormRadioButtonComponent],
-    }).compileComponents();
+      declarations: [ FormRadioButtonComponent ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
@@ -21,23 +22,4 @@ describe('FormRadioButtonComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should render two radio inputs sharing a name for single-choice semantics', () => {
-    const radios = fixture.nativeElement.querySelectorAll(
-      'input[type="radio"]',
-    ) as NodeListOf<HTMLInputElement>;
-    expect(radios.length).toBe(2);
-    expect(radios[0].name).toBe(radios[1].name);
-  });
-
-  it('should associate each radio with a label via for/id', () => {
-    const r1 = fixture.nativeElement.querySelector('#flexRadioDefault1') as HTMLInputElement;
-    const r2 = fixture.nativeElement.querySelector('#flexRadioDefault2') as HTMLInputElement;
-    const l1 = fixture.nativeElement.querySelector('label[for="flexRadioDefault1"]') as HTMLLabelElement;
-    const l2 = fixture.nativeElement.querySelector('label[for="flexRadioDefault2"]') as HTMLLabelElement;
-    expect(l1).toBeTruthy();
-    expect(l2).toBeTruthy();
-    expect(r2.checked).toBe(true);
-    expect(r1.checked).toBe(false);
-  });
 });

package/src/app/component/form/inputs/form-select/form-select.component.spec.ts

@@ -1,15 +1,15 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
+import {ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormSelectComponent } from './form-select.component';
 
-describe('FormSelectComponent', () => {
+describe('SelectComponent', () => {
   let component: FormSelectComponent;
   let fixture: ComponentFixture<FormSelectComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [FormSelectComponent],
-    }).compileComponents();
+      declarations: [ FormSelectComponent ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
@@ -21,13 +21,4 @@ describe('FormSelectComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should render placeholder copy until a real select is implemented', () => {
-    const p = fixture.nativeElement.querySelector('p') as HTMLParagraphElement;
-    expect(p.textContent?.trim()).toBe('select works!');
-  });
-
-  it('ngOnInit should complete without throwing', () => {
-    expect(() => component.ngOnInit()).not.toThrow();
-  });
 });

package/src/app/component/form/inputs/form-text/form-text.component.html

@@ -1,25 +1,23 @@
 <form [formGroup]="form">
-  <div class="form-group label-floating"
+  <div class="form-group label-floating" 
       [ngClass]="{'is-empty': !form?.controls[element.name].value}"
-      [id]="'wrap-' + fieldBaseId" #div_input>
-    <label class="control-label" [attr.for]="fieldBaseId">
+      id="div_input" #div_input>
+    <label class="control-label">
       {{element?.text}}
     </label>
-    <input
-      [id]="fieldBaseId"
-      [formControlName]="element?.name"
+    <input 
+      [formControlName]="element?.name" 
       [type]="inputType"
       [tabIndex]="element?.tabIndex"
-      class="form-control"
+      class="form-control" 
       [class.errors]="form?.controls[element?.name].errors && hasSubmitted"
-      [attr.aria-required]="element?.mandatory ? 'true' : null"
-      [attr.aria-invalid]="ariaInvalid"
-      [attr.aria-describedby]="ariaDescribedByErrors"
-      (keydown.enter)="onEnterPressed($event)"
+      (keydown.enter)="onEnterPressed($event)" 
       (focus)="onFocus()" (focusout)="onFocusOut()">
   </div>
-  <div [id]="errorsId" *ngIf="hasSubmitted && form?.controls[element?.name]?.errors" class="text-danger" role="alert">
-    <span *ngIf="form?.controls[element?.name].hasError('required')">{{translationErrorLabelMap?.get('LABEL_ERROR_FIELD_REQUIRED')}}</span>
-    <span *ngIf="form?.controls[element?.name].hasError('pattern') && element?.errorLabel">{{element?.errorLabel}}</span>
+  <div *ngIf="hasSubmitted && form?.controls[element?.name].errors && form?.controls[element?.name].hasError('required')" class="text-danger">
+    {{translationErrorLabelMap?.get('LABEL_ERROR_FIELD_REQUIRED')}}
+  </div>
+  <div *ngIf="hasSubmitted && form?.controls[element?.name].errors && form?.controls[element?.name].hasError('pattern') && element?.errorLabel" class="text-danger">
+    {{element?.errorLabel}}
   </div>
 </form>

package/src/app/component/form/inputs/form-text/form-text.component.scss

@@ -41,7 +41,7 @@
   }
 
   /* Remove input border colour */
-  input:focus:not(:focus-visible),
+  input:focus,
   input:active,
   input:hover,
   input:visited {
@@ -49,11 +49,6 @@
       background-color: #ffffff;
       outline: none;
   }
-
-  input:focus-visible {
-      outline: 2px solid var(--themeColor, #1a73e8);
-      outline-offset: 2px;
-  }
   
   /* Remove input background colour for Chrome autocomplete */
   input:-webkit-autofill,
@@ -184,11 +179,6 @@ input {
   transition-duration: 0.3s;
 }
 
-.form-group.is-focused .form-control:focus-visible {
-  outline: 2px solid var(--themeColor, #1a73e8) !important;
-  outline-offset: 2px;
-}
-
 .form-group.is-focused.form-info .form-control {
   background-image: linear-gradient(#00bcd4, #00bcd4), linear-gradient(#D2D2D2, #D2D2D2);
 }