@chat21/chat21-web-widget 5.1.32-rc8 → 5.1.33-rc8

package/src/app/component/error-alert/error-alert.component.spec.ts

@@ -1,25 +1,85 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+import { FILE_SIZE_LIMIT } from 'src/app/utils/constants';
 import { ErrorAlertComponent } from './error-alert.component';
 
 describe('ErrorAlertComponent', () => {
   let component: ErrorAlertComponent;
   let fixture: ComponentFixture<ErrorAlertComponent>;
+  let translateStub: { translateLanguage: jasmine.Spy };
 
   beforeEach(async () => {
+    translateStub = {
+      translateLanguage: jasmine.createSpy('translateLanguage').and.callFake((keys: string[]) => {
+        const m = new Map<string, string>();
+        keys.forEach((k) => m.set(k, `Errore: {{FILE_SIZE_LIMIT}} MB (chiave ${k})`));
+        return m;
+      }),
+    };
+
     await TestBed.configureTestingModule({
-      declarations: [ ErrorAlertComponent ]
-    })
-    .compileComponents();
+      declarations: [ErrorAlertComponent],
+      providers: [{ provide: CustomTranslateService, useValue: translateStub }],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(ErrorAlertComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
-});
 
+  describe('inputs and translation key path', () => {
+    it('should resolve errorKeyMessage via CustomTranslateService and interpolate constants + errorParams', () => {
+      component.errorKeyMessage = 'MY_KEY';
+      component.errorParams = { FILE_SIZE_LIMIT: 99 };
+      component.ngOnInit();
+      expect(translateStub.translateLanguage).toHaveBeenCalledWith(['MY_KEY']);
+      expect(component.errorMessage).toContain('99');
+      expect(component.errorMessage).toContain('(chiave MY_KEY)');
+    });
+
+    it('should render translated message in the alert DOM', () => {
+      component.errorKeyMessage = 'NET_ERR';
+      component.ngOnInit();
+      fixture.detectChanges();
+      const content = fixture.debugElement.query(By.css('.alert-content')).nativeElement as HTMLElement;
+      expect(content.textContent?.trim().length).toBeGreaterThan(0);
+      expect(fixture.nativeElement.querySelector('#alert-container')).toBeTruthy();
+    });
+  });
+
+  describe('plain errorMessage and interpolation', () => {
+    it('should use raw errorMessage when errorKeyMessage is empty', () => {
+      component.errorKeyMessage = '';
+      component.errorMessage = 'Connessione persa';
+      component.ngOnInit();
+      expect(translateStub.translateLanguage).not.toHaveBeenCalled();
+      expect(component.errorMessage).toBe('Connessione persa');
+    });
+
+    it('should replace {{placeholders}} from merged CONSTANTS and errorParams', () => {
+      component.errorKeyMessage = '';
+      component.errorMessage = 'Limite {{FILE_SIZE_LIMIT}} MB, extra {{custom}} e {{missing}}';
+      component.errorParams = { custom: 'X' };
+      component.ngOnInit();
+      expect(component.errorMessage).toContain(String(FILE_SIZE_LIMIT));
+      expect(component.errorMessage).toContain('X');
+      expect(component.errorMessage).toContain('{{missing}}');
+    });
 
+    it('should leave errorMessage empty when neither key nor plain message is set (widget happy path)', () => {
+      component.errorKeyMessage = '';
+      component.errorMessage = '';
+      component.ngOnInit();
+      expect(component.errorMessage).toBe('');
+      fixture.detectChanges();
+      const content = fixture.nativeElement.querySelector('.alert-content') as HTMLElement;
+      expect(content.textContent?.trim()).toBe('');
+    });
+  });
+});

package/src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.html

@@ -9,21 +9,30 @@
 
         <!-- ******* EYE-CATCHER CLOSE BTN IF IS-MOBILE IS FALSE ******** -->
         <div class="eye-catcher-card-close-btn-wrapper">
-            <div class="eye-catcher-card-close-btn" (click)="closeEyeCatcherCard()">
-                <svg class="eye-catcher-card-close-btn-img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px">
+            <button type="button"
+                class="eye-catcher-card-close-btn c21-button-clean"
+                [attr.aria-label]="g.BUTTON_CLOSE_TO_ICON || 'Close'"
+                (click)="closeEyeCatcherCard()">
+                <svg class="eye-catcher-card-close-btn-img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px">
                     <path d="M0 0h24v24H0V0z" fill="none"/>
                     <path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/>
                 </svg>
-            </div>
+            </button>
         </div>
 
-        <div class="eye-catcher_column ec_left" (click)="openChatFromEyeCatcherCard()">
+        <button type="button"
+            class="eye-catcher_column ec_left c21-button-clean"
+            [attr.aria-label]="g.START_A_CONVERSATION || g.BUTTON_OPEN_CHAT"
+            (click)="openChatFromEyeCatcherCard()">
             <div [@rotatedState]='state' class="eye-catcher-card-emoticons-wrapper">
                 <span *ngIf="emoticon" class="chat21-card-emoticons">{{emoticon}}</span>
             </div>
-        </div>
+        </button>
 
-        <div class="eye-catcher_column ec_right" (click)="openChatFromEyeCatcherCard()">
+        <button type="button"
+            class="eye-catcher_column ec_right c21-button-clean"
+            [attr.aria-label]="g.START_A_CONVERSATION || g.BUTTON_OPEN_CHAT"
+            (click)="openChatFromEyeCatcherCard()">
             <div class="eye-catcher-card-text-wrapper">
                 <p class="eye-catcher-card-title">{{title}}</p>
                 
@@ -37,7 +46,7 @@
                     </p>
                 </ng-template>
             </div>
-        </div>
+        </button>
 
     </div>
 

package/src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.scss

@@ -12,6 +12,27 @@
     /* height: 300px;  */
     /* Should be removed. Only for demonstration */
 }
+
+button.eye-catcher-card-close-btn {
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+    padding: 0;
+    display: block;
+}
+
+button.eye-catcher_column {
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+    background: transparent;
+    text-align: inherit;
+    font: inherit;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    color: inherit;
+}
     
 .ec_right::-webkit-scrollbar {
     display: none;

package/src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.spec.ts

@@ -1,5 +1,10 @@
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { NGXLogger } from 'ngx-logger';
 import { Globals } from '../../utils/globals';
 
 import { EyeeyeCatcherCardComponent } from './eyeeye-catcher-card.component';
@@ -7,25 +12,102 @@ import { EyeeyeCatcherCardComponent } from './eyeeye-catcher-card.component';
 describe('EyeeyeCatcherCardComponent', () => {
   let component: EyeeyeCatcherCardComponent;
   let fixture: ComponentFixture<EyeeyeCatcherCardComponent>;
+  let globals: Globals;
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
 
   beforeEach(waitForAsync(() => {
+    LoggerInstance.setInstance(new CustomLogger(ngxlogger));
     TestBed.configureTestingModule({
-      declarations: [ EyeeyeCatcherCardComponent ],
-      imports: [
-        BrowserAnimationsModule
-      ],
-      providers: [ Globals ]
-    })
-    .compileComponents();
+      declarations: [EyeeyeCatcherCardComponent],
+      imports: [BrowserAnimationsModule],
+      providers: [Globals],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(EyeeyeCatcherCardComponent);
     component = fixture.componentInstance;
+    globals = TestBed.inject(Globals);
+    globals.initDefafultParameters();
+    globals.CALLOUT_TITLE_PLACEHOLDER = '👋 Ciao utente';
+    globals.calloutTitle = '';
+    globals.calloutMsg = 'Messaggio callout';
+    globals.isOpen = false;
+    globals.calloutStaus = true;
+    spyOn(globals, 'setParameter').and.callThrough();
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('ngOnInit and layout state', () => {
+    it('should set initial state and hide callout via Globals', () => {
+      expect(component.state).toBe('default');
+      expect(globals.setParameter).toHaveBeenCalledWith('displayEyeCatcherCard', 'none');
+      expect(component.displayEyeCatcherCardCloseBtnWrapper).toBe('none');
+    });
+
+    it('should render callout card container with alignment class from Globals', () => {
+      globals.align = 'left';
+      fixture.detectChanges();
+      const card = fixture.debugElement.query(By.css('.eye-catcher-card'));
+      expect(card.nativeElement.classList.contains('c21-align-left')).toBe(true);
+    });
+  });
+
+  describe('openEyeCatcher and outputs', () => {
+    it('when chat closed and callout enabled should show card and emit onCloseEyeCatcherCard(true)', () => {
+      globals.isOpen = false;
+      globals.calloutStaus = true;
+      spyOn(component.onCloseEyeCatcherCard, 'emit');
+      component.openEyeCatcher();
+      expect(component.onCloseEyeCatcherCard.emit).toHaveBeenCalledWith(true);
+      expect(globals.setParameter).toHaveBeenCalledWith('displayEyeCatcherCard', 'block');
+      expect(component.displayEyeCatcherCardCloseBtnWrapper).toBe('block');
+    });
+
+    it('when chat already open should not emit or display card', () => {
+      globals.isOpen = true;
+      globals.calloutStaus = true;
+      spyOn(component.onCloseEyeCatcherCard, 'emit');
+      component.openEyeCatcher();
+      expect(component.onCloseEyeCatcherCard.emit).not.toHaveBeenCalled();
+    });
+
+    it('when callout is disabled should not show card even if chat is closed', () => {
+      globals.isOpen = false;
+      globals.calloutStaus = false;
+      spyOn(component.onCloseEyeCatcherCard, 'emit');
+      component.openEyeCatcher();
+      expect(component.onCloseEyeCatcherCard.emit).not.toHaveBeenCalled();
+      expect(component.displayEyeCatcherCardCloseBtnWrapper).toBe('none');
+    });
+  });
+
+  describe('checkIsEmoji, openChatFromEyeCatcherCard, closeEyeCatcherCard', () => {
+    it('checkIsEmoji should split leading emoji into emoticon and title', () => {
+      globals.calloutTitle = '🚀 Supporto';
+      component.checkIsEmoji();
+      expect(component.emoticon).toBe('🚀');
+      expect(component.title).toContain('Supporto');
+    });
+
+    it('openChatFromEyeCatcherCard should hide card and emit onOpenChat', () => {
+      spyOn(component.onOpenChat, 'emit');
+      component.openChatFromEyeCatcherCard();
+      expect(globals.setParameter).toHaveBeenCalledWith('displayEyeCatcherCard', 'none');
+      expect(component.onOpenChat.emit).toHaveBeenCalled();
+    });
+
+    it('closeEyeCatcherCard should emit false, hide card and disable callout', () => {
+      spyOn(component.onCloseEyeCatcherCard, 'emit');
+      component.closeEyeCatcherCard();
+      expect(component.onCloseEyeCatcherCard.emit).toHaveBeenCalledWith(false);
+      expect(globals.setParameter).toHaveBeenCalledWith('displayEyeCatcherCard', 'none');
+      expect(globals.setParameter).toHaveBeenCalledWith('calloutStaus', false, true);
+      expect(component.displayEyeCatcherCardCloseBtnWrapper).toBe('none');
+    });
+  });
 });

package/src/app/component/form/form-builder/form-builder.component.html

@@ -39,7 +39,7 @@
   </form>
 
   <div class="c21-new-conversation">
-    <button [tabindex]="lastTabIndex"  class="c21-button-primary" 
+    <button [tabindex]="lastTabIndex" type="button" class="c21-button-primary" 
     (click)="onSubmitPreChatForm()"
     (keydown.enter)="onEnterButtonPressed($event)"
     [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">

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

@@ -1,43 +1,185 @@
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { CustomTranslateService } from './../../../../chat21-core/providers/custom-translate.service';
+import { CommonModule } from '@angular/common';
+import { SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
 
-import { FormBuilderComponent } from './form-builder.component';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { NGXLogger } from 'ngx-logger';
+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 { FormBuilderComponent } from './form-builder.component';
 
 describe('FormBuilderComponent', () => {
   let component: FormBuilderComponent;
   let fixture: ComponentFixture<FormBuilderComponent>;
-  let ngxlogger: NGXLogger;
-  let customLogger = new CustomLogger(ngxlogger)
-  
+  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;
+    }
+  });
+
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ FormBuilderComponent ],
-      imports: [
-        ReactiveFormsModule,
-        TranslateModule.forRoot(),
+      declarations: [
+        FormBuilderComponent,
+        FormTextComponent,
+        FormTextareaComponent,
+        FormCheckboxComponent,
+        FormLabelComponent,
       ],
+      imports: [CommonModule, ReactiveFormsModule, TranslateModule.forRoot()],
       providers: [
-        CustomTranslateService,
-      ]
-    })
-    .compileComponents();
+        {
+          provide: CustomTranslateService,
+          useValue: {
+            translateLanguage: (keys: string[]) => {
+              const m = new Map<string, string>();
+              keys.forEach((k: string) => m.set(k, k));
+              return m;
+            },
+          },
+        },
+      ],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FormBuilderComponent);
     component = fixture.componentInstance;
-    LoggerInstance.setInstance(customLogger)
-    let logger = LoggerInstance.getInstance()
-    component['logger']= logger
-    fixture.detectChanges();
+    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);
+    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,14 +1,18 @@
 <form [formGroup]="form">
   <div class="c21-body-header-checkbox">
-    <input  class="form-check-input errors" 
-            type="checkbox" 
+    <input  class="form-check-input errors"
+            type="checkbox"
+            [id]="fieldBaseId"
             [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">{{element?.text}}</label>
-    <div *ngIf="hasSubmitted && form.get(element?.name).errors" class="text-danger">
+    <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">
       {{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 {
+input[type="checkbox"]:not(:checked):focus:not(:focus-visible) {
     border-width: 2px;
 
     //box-shadow
@@ -59,10 +59,15 @@ input[type="checkbox"]:active:not(:disabled) {
 }
 
 // /* focus state */
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
-    outline:none;
-  
+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 checked border color */