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

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

@@ -1,127 +1,31 @@
-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 { FormGroupDirective } from '@angular/forms';
 
-import { FormArray } from 'src/chat21-core/models/formArray';
-import { clonePrechatFormJsonMock } from '../../prechat-form-test-mock';
 import { FormTextComponent } from './form-text.component';
 
-@Component({
-  template: `
-    <form [formGroup]="form">
-      <chat-form-text
-        [element]="element"
-        [controlName]="controlName"
-        [translationErrorLabelMap]="translationErrorLabelMap"
-        [stylesMap]="stylesMap"
-        [hasSubmitted]="hasSubmitted"
-      ></chat-form-text>
-    </form>`,
-})
-class FormTextHostComponent {
-  form = new FormBuilder().group({
-    userFullname: ['', Validators.required],
-    userEmail: ['', [Validators.required, Validators.pattern(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)]],
-  });
-  controlName = 'userFullname';
-  element = {
-    name: 'userFullname',
-    type: 'text',
-    mandatory: true,
-    text: 'User fullname',
-    tabIndex: 1411,
-  } as FormArray;
-  stylesMap = new Map<string, string>([
-    ['themeColor', '#2a6ac1'],
-    ['foregroundColor', '#ffffff'],
-  ]);
-  translationErrorLabelMap = new Map<string, string>([
-    ['LABEL_ERROR_FIELD_REQUIRED', 'Required field'],
-  ]);
-  hasSubmitted = false;
-}
-
 describe('FormTextComponent', () => {
-  let hostFixture: ComponentFixture<FormTextHostComponent>;
-  let host: FormTextHostComponent;
-
+  let component: FormTextComponent;
+  let fixture: ComponentFixture<FormTextComponent>;
+  let stylesMap = new Map<string, string>();
+  let translationErrorLabelMap = new Map<string, string>();
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [FormTextHostComponent, FormTextComponent],
-      imports: [ReactiveFormsModule],
-    }).compileComponents();
+      declarations: [ FormTextComponent ],
+      providers: [ FormGroupDirective ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
-    hostFixture = TestBed.createComponent(FormTextHostComponent);
-    host = hostFixture.componentInstance;
-    hostFixture.detectChanges();
-  });
-
-  it('should create with label and stable id from mock-like field', () => {
-    expect(hostFixture.nativeElement.querySelector('chat-form-text')).toBeTruthy();
-    const input = hostFixture.nativeElement.querySelector(
-      'input#c21-prechat-userFullname',
-    ) as HTMLInputElement;
-    expect(input.type).toBe('text');
-    expect(input.getAttribute('aria-required')).toBe('true');
-  });
-
-  it('should use email input type when control name suggests email', () => {
-    host.controlName = 'userEmail';
-    host.element = clonePrechatFormJsonMock()[1] as FormArray;
-    host.element.text = 'Email';
-    hostFixture.detectChanges();
-    const input = hostFixture.nativeElement.querySelector(
-      'input#c21-prechat-userEmail',
-    ) as HTMLInputElement;
-    expect(input.type).toBe('email');
-  });
-
-  it('should show required error region when submitted and empty', () => {
-    host.hasSubmitted = true;
-    hostFixture.detectChanges();
-    const input = hostFixture.nativeElement.querySelector(
-      'input#c21-prechat-userFullname',
-    ) as HTMLInputElement;
-    expect(input.getAttribute('aria-invalid')).toBe('true');
-    expect(input.getAttribute('aria-describedby')).toBe('c21-prechat-userFullname-errors');
-    const alert = hostFixture.nativeElement.querySelector(
-      '#c21-prechat-userFullname-errors',
-    ) as HTMLElement;
-    expect(alert.textContent).toContain('Required field');
-  });
-
-  it('onEnterPressed should emit keyboard event', () => {
-    const inner = hostFixture.debugElement.query(By.directive(FormTextComponent))
-      .componentInstance as FormTextComponent;
-    spyOn(inner.onKeyEnterPressed, 'emit');
-    const ev = new KeyboardEvent('keydown', { key: 'Enter' });
-    inner.onEnterPressed(ev);
-    expect(inner.onKeyEnterPressed.emit).toHaveBeenCalledWith(ev);
-  });
-
-  it('ariaInvalid should stay false until form is submitted', () => {
-    const inner = hostFixture.debugElement.query(By.directive(FormTextComponent))
-      .componentInstance as FormTextComponent;
-    expect(inner.ariaInvalid).toBe('false');
-    host.hasSubmitted = true;
-    hostFixture.detectChanges();
-    expect(inner.ariaInvalid).toBe('true');
+    fixture = TestBed.createComponent(FormTextComponent);
+    component = fixture.componentInstance;
+    component.stylesMap = stylesMap.set('themeColor', "#2a6ac1")
+                                    .set('foregroundColor', "#ffffff")
+    component.translationErrorLabelMap = translationErrorLabelMap.set('LABEL_ERROR_FIELD_REQUIRED', "LABEL_ERROR_FIELD_REQUIRED")
+    fixture.detectChanges();
   });
 
-  it('ngOnChanges should map theme CSS variables onto host', () => {
-    const innerDe = hostFixture.debugElement.query(By.directive(FormTextComponent));
-    const inner = innerDe.componentInstance as FormTextComponent;
-    inner.ngOnChanges({
-      stylesMap: {
-        currentValue: host.stylesMap,
-        previousValue: null,
-        firstChange: true,
-        isFirstChange: () => true,
-      },
-    } as any);
-    expect(innerDe.nativeElement.style.getPropertyValue('--themeColor')).toBe('#2a6ac1');
+  it('should create', () => {
+    expect(component).toBeTruthy();
   });
 });

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

@@ -1,6 +1,5 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, OnDestroy, Output, SimpleChange, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChange, ViewChild } from '@angular/core';
 import { FormGroup, FormGroupDirective } from '@angular/forms';
-import { Subscription } from 'rxjs';
 import { FormArray } from '../../../../../chat21-core/models/formArray';
 
 @Component({
@@ -8,7 +7,7 @@ import { FormArray } from '../../../../../chat21-core/models/formArray';
   templateUrl: './form-text.component.html',
   styleUrls: ['./form-text.component.scss']
 })
-export class FormTextComponent implements OnInit, OnDestroy {
+export class FormTextComponent implements OnInit {
 
   @Input() element: FormArray;
   @Input() controlName: string;
@@ -20,50 +19,19 @@ export class FormTextComponent implements OnInit, OnDestroy {
   @ViewChild('div_input') input: ElementRef;
   form: FormGroup<any>;
   inputType: string = 'text'
-  private valueChangesSub?: Subscription;
-
-  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) { }
 
   ngOnInit() {
     this.form = this.rootFormGroup.control as FormGroup<any>;
     if(this.form && this.form.controls && this.form.controls[this.controlName]){
-      this.valueChangesSub = this.form.controls[this.controlName].valueChanges.subscribe((value) => {
+      this.form.controls[this.controlName].valueChanges.subscribe((value) => {
         this.hasSubmitted= false;
         this.setFormStyle();
       })
     }
   }
 
-  ngOnDestroy() {
-    this.valueChangesSub?.unsubscribe();
-  }
-
   ngOnChanges(changes: SimpleChange){
     if(this.controlName && (this.controlName.toLowerCase().includes('email') || this.controlName.toLowerCase().includes('e-mail')) ){
       this.inputType = 'email';

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

@@ -1,27 +1,25 @@
 <form [formGroup]="form">
-  <div class="form-group label-floating" [id]="'wrap-' + fieldBaseId" #div_input
+  <div class="form-group label-floating" id="div_input" #div_input
       [ngClass]="{'is-empty': !form?.controls[element.name]?.value}">
-    <label class="control-label" [attr.for]="fieldBaseId">
+    <label class="control-label">
       {{element?.text}}
     </label>
-    <textarea
-      [id]="fieldBaseId"
-      [formControlName]="element?.name"
+    <textarea 
+      [formControlName]="element?.name" 
       [rows]="rows"
       [tabIndex]="element?.tabIndex"
       type="text"
       class="form-control"
-      [attr.aria-required]="element?.mandatory ? 'true' : null"
-      [attr.aria-invalid]="ariaInvalid"
-      [attr.aria-describedby]="ariaDescribedByErrors"
       (keydown)="onkeydown($event)"
-      (keydown.enter)="onEnterPressed($event)"
-      (focus)="onFocus()"
+      (keydown.enter)="onEnterPressed($event)" 
+      (focus)="onFocus()" 
       (focusout)="onFocusOut()">
     </textarea>
   </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-textarea/form-textarea.component.scss

@@ -42,7 +42,7 @@
     }
 
     /* Remove input border colour */
-    textarea:focus:not(:focus-visible),
+    textarea:focus,
     textarea:active,
     textarea:hover,
     textarea:visited {
@@ -52,6 +52,9 @@
         background-position: center bottom,center calc(100% - 1px);
         background-color: rgba(0,0,0,0);
         transition: background 0s ease-out;
+        // box-shadow: none;
+        // background-color: #ffffff;
+        // outline: none;
     }
     
     /* Remove input background colour for Chrome autocomplete */
@@ -179,15 +182,11 @@ textarea {
     background-repeat: no-repeat;
     background-position: center bottom,center calc(100% - 1px);
     background-size: 100% 2px, 100% 1px;
+    // box-shadow: none;
     transition-duration: 0.3s;
     width: 100%;
 }
 
-.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);
 }

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

@@ -1,163 +1,27 @@
-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 { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormGroup, FormGroupDirective } from '@angular/forms';
 
-import { FormArray } from 'src/chat21-core/models/formArray';
-import { clonePrechatFormJsonMock } from '../../prechat-form-test-mock';
 import { FormTextareaComponent } from './form-textarea.component';
 
-@Component({
-  template: `
-    <form [formGroup]="form">
-      <chat-form-textarea
-        [element]="element"
-        [controlName]="controlName"
-        [rows]="rows"
-        [translationErrorLabelMap]="translationErrorLabelMap"
-        [stylesMap]="stylesMap"
-        [hasSubmitted]="hasSubmitted">
-      </chat-form-textarea>
-    </form>`,
-})
-class FormTextareaHostComponent {
-  form = new FormBuilder().group({
-    notes: ['', [Validators.required, Validators.pattern(/^[A-Z]+$/)]],
-  });
-  controlName = 'notes';
-  rows = 5;
-  element = {
-    name: 'notes',
-    type: 'textarea',
-    text: 'Note libere',
-    mandatory: true,
-    tabIndex: 2,
-    errorLabel: 'Solo maiuscole',
-  } as FormArray;
-  stylesMap = new Map<string, string>([
-    ['themeColor', '#0a0'],
-    ['foregroundColor', '#efe'],
-  ]);
-  translationErrorLabelMap = new Map([['LABEL_ERROR_FIELD_REQUIRED', 'Campo obbligatorio']]);
-  hasSubmitted = false;
-}
-
 describe('FormTextareaComponent', () => {
-  let hostFixture: ComponentFixture<FormTextareaHostComponent>;
-  let host: FormTextareaHostComponent;
-  let textareaEl: HTMLTextAreaElement;
+  let component: FormTextareaComponent;
+  let fixture: ComponentFixture<FormTextareaComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [FormTextareaHostComponent, FormTextareaComponent],
-      imports: [ReactiveFormsModule],
-    }).compileComponents();
+      declarations: [ FormTextareaComponent ],
+      providers: [ FormGroupDirective ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
-    hostFixture = TestBed.createComponent(FormTextareaHostComponent);
-    host = hostFixture.componentInstance;
-    hostFixture.detectChanges();
-    textareaEl = hostFixture.nativeElement.querySelector('textarea#c21-prechat-notes') as HTMLTextAreaElement;
-  });
-
-  it('should create with label bound to element text and stable id', () => {
-    expect(hostFixture.nativeElement.querySelector('chat-form-textarea')).toBeTruthy();
-    const label = hostFixture.nativeElement.querySelector('label[for="c21-prechat-notes"]') as HTMLLabelElement;
-    expect(label.textContent?.trim()).toBe('Note libere');
-    expect(textareaEl).toBeTruthy();
-    expect(textareaEl.rows).toBe(5);
-    expect(textareaEl.getAttribute('aria-required')).toBe('true');
-  });
-
-  it('fieldBaseId should sanitize unsafe characters in element name', () => {
-    const inner = hostFixture.debugElement.query(By.directive(FormTextareaComponent)).componentInstance as FormTextareaComponent;
-    inner.element = { name: 'a b<c>', text: 'x' } as FormArray;
-    expect(inner.fieldBaseId).toBe('c21-prechat-a_b_c_');
-  });
-
-  it('should set aria-invalid and show required error when submitted and empty', () => {
-    host.hasSubmitted = true;
-    hostFixture.detectChanges();
-    expect(textareaEl.getAttribute('aria-invalid')).toBe('true');
-    expect(textareaEl.getAttribute('aria-describedby')).toBe('c21-prechat-notes-errors');
-    const alert = hostFixture.nativeElement.querySelector('#c21-prechat-notes-errors') as HTMLElement;
-    expect(alert.getAttribute('role')).toBe('alert');
-    expect(alert.textContent).toContain('Campo obbligatorio');
-  });
-
-  it('should show pattern error label when value invalid for pattern', () => {
-    host.form.patchValue({ notes: 'lowercase' });
-    host.hasSubmitted = true;
-    hostFixture.detectChanges();
-    const alert = hostFixture.nativeElement.querySelector('#c21-prechat-notes-errors') as HTMLElement;
-    expect(alert.textContent).toContain('Solo maiuscole');
-  });
-
-  it('onEnterPressed should emit and call preventDefault on handler', () => {
-    const innerDe = hostFixture.debugElement.query(By.directive(FormTextareaComponent));
-    const inner = innerDe.componentInstance as FormTextareaComponent;
-    spyOn(inner.onKeyEnterPressed, 'emit');
-    const ev = new KeyboardEvent('keydown', { key: 'Enter' });
-    spyOn(ev, 'preventDefault');
-    inner.onEnterPressed(ev);
-    expect(ev.preventDefault).toHaveBeenCalled();
-    expect(inner.onKeyEnterPressed.emit).toHaveBeenCalledWith(ev);
-  });
-
-  it('onkeydown with modifier + Enter should append newline to control value', () => {
-    const inner = hostFixture.debugElement.query(By.directive(FormTextareaComponent)).componentInstance as FormTextareaComponent;
-    host.form.patchValue({ notes: 'A' });
-    const ev = {
-      metaKey: true,
-      keyCode: 13,
-      which: 13,
-      preventDefault: jasmine.createSpy('preventDefault'),
-    } as any;
-    inner.onkeydown(ev);
-    expect(host.form.controls.notes.value).toContain('\r\n');
-    expect(ev.preventDefault).toHaveBeenCalled();
-  });
-
-  it('setFormStyle should toggle form-danger / form-success on wrapper', () => {
-    const inner = hostFixture.debugElement.query(By.directive(FormTextareaComponent)).componentInstance as FormTextareaComponent;
-    host.form.patchValue({ notes: '' });
-    inner.setFormStyle();
-    hostFixture.detectChanges();
-    const wrap = hostFixture.nativeElement.querySelector('#wrap-c21-prechat-notes') as HTMLElement;
-    expect(wrap.classList.contains('form-danger')).toBe(true);
-    host.form.patchValue({ notes: 'ABC' });
-    inner.setFormStyle();
-    expect(wrap.classList.contains('form-success')).toBe(true);
-  });
-
-  it('ngOnChanges should set CSS variables from stylesMap on host element', () => {
-    const innerDe = hostFixture.debugElement.query(By.directive(FormTextareaComponent));
-    const inner = innerDe.componentInstance as FormTextareaComponent;
-    inner.ngOnChanges({
-      stylesMap: {
-        currentValue: host.stylesMap,
-        previousValue: null,
-        firstChange: true,
-        isFirstChange: () => true,
-      },
-    });
-    const hostEl: HTMLElement = innerDe.nativeElement;
-    expect(hostEl.style.getPropertyValue('--themeColor')).toBe('#0a0');
-    expect(hostEl.style.getPropertyValue('--foregroundColor')).toBe('#efe');
-  });
-
-  it('fieldBaseId for pre-chat mock fullname matches stable public id prefix', () => {
-    const inner = hostFixture.debugElement.query(By.directive(FormTextareaComponent))
-      .componentInstance as FormTextareaComponent;
-    inner.element = { name: 'userFullname', text: 'Nome' } as FormArray;
-    expect(inner.fieldBaseId).toBe('c21-prechat-userFullname');
+    fixture = TestBed.createComponent(FormTextareaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
   });
 
-  it('errorsId should append -errors to fieldBaseId (used with aria-describedby)', () => {
-    const inner = hostFixture.debugElement.query(By.directive(FormTextareaComponent))
-      .componentInstance as FormTextareaComponent;
-    inner.element = clonePrechatFormJsonMock()[1] as FormArray;
-    expect(inner.errorsId).toBe('c21-prechat-userEmail-errors');
+  it('should create', () => {
+    expect(component).toBeTruthy();
   });
 });

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

@@ -18,32 +18,6 @@ export class FormTextareaComponent implements OnInit {
   @Output() onKeyEnterPressed = new EventEmitter<any>();
   @ViewChild('div_input') input: ElementRef;
   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/prechat-form/prechat-form.component.html

@@ -1,23 +1,19 @@
+<!-- tabindex="1400"-->
 <div id="chat21-prechat-form"
-    #afPrechatFormComponent
-    role="dialog"
-    aria-modal="true"
-    cdkTrapFocus
-    [cdkTrapFocusAutoCapture]="true"
-    [attr.aria-label]="g.LABEL_COMPLETE_FORM">
+#afPrechatFormComponent
+tabindex="1400"
+aria-modal="true"
+onFocus="document.querySelector('[start-focus-chat21-prechat-form]').focus()">
 
         <!-- HEADER -->
-        <div class="c21-header" [ngStyle]="{'color': g.themeForegroundColor, 'background-image': g.colorGradient180 }">
+        <div class="c21-header" [ngStyle]="{'color': g.themeForegroundColor, 'background-image': g.colorGradient180 }" >
             <div class="c21-header-container">
 
-                <!-- ICON CLOSE PANEL -->
+                <!-- ICON CLOSE CHAT -->
                 <div class="c21-header-button">
                     <div class="c21-close-button c21-small">
-                        <button type="button"
-                            [attr.aria-label]="g.BUTTON_CLOSE_TO_ICON || 'Close panel'"
-                            class="c21-close-button-body"
-                            (click)="returnClosePage()">
-                            <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
+                        <button tabindex="1490" aria-label=" chiudi pannello"  class="c21-close-button-body" (click)="returnClosePage()">
+                            <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
                                 <path fill="none" d="M0 0h24v24H0V0z"/>
                                 <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
                             </svg>
@@ -42,7 +38,7 @@
             <div class="c21-body-container">
 
                 <div class="c21-body-header">
-                    <h2 start-focus-chat21-prechat-form class="c21-form-message-field">{{g.LABEL_COMPLETE_FORM}}</h2>
+                    <div start-focus-chat21-prechat-form tabindex="1410" class="c21-form-message-field">{{g.LABEL_COMPLETE_FORM}}</div>
                 </div>
 
                 <div class="c21-body-content">
@@ -92,6 +88,7 @@
                 </div>
 
             </div>
+            <span tabindex="1499" onFocus="document.querySelector('[start-focus-chat21-prechat-form]').focus()"></span>
 
         
             <!-- <label *ngIf="g.privacyField" class="privacy-field">