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

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

@@ -1,122 +1,30 @@
-import { A11yModule } from '@angular/cdk/a11y';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
-import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
-
-import { Globals } from 'src/app/utils/globals';
-import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
-import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { PrechatFormComponent } from './prechat-form.component';
-
-@Component({
-  selector: 'chat-form-builder',
-  template: '',
-})
-class ChatFormBuilderStubComponent {
-  @Input() formArray: unknown;
-  @Input() isOpenPrechatForm: boolean;
-  @Input() stylesMap: Map<string, string> | undefined;
-  @Output() onSubmitForm = new EventEmitter<Record<string, string>>();
-  @Output() onErrorRenderForm = new EventEmitter<void>();
-}
+import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
+import { Globals } from 'src/app/utils/globals';
 
 describe('PrechatFormComponent', () => {
   let component: PrechatFormComponent;
   let fixture: ComponentFixture<PrechatFormComponent>;
-  let g: Globals;
-  let appStorage: jasmine.SpyObj<AppStorageService>;
-  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error']);
-  const customLogger = new CustomLogger(ngxlogger);
-
-  beforeEach(waitForAsync(() => {
-    appStorage = jasmine.createSpyObj('AppStorageService', [
-      'initialize',
-      'getItem',
-      'setItem',
-      'getItemWithoutProjectID',
-      'setItemWithoutProjectID',
-      'removeItem',
-      'clear',
-    ]);
 
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [PrechatFormComponent, ChatFormBuilderStubComponent],
-      imports: [A11yModule, ReactiveFormsModule],
-      providers: [
-        Globals,
-        FormBuilder,
-        { provide: AppStorageService, useValue: appStorage },
-      ],
-    }).compileComponents();
+      declarations: [ PrechatFormComponent ],
+      imports: [ FormsModule, ReactiveFormsModule ],
+      providers: [ Globals, AppStorageService]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
-    LoggerInstance.setInstance(customLogger);
     fixture = TestBed.createComponent(PrechatFormComponent);
     component = fixture.componentInstance;
-    g = TestBed.inject(Globals);
-    g.LABEL_COMPLETE_FORM = 'Complete form';
-    g.attributes = { foo: 'bar' };
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('onSubmitForm should persist attributes, merge preChatForm, and emit onCloseForm', () => {
-    spyOn(component.onCloseForm, 'emit');
-    const form = { userFullname: 'Jane Doe', userEmail: 'jane@example.com' };
-    component.onSubmitForm(form);
-    expect(g.attributes.userFullname).toBe('Jane Doe');
-    expect(g.attributes.userEmail).toBe('jane@example.com');
-    expect(g.attributes.preChatForm).toEqual(form);
-    expect(appStorage.setItem).toHaveBeenCalledWith('attributes', jasmine.any(String));
-    expect(component.onCloseForm.emit).toHaveBeenCalled();
-  });
-
-  it('onSubmitForm should not emit when g.attributes is missing', () => {
-    g.attributes = undefined as any;
-    spyOn(component.onCloseForm, 'emit');
-    component.onSubmitForm({ userFullname: 'X' });
-    expect(component.onCloseForm.emit).not.toHaveBeenCalled();
-    expect(appStorage.setItem).not.toHaveBeenCalled();
-  });
-
-  it('returnClosePage should emit onClosePage', () => {
-    spyOn(component.onClosePage, 'emit');
-    component.returnClosePage();
-    expect(component.onClosePage.emit).toHaveBeenCalled();
-  });
-
-  it('onEscape should stop propagation, prevent default, and close page', () => {
-    spyOn(component.onClosePage, 'emit');
-    const ev = new KeyboardEvent('keydown', { key: 'Escape' });
-    spyOn(ev, 'preventDefault');
-    spyOn(ev, 'stopPropagation');
-    component.onEscape(ev);
-    expect(ev.preventDefault).toHaveBeenCalled();
-    expect(ev.stopPropagation).toHaveBeenCalled();
-    expect(component.onClosePage.emit).toHaveBeenCalled();
-  });
-
-  it('onErrorRenderForm should restore default preChatFormJson via Globals', () => {
-    spyOn(g, 'setParameter');
-    component.onErrorRenderForm();
-    expect(g.setParameter).toHaveBeenCalledWith('preChatFormJson', jasmine.any(Array));
-    const arg = (g.setParameter as jasmine.Spy).calls.mostRecent().args[1] as any[];
-    expect(arg[0].name).toBe('userFullname');
-    expect(arg[1].name).toBe('userEmail');
-  });
-
-  it('should request focus on dialog root after view init (async)', fakeAsync(() => {
-    const fixtureInner = TestBed.createComponent(PrechatFormComponent);
-    const el = fixtureInner.nativeElement.querySelector('#chat21-prechat-form') as HTMLElement;
-    spyOn(el, 'focus');
-    fixtureInner.detectChanges();
-    tick(1000);
-    expect(el.focus).toHaveBeenCalled();
-  }));
 });

package/src/app/component/form/prechat-form/prechat-form.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Globals } from 'src/app/utils/globals';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
@@ -120,13 +120,6 @@ export class PrechatFormComponent implements OnInit, AfterViewInit {
     this.onClosePage.emit();
   }
 
-  @HostListener('keydown.escape', ['$event'])
-  onEscape(event: KeyboardEvent){
-    event.preventDefault();
-    event.stopPropagation();
-    this.returnClosePage();
-  }
-
   onSubmitForm(form: {}){
     this.logger.debug('[PRE-CHAT-FORM] onSubmitForm:', form)
     if(this.g.attributes){

package/src/app/component/home/home.component.html

@@ -1,7 +1,6 @@
 
-<div #homeComponent id='chat21-home-component'
-    role="region"
-    [attr.aria-label]="g?.welcomeTitle || g?.project?.widgetTitle || 'Chat'">
+<!-- tabindex="2000"-->
+<div #homeComponent id='chat21-home-component' tabindex="2002" onFocus="document.querySelector('[aflistconv]').focus()">
 
     <!-- HEADER -->
     <div class="c21-header" (click)="hideMenuOptions()" [ngStyle]="{'color': g.themeForegroundColor, 'background-image': g.colorGradient }" >
@@ -16,59 +15,50 @@
 
                 <!-- ICON MAXIMIZE -->
                 <div *ngIf="size === 'min' && !fullscreenMode && !g?.isMobile" class="c21-size-button">
-                    <button [attr.disabled]="(isButtonsDisabled)?true:null"
-                        type="button"
-                        class="c21-close-button-body"
-                        [attr.aria-label]="translationMap?.get('MAXIMIZE')"
-                        [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}"
-                        (click)="onChangeSize('max')">
-                        <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+                    <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-close-button-body" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('max')" >
+                        <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
                             width="17" height="17" viewBox="0 0 17 17">
                             <path d="M6.49001 8.30999L3.69 11.11V9.40999C3.69 8.93999 3.31 8.55999 2.84 8.55999C2.37 8.55999 1.99001 8.93999 1.99001 9.40999V14.01H6.59C7.06 14.01 7.44 13.63 7.44 13.16C7.44 12.69 7.06 12.31 6.59 12.31H4.89L7.69 9.50999L6.49001 8.30999ZM9.41 1.98999C8.94 1.98999 8.56001 2.36999 8.56001 2.83999C8.56001 3.30999 8.94 3.68999 9.41 3.68999H11.11L8.31001 6.48999L9.51 7.68999L12.31 4.88999V6.58999C12.31 7.05999 12.69 7.43999 13.16 7.43999C13.63 7.43999 14.01 7.05999 14.01 6.58999V1.98999H9.41Z"></path>
+                            <title id="altIconTitle">{{ translationMap?.get('MAXIMIZE') }}</title>
                         </svg>
                     </button>
                 </div>
 
                 <!-- ICON MINIMIZE -->
                 <div *ngIf="size==='top' && !fullscreenMode && !g?.isMobile" class="c21-size-button">
-                    <button [attr.disabled]="(isButtonsDisabled)?true:null"
-                        type="button"
-                        class="c21-close-button-body"
-                        [attr.aria-label]="translationMap?.get('MINIMIZE')"
-                        [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}"
-                        (click)="onChangeSize('min')">
-                        <svg aria-hidden="true" focusable="false" class="icon-menu" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+                    <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-close-button-body" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('min')" >
+                        <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
                             width="17" height="17" viewBox="0 0 17 17">
                             <path d="M13.59 5.31h-1.7l3.3-3.3-1.2-1.2-3.3 3.3v-1.7a.85.85 0 1 0-1.7 0v4.6h4.6a.85.85 0 1 0 0-1.7M1.57 9.84c0 .47.38.85.85.85h1.7l-3.3 3.3 1.2 1.2 3.3-3.3v1.7a.85.85 0 1 0 1.7 0v-4.6h-4.6a.85.85 0 0 0-.85.85"></path>
+                            <title id="altIconTitle">{{ translationMap?.get('MINIMIZE') }}</title>
                         </svg>
                     </button>
                 </div>
 
                 <!-- ICON TOP -->
                 <div *ngIf="size==='max' && !fullscreenMode && !g?.isMobile" class="c21-size-button">
-                    <button [attr.disabled]="(isButtonsDisabled)?true:null"
-                        type="button"
-                        class="c21-close-button-body"
-                        [attr.aria-label]="translationMap?.get('CENTER')"
-                        [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}"
-                        (click)="onChangeSize('top')">
-                        <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+                    <button [attr.disabled]="(isButtonsDisabled)?true:null" tabindex="-1" class="c21-close-button-body" [ngStyle]="{'display': (hideHeaderConversationOptionsMenu)?'none':'flex'}" (click)="onChangeSize('top')" >
+                        <svg  role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
                             width="17" height="17" viewBox="0 0 17 17">
                             <path d="M3.7,7.6L2.5,6.4C2.2,6,2.2,5.5,2.5,5.2s0.9-0.4,1.2-0.1L7,8.4l-3.3,3.3c-0.4,0.4-0.8,0.3-1.1,0s-0.4-0.9-0.1-1.2l1.2-1.2 H1.5l0-1.7H3.7z"/>
                             <path d="M13.3,7.6l1.2-1.2c0.4-0.4,0.3-0.8,0-1.1s-0.9-0.4-1.2-0.1L10,8.4l3.3,3.3c0.4,0.4,0.8,0.3,1.1,0s0.4-0.9,0.1-1.2l-1.2-1.2 h2.2l0-1.7H13.3z"/>
                             <path d="M8.5,14.5L8.5,14.5c-0.5,0-0.9-0.4-0.9-0.8V3.3c0-0.5,0.4-0.8,0.8-0.8h0c0.5,0,0.8,0.4,0.8,0.8v10.4 C9.4,14.2,9,14.5,8.5,14.5z"/>
+                            <title id="altIconTitle">{{ translationMap?.get('CENTER') }}</title>
                         </svg>
                     </button>
                 </div>
 
 
                 <div class="c21-close-button">
-                    <button type="button"
-                        class="c21-close-button-body"
-                        [attr.aria-label]="translationMapHeader?.get('BUTTON_CLOSE_TO_ICON')"
-                        (click)="f21_close()">
-                        <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="2001" aria-label="    chiudi chat" class="c21-close-button-body" (click)="f21_close()">
+                        <!-- <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"/>
+                            <title id="altIconTitle">{{translationMapHeader?.get('BUTTON_CLOSE_TO_ICON')}}</title>
+                        </svg> -->
+                        <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 d="M19.35,9.21c.2-.2.2-.51,0-.71l-.71-.71c-.2-.2-.51-.2-.71,0l-5.94,5.94-5.94-5.94c-.2-.2-.51-.2-.71,0l-.71.71c-.2.2-.2.51,0,.71l7,7c.2.2.51.2.71,0l7-7Z"/>
+                            <title id="altIconTitle">{{translationMapHeader?.get('BUTTON_CLOSE_TO_ICON')}}</title>
                         </svg>
                     </button>
                 </div>
@@ -83,8 +73,8 @@
 
                 <!-- MESSAGE HEADER -->
                 <div class="c21-text fade-in-bottom">
-                    <h1 class="c21-text-welcome">{{g?.welcomeTitle}}</h1>
-                    <p *ngIf="g.welcomeMsg" class="c21-text-intro">{{g.welcomeMsg}}</p>
+                    <div class="c21-text-welcome">{{g?.welcomeTitle}}</div>          
+                    <div *ngIf="g.welcomeMsg" class="c21-text-intro">{{g.welcomeMsg}}</div>
                 </div>
             </div>
         </div>
@@ -124,9 +114,9 @@
     <div class="c21-footer-content fade-in-bottom-footer" *ngIf="g?.whatsappNumber || g?.telegramUsername || g?.messangerPageTitle">
         <div class="label-item">{{translationMapFooter?.get('SWITCH_TO')}}</div>
         <div id="c21-whatsapp" *ngIf="g?.whatsappNumber && g?.whatsappNumber.trim() !== ''">
-            <button type="button" aflistconv #aflistconv class="c21-button-primary" aria-label="WhatsApp" (click)="openConversationOnPlatform('whatsapp')">
+            <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openConversationOnPlatform('whatsapp')">
                 <span class="v-align-center">
-                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 1219.547 1225.016">
+                    <svg aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 1219.547 1225.016">
                         <path fill="#E0E0E0" d="M1041.858 178.02C927.206 63.289 774.753.07 612.325 0 277.617 0 5.232 272.298 5.098 606.991c-.039 106.986 27.915 211.42 81.048 303.476L0 1225.016l321.898-84.406c88.689 48.368 188.547 73.855 290.166 73.896h.258.003c334.654 0 607.08-272.346 607.222-607.023.056-162.208-63.052-314.724-177.689-429.463zm-429.533 933.963h-.197c-90.578-.048-179.402-24.366-256.878-70.339l-18.438-10.93-191.021 50.083 51-186.176-12.013-19.087c-50.525-80.336-77.198-173.175-77.16-268.504.111-278.186 226.507-504.503 504.898-504.503 134.812.056 261.519 52.604 356.814 147.965 95.289 95.36 147.728 222.128 147.688 356.948-.118 278.195-226.522 504.543-504.693 504.543z"/>
                         <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="609.77" y1="1190.114" x2="609.77" y2="21.084">
                             <stop offset="0" stop-color="#20b038"/>
@@ -135,6 +125,7 @@
                         <image overflow="visible" opacity=".08" width="20" height="20" xlink:href="FCC0802E2AF8A915.png" transform="translate(270.984 291.372)"/>
                         <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M462.273 349.294c-11.234-24.977-23.062-25.477-33.75-25.914-8.742-.375-18.75-.352-28.742-.352-10 0-26.25 3.758-39.992 18.766-13.75 15.008-52.5 51.289-52.5 125.078 0 73.797 53.75 145.102 61.242 155.117 7.5 10 103.758 166.266 256.203 226.383 126.695 49.961 152.477 40.023 179.977 37.523s88.734-36.273 101.234-71.297c12.5-35.016 12.5-65.031 8.75-71.305-3.75-6.25-13.75-10-28.75-17.5s-88.734-43.789-102.484-48.789-23.75-7.5-33.75 7.516c-10 15-38.727 48.773-47.477 58.773-8.75 10.023-17.5 11.273-32.5 3.773-15-7.523-63.305-23.344-120.609-74.438-44.586-39.75-74.688-88.844-83.438-103.859-8.75-15-.938-23.125 6.586-30.602 6.734-6.719 15-17.508 22.5-26.266 7.484-8.758 9.984-15.008 14.984-25.008 5-10.016 2.5-18.773-1.25-26.273s-32.898-81.67-46.234-111.326z"/>
                         <path fill="#FFF" d="M1036.898 176.091C923.562 62.677 772.859.185 612.297.114 281.43.114 12.172 269.286 12.039 600.137 12 705.896 39.633 809.13 92.156 900.13L7 1211.067l318.203-83.438c87.672 47.812 186.383 73.008 286.836 73.047h.255.003c330.812 0 600.109-269.219 600.25-600.055.055-160.343-62.328-311.108-175.649-424.53zm-424.601 923.242h-.195c-89.539-.047-177.344-24.086-253.93-69.531l-18.227-10.805-188.828 49.508 50.414-184.039-11.875-18.867c-49.945-79.414-76.312-171.188-76.273-265.422.109-274.992 223.906-498.711 499.102-498.711 133.266.055 258.516 52 352.719 146.266 94.195 94.266 146.031 219.578 145.992 352.852-.118 274.999-223.923 498.749-498.899 498.749z"/>
+                        <title id="altIconTitle">Whatsapp</title>
                     </svg>
                     <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" focusable="false" viewBox="0 0 448 512" xml:space="preserve">
                         <path stroke="#5f6368" stroke-width="8px" fill="#5f6368" d="M380.9,97.1C339,55.1,283.2,32,223.9,32c-122.4,0-222,99.6-222,222c0,39.1,10.2,77.3,29.6,111L0,480l117.7-30.9  c32.4,17.7,68.9,27,106.1,27h0.1c122.3,0,224.1-99.6,224.1-222C448,194.8,422.8,139.1,380.9,97.1z M223.9,438.7  c-33.2,0-65.7-8.9-94-25.7l-6.7-4l-69.8,18.3L72,359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2c0-101.7,82.8-184.5,184.6-184.5  c49.3,0,95.6,19.2,130.4,54.1s56.2,81.2,56.1,130.5C410.5,355.9,325.6,438.7,223.9,438.7z M325.1,300.5c-5.5-2.8-32.8-16.2-37.9-18  c-5.1-1.9-8.8-2.8-12.5,2.8c-3.7,5.6-14.3,18-17.6,21.8c-3.2,3.7-6.5,4.2-12,1.4c-32.6-16.3-54-29.1-75.5-66  c-5.7-9.8,5.7-9.1,16.3-30.3c1.8-3.7,0.9-6.9-0.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5c-3.2-0.2-6.9-0.2-10.6-0.2  c-3.7,0-9.7,1.4-14.8,6.9c-5.1,5.6-19.4,19-19.4,46.3s19.9,53.7,22.6,57.4c2.8,3.7,39.1,59.7,94.8,83.8c35.2,15.2,49,16.5,66.6,13.9  c10.7-1.6,32.8-13.4,37.4-26.4s4.6-24.1,3.2-26.4C334.3,304.6,330.6,303.2,325.1,300.5z"/>
@@ -144,9 +135,9 @@
             </button>
         </div>
         <div id="c21-telegram" *ngIf="g?.telegramUsername && g?.telegramUsername.trim() !== ''">
-            <button type="button" aflistconv #aflistconv class="c21-button-primary" aria-label="Telegram" (click)="openConversationOnPlatform('telegram')">
+            <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openConversationOnPlatform('telegram')">
                 <span class="v-align-center">
-                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0 0 368 368" style="enable-background:new 0 0 368 368;" xml:space="preserve">
+                    <svg aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0 0 368 368" style="enable-background:new 0 0 368 368;" xml:space="preserve">
                         <g id="XMLID_1_">
                             <linearGradient id="XMLID_7_" gradientUnits="userSpaceOnUse" x1="-66.831" y1="-68.1757" x2="-65.3102" y2="-68.1757" gradientTransform="matrix(-60 139.992 -139.992 -60 -13316.416 5324.4634)">
                                 <stop offset="0" style="stop-color:#37AEE2"/>
@@ -161,6 +152,7 @@
                             </linearGradient>
                             <path id="XMLID_6_" fill="url(#XMLID_8_)" d="M153.6,221.1l73.5,54.3c8.4,4.6,14.4,2.2,16.5-7.8l29.9-141.1c3.1-12.3-4.7-17.9-12.7-14.2   L85.2,180.2c-12,4.8-11.9,11.5-2.2,14.5l45.1,14.1l104.4-65.9c4.9-3,9.5-1.4,5.7,1.9"/>
                         </g>
+                        <title id="altIconTitle">Telegram</title>
                     </svg>
                     <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0 0 448 512" xml:space="preserve">
                         <path fill="#5f6368" d="M446.7,98.6l-67.6,318.8c-5.1,22.5-18.4,28.1-37.3,17.5l-103-75.9l-49.7,47.8c-5.5,5.5-10.1,10.1-20.7,10.1  l7.4-104.9l190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8,284L16.2,252.2c-22.1-6.9-22.5-22.1,4.6-32.7L418.2,66.4  C436.6,59.5,452.7,70.5,446.7,98.6z"/>
@@ -170,9 +162,9 @@
             </button>
         </div>
         <div id="c21-messanger" *ngIf="g?.messangerPageTitle && g?.messangerPageTitle.trim() !== ''">
-            <button type="button" aflistconv #aflistconv class="c21-button-primary" aria-label="Facebook Messenger" (click)="openConversationOnPlatform('messanger')">
+            <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openConversationOnPlatform('messanger')">
                 <span class="v-align-center">
-                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="26" height="26" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 800 800">
+                    <svg aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" width="26" height="26" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 800 800">
                         <radialGradient id="Gradient" cx="101.925" cy="809.0079" r="1.0896" gradientTransform="matrix(800 0 0 -799.9985 -81386 648000.75)" gradientUnits="userSpaceOnUse">
                          <stop offset="0" style="stop-color:#0099FF"/>
                          <stop offset="0.6098" style="stop-color:#A033FF"/>
@@ -181,6 +173,7 @@
                         </radialGradient>
                         <path fill="url(#Gradient)" d="M400,0C174.7,0,0,165.1,0,388c0,116.6,47.8,217.4,125.6,287c6.5,5.8,10.5,14,10.7,22.8l2.2,71.2  c0.7,22.7,24.1,37.5,44.9,28.3l79.4-35c6.7-3,14.3-3.5,21.4-1.6c36.5,10,75.3,15.4,115.8,15.4c225.3,0,400-165.1,400-388  S625.3,0,400,0z"/>
                         <path fill="#FFFFFF" d="M159.8,501.5l117.5-186.4c18.7-29.7,58.7-37,86.8-16l93.5,70.1c8.6,6.4,20.4,6.4,28.9-0.1    l126.2-95.8c16.8-12.8,38.8,7.4,27.6,25.3L522.7,484.9c-18.7,29.7-58.7,37-86.8,16l-93.5-70.1c-8.6-6.4-20.4-6.4-28.9,0.1    l-126.2,95.8C170.5,539.5,148.5,519.4,159.8,501.5z"/>
+                        <title id="altIconTitle">Facebook Messanger</title>
                     </svg>
                     <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" focusable="false"  viewBox="0 0 512 512"  xml:space="preserve">
                         <path fill="#5f6368" d="M256.5,8C116.5,8,8,110.3,8,248.6c0,72.3,29.7,134.8,78.1,177.9c8.3,7.5,6.6,11.9,8.1,58.2  c0.4,11,9.6,19.6,20.6,19.2c2.5-0.1,5-0.6,7.3-1.7c52.9-23.3,53.6-25.1,62.6-22.7c153.3,42.2,319.4-55.9,319.4-231  C504,110.3,396.6,8,256.5,8z M405.8,193.1l-73,115.6c-11.1,17.4-34.1,22.6-51.6,11.5c-0.8-0.5-1.6-1-2.3-1.6l-58.1-43.5  c-5.3-4-12.7-4-18,0l-78.4,59.4c-10.5,7.9-24.2-4.6-17.1-15.7l73-115.6c11-17.4,34.1-22.6,51.6-11.6c0.8,0.5,1.6,1.1,2.4,1.6  l58.1,43.5c5.3,4,12.7,4,18,0l78.4-59.4C399.1,169.5,412.8,182,405.8,193.1L405.8,193.1z"/>
@@ -194,7 +187,7 @@
     <!-- FOOTER -->
     <div class="c21-footer fade-in-bottom-footer">
         <div id="c21-powered-by" (mouseover)="hover=true" (mouseleave)="hover=false">
-            <div class="c21-powered-by" [innerHTML]="g.poweredBy" (click)="managePoweredBy($event)"></div>
+            <div tabindex="-1" class="c21-powered-by" [innerHTML]="g.poweredBy" (click)="managePoweredBy($event)"></div>
             <!-- <div class="build_version">{{g.BUILD_VERSION}}</div> -->
         </div>
         <chat-menu-options *ngIf="!hideSettings"

package/src/app/component/home/home.component.scss

@@ -90,7 +90,7 @@
                         max-height: 2.4em;
                         font-weight: 400;
                         font-size: 3.0em; 
-                        margin: 0 0 10px 0;
+                        margin-bottom: 10px;
                     }
                     .c21-text-intro {
                         display: inline-block;
@@ -98,7 +98,6 @@
                         font-weight: 300;
                         line-height: 1.2em;
                         max-height: 2.4em;
-                        margin: 0;
                     }
                 }
             }
@@ -133,7 +132,7 @@
                         max-height: 3em; //2.4em;
                         font-weight: 200;
                         font-size: 2.5em; //3.0em; 
-                        margin: 0 0 15px 0;
+                        margin-bottom: 15px; //10px;
                     }
                     .c21-text-intro {
                         display: inline-block;
@@ -141,7 +140,6 @@
                         font-weight: 600; //400;
                         line-height: 1.2em;
                         max-height: 2.4em;
-                        margin: 0;
                     }
                 }
             }

package/src/app/component/home/home.component.spec.ts

@@ -1,14 +1,8 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NGXLogger } from 'ngx-logger';
-import { ConversationModel } from 'src/chat21-core/models/conversation';
-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 { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
-import { HEADER_MENU_OPTION } from '../../utils/constants';
 import { Globals } from '../../utils/globals';
 
 import { HomeComponent } from './home.component';
@@ -16,240 +10,31 @@ import { HomeComponent } from './home.component';
 describe('HomeComponent', () => {
   let component: HomeComponent;
   let fixture: ComponentFixture<HomeComponent>;
-  let globals: Globals;
-  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
-
-  const tiledeskAuthStub = {
-    getCurrentUser: jasmine.createSpy('getCurrentUser').and.returnValue({
-      uid: 'u-1',
-      firstname: 'Ada',
-      lastname: 'Lovelace',
-      email: 'ada@example.com',
-    }),
-  };
-
-  const translateStub = {
-    translateLanguage: jasmine.createSpy('translateLanguage').and.callFake((keys: string[]) => {
-      const m = new Map<string, string>();
-      keys.forEach((k) => m.set(k, `T:${k}`));
-      return m;
-    }),
-  };
+  let ngxlogger: NGXLogger;
+  let customLogger = new CustomLogger(ngxlogger)
 
   beforeEach(waitForAsync(() => {
-    LoggerInstance.setInstance(new CustomLogger(ngxlogger));
     TestBed.configureTestingModule({
-      declarations: [HomeComponent],
+      declarations: [ HomeComponent ],
       providers: [
         Globals,
-        { provide: NGXLogger, useValue: ngxlogger },
-        { provide: TiledeskAuthService, useValue: tiledeskAuthStub },
-        { provide: CustomTranslateService, useValue: translateStub },
+        NGXLogger
       ],
-      schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(HomeComponent);
     component = fixture.componentInstance;
-    globals = TestBed.inject(Globals);
-    globals.initDefafultParameters();
-    globals.welcomeTitle = 'Benvenuto';
-    globals.welcomeMsg = 'Intro';
-    globals.themeForegroundColor = '#fff';
-    globals.colorGradient = 'linear-gradient(red,blue)';
-    globals.project = { logoChat: 'nologo' } as any;
-    globals.poweredBy = '<a href="https://brand.example"><span id="pb-inner">Logo</span></a>';
-    globals.whatsappNumber = '1234567890';
-    globals.telegramUsername = '';
-    globals.messangerPageTitle = '';
-
-    component.listConversations = [];
-    component.archivedConversations = [];
-    component.hideSettings = true;
-    component.hideNewConversationButton = false;
-    component.stylesMap = new Map([
-      ['themeColor', '#111'],
-      ['foregroundColor', '#fff'],
-    ]);
-    component.size = 'min';
-    component.fullscreenMode = false;
-    component.hideHeaderConversationOptionsMenu = false;
-    component.isButtonsDisabled = false;
-    component.translationMap = new Map([
-      ['MAXIMIZE', 'Massimizza'],
-      ['MINIMIZE', 'Riduci'],
-      ['CENTER', 'Centra'],
-    ]);
-
+    let loggerInstance = LoggerInstance.setInstance(customLogger)
+    let logger = LoggerInstance.getInstance()
+    component['logger']= logger
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  describe('translations and DOM shell', () => {
-    it('initiTranslations should fill header/footer maps via CustomTranslateService', () => {
-      component.initiTranslations();
-      expect(component.translationMapHeader?.get('BUTTON_CLOSE_TO_ICON')).toBe('T:BUTTON_CLOSE_TO_ICON');
-      expect(component.translationMapFooter?.get('SWITCH_TO')).toBe('T:SWITCH_TO');
-    });
-
-    it('should render region root, welcome title and close control', () => {
-      const region = fixture.debugElement.query(By.css('#chat21-home-component'));
-      expect(region).toBeTruthy();
-      const h1 = fixture.nativeElement.querySelector('.c21-text-welcome') as HTMLElement;
-      expect(h1.textContent).toContain('Benvenuto');
-      const closeBtn = fixture.debugElement.query(By.css('.c21-close-button-body'));
-      expect(closeBtn).toBeTruthy();
-    });
-
-    it('should set region aria-label from welcomeTitle (accessibility / MCP home shell)', () => {
-      globals.welcomeTitle = 'Ciao, benvenuto su BrandExample';
-      fixture.detectChanges();
-      const host = fixture.nativeElement.querySelector('#chat21-home-component') as HTMLElement;
-      expect(host.getAttribute('aria-label')).toBe('Ciao, benvenuto su BrandExample');
-    });
-
-    it('should render welcome intro paragraph when welcomeMsg is set', () => {
-      globals.welcomeMsg = 'Come possiamo aiutarti?';
-      fixture.detectChanges();
-      const intro = fixture.nativeElement.querySelector('.c21-text-intro') as HTMLElement;
-      expect(intro.textContent).toContain('Come possiamo aiutarti?');
-    });
-  });
-
-  describe('outputs and actions', () => {
-    it('f21_close should emit onCloseWidget and add start-animation class', () => {
-      spyOn(component.onCloseWidget, 'emit');
-      component.f21_close();
-      expect(component.onCloseWidget.emit).toHaveBeenCalled();
-      const root = fixture.debugElement.query(By.css('#chat21-home-component')).nativeElement as HTMLElement;
-      expect(root.classList.contains('start-animation')).toBe(true);
-    });
-
-    it('onChangeSize should emit correct HEADER_MENU_OPTION', () => {
-      spyOn(component.onMenuOptionClick, 'emit');
-      component.onChangeSize('min');
-      component.onChangeSize('max');
-      component.onChangeSize('top');
-      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.MINIMIZE);
-      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.MAXIMIZE);
-      expect(component.onMenuOptionClick.emit).toHaveBeenCalledWith(HEADER_MENU_OPTION.TOP);
-    });
-
-    it('onNewConversationFN should emit onNewConversation and strip animation', () => {
-      spyOn(component.onNewConversation, 'emit');
-      const root = fixture.debugElement.query(By.css('#chat21-home-component')).nativeElement as HTMLElement;
-      root.classList.add('start-animation');
-      component.onNewConversationFN();
-      expect(component.onNewConversation.emit).toHaveBeenCalled();
-      expect(root.classList.contains('start-animation')).toBe(false);
-    });
-
-    it('onConversationSelectedFN should emit conversation', () => {
-      spyOn(component.onConversationSelected, 'emit');
-      const conv = { uid: 'c1' } as ConversationModel;
-      component.onConversationSelectedFN(conv);
-      expect(component.onConversationSelected.emit).toHaveBeenCalledWith(conv);
-    });
-
-    it('onConversationSelectedFN should ignore null', () => {
-      spyOn(component.onConversationSelected, 'emit');
-      component.onConversationSelectedFN(null as any);
-      expect(component.onConversationSelected.emit).not.toHaveBeenCalled();
-    });
-
-    it('onOpenAllConversation should emit onOpenAllConvesations', () => {
-      spyOn(component.onOpenAllConvesations, 'emit');
-      component.onOpenAllConversation();
-      expect(component.onOpenAllConvesations.emit).toHaveBeenCalled();
-    });
-
-    it('onSignOutFN should emit onSignOut', () => {
-      spyOn(component.onSignOut, 'emit');
-      component.onSignOutFN();
-      expect(component.onSignOut.emit).toHaveBeenCalled();
-    });
-
-    it('onImageLoadedFN / onConversationLoadedFN should forward emits', () => {
-      spyOn(component.onImageLoaded, 'emit');
-      spyOn(component.onConversationLoaded, 'emit');
-      const c = { uid: 'x' } as ConversationModel;
-      component.onImageLoadedFN(c);
-      component.onConversationLoadedFN(c);
-      expect(component.onImageLoaded.emit).toHaveBeenCalledWith(c);
-      expect(component.onConversationLoaded.emit).toHaveBeenCalledWith(c);
-    });
-  });
-
-  describe('hideMenuOptions and openConversationOnPlatform', () => {
-    it('hideMenuOptions should set isOpenMenuOptions on Globals', () => {
-      spyOn(globals, 'setParameter');
-      component.hideMenuOptions();
-      expect(globals.setParameter).toHaveBeenCalledWith('isOpenMenuOptions', false, true);
-    });
-
-    it('openConversationOnPlatform should open external URLs', () => {
-      spyOn(window, 'open');
-      globals.telegramUsername = 'mybot';
-      globals.whatsappNumber = '39333';
-      globals.messangerPageTitle = 'mypage';
-      component.openConversationOnPlatform('telegram');
-      component.openConversationOnPlatform('whatsapp');
-      component.openConversationOnPlatform('messanger');
-      expect(window.open).toHaveBeenCalledWith('https://telegram.me/mybot', '_blank');
-      expect(window.open).toHaveBeenCalledWith(jasmine.stringMatching(/^https:\/\/wa\.me\/39333/), '_blank');
-      expect(window.open).toHaveBeenCalledWith('https://m.me/mypage', '_blank');
-    });
-  });
-
-  describe('managePoweredBy and analytics', () => {
-    it('managePoweredBy should open parent anchor href', () => {
-      spyOn(window, 'open');
-      const anchor = document.createElement('a');
-      anchor.setAttribute('href', 'https://brand.example');
-      const inner = document.createElement('span');
-      anchor.appendChild(inner);
-      const ev = new MouseEvent('click', { bubbles: true });
-      Object.defineProperty(ev, 'target', { value: inner, configurable: true });
-      component.managePoweredBy(ev);
-      expect(window.open).toHaveBeenCalledWith('https://brand.example', '_blank');
-    });
-
-    it('segmentLogoClick should invoke analytics when present', () => {
-      (window as any).analytics = {
-        page: jasmine.createSpy('page'),
-        identify: jasmine.createSpy('identify'),
-        track: jasmine.createSpy('track'),
-      };
-      (component as any).segmentLogoClick();
-      expect((window as any).analytics.page).toHaveBeenCalled();
-      expect((window as any).analytics.identify).toHaveBeenCalled();
-      expect((window as any).analytics.track).toHaveBeenCalled();
-      delete (window as any).analytics;
-    });
-  });
-
-  describe('ngAfterViewInit', () => {
-    it('should add animation only on first open then clear flag', () => {
-      globals.firstOpen = true;
-      component.ngAfterViewInit();
-      const root = fixture.debugElement.query(By.css('#chat21-home-component')).nativeElement as HTMLElement;
-      expect(root.classList.contains('start-animation')).toBe(true);
-      expect(globals.firstOpen).toBe(false);
-    });
-
-    it('should focus aflistconv after delay when present', fakeAsync(() => {
-      const btn = document.createElement('button');
-      btn.setAttribute('aflistconv', '');
-      spyOn(btn, 'focus');
-      (component as any).aflistconv = { nativeElement: btn };
-      component.ngAfterViewInit();
-      tick(1000);
-      expect(btn.focus).toHaveBeenCalled();
-    }));
-  });
 });