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

package/src/app/component/selection-department/selection-department.component.spec.ts

@@ -1,179 +1,34 @@
-import { A11yModule } from '@angular/cdk/a11y';
-import { Injectable } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { NGXLogger } from 'ngx-logger';
-
+import { ElementRef } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppStorageService } from '../../../chat21-core/providers/abstract/app-storage.service';
-import { CustomLogger } from '../../../chat21-core/providers/logger/customLogger';
-import { LoggerInstance } from '../../../chat21-core/providers/logger/loggerInstance';
 import { Globals } from '../../utils/globals';
 
 import { SelectionDepartmentComponent } from './selection-department.component';
 
-@Injectable()
-class AppStorageServiceStub extends AppStorageService {
-  lastAttributesJson: string | null = null;
-  setItem = jasmine.createSpy('setItem').and.callFake((key: string, value: any) => {
-    if (key === 'attributes') {
-      this.lastAttributesJson = value as string;
-    }
-  });
-  getItem(): any {
-    return null;
-  }
-  getItemWithoutProjectID(): any {
-    return null;
-  }
-  setItemWithoutProjectID(): void {}
-  removeItem(): void {}
-  clear(): void {}
-  initialize(): void {}
-}
-
 describe('SelectionDepartmentComponent', () => {
   let component: SelectionDepartmentComponent;
   let fixture: ComponentFixture<SelectionDepartmentComponent>;
-  let globals: Globals;
-  let storage: AppStorageServiceStub;
-
-  beforeEach(waitForAsync(() => {
-    const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
-    LoggerInstance.setInstance(new CustomLogger(ngxlogger));
+  class MockElementRef {}
+  
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [A11yModule],
-      declarations: [SelectionDepartmentComponent],
-      providers: [
-        Globals,
-        { provide: AppStorageService, useClass: AppStorageServiceStub },
-        { provide: NGXLogger, useValue: ngxlogger },
-      ],
-    }).compileComponents();
+      declarations: [ SelectionDepartmentComponent ],
+      providers: [ 
+        Globals, 
+        { provide: ElementRef, useClass: MockElementRef },
+        AppStorageService
+      ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SelectionDepartmentComponent);
     component = fixture.componentInstance;
-    globals = TestBed.inject(Globals);
-    storage = TestBed.inject(AppStorageService) as unknown as AppStorageServiceStub;
-    globals.initDefafultParameters();
-    globals.themeColor = '#112233';
-    globals.themeForegroundColor = '#ddeeff';
-    globals.colorGradient180 = 'linear-gradient(#000,#fff)';
-    globals.LABEL_SELECT_TOPIC = 'Scegli un argomento';
-    globals.BUTTON_CLOSE_TO_ICON = 'Chiudi';
-    globals.departments = [
-      { _id: 'dep-a', name: 'Vendite' } as any,
-      { _id: 'dep-b', name: 'Supporto' } as any,
-    ];
-    globals.attributes = { userFullname: 'Ada', userEmail: 'ada@example.com' } as any;
-    globals.windowContext = {} as any;
+    fixture.detectChanges();
   });
 
   it('should create', () => {
-    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
-
-  it('should render dialog with topic label and one list row per department', () => {
-    fixture.detectChanges();
-    const dialog = fixture.nativeElement.querySelector('#chat21-selection-department') as HTMLElement;
-    expect(dialog.getAttribute('role')).toBe('dialog');
-    expect(dialog.getAttribute('aria-modal')).toBe('true');
-    expect(dialog.getAttribute('aria-label')).toBe('Scegli un argomento');
-    const heading = fixture.nativeElement.querySelector('h2.c21-message-field') as HTMLElement;
-    expect(heading.textContent?.trim()).toBe('Scegli un argomento');
-    const buttons = fixture.nativeElement.querySelectorAll('.c21-button-department');
-    expect(buttons.length).toBe(2);
-    expect(buttons[0].textContent).toContain('Vendite');
-    expect(buttons[1].textContent).toContain('Supporto');
-  });
-
-  it('onSelectDepartment should set globals, attributes and persist JSON in storage', () => {
-    fixture.detectChanges();
-    spyOn(component.onDepartmentSelected, 'emit');
-    const dept = { _id: 'dep-b', name: 'Supporto' };
-    component.onSelectDepartment(dept);
-    expect(globals.departmentSelected).toEqual(dept as any);
-    expect(globals.attributes.departmentId).toBe('dep-b');
-    expect(globals.attributes.departmentName).toBe('Supporto');
-    expect(storage.setItem).toHaveBeenCalledWith('attributes', jasmine.any(String));
-    const parsed = JSON.parse(storage.lastAttributesJson!);
-    expect(parsed.departmentId).toBe('dep-b');
-    expect(parsed.departmentName).toBe('Supporto');
-    expect(parsed.userEmail).toBe('ada@example.com');
-    expect(component.onDepartmentSelected.emit).toHaveBeenCalledWith(dept);
-  });
-
-  it('click on department button should trigger selection flow', () => {
-    fixture.detectChanges();
-    spyOn(component, 'onSelectDepartment').and.callThrough();
-    const second = fixture.debugElement.queryAll(By.css('.c21-button-department'))[1];
-    second.nativeElement.click();
-    expect(component.onSelectDepartment).toHaveBeenCalledWith(jasmine.objectContaining({ _id: 'dep-b' }));
-  });
-
-  it('closePage should emit onClose', () => {
-    fixture.detectChanges();
-    spyOn(component.onClose, 'emit');
-    component.closePage();
-    expect(component.onClose.emit).toHaveBeenCalled();
-  });
-
-  it('openPage should emit onOpen', () => {
-    fixture.detectChanges();
-    spyOn(component.onOpen, 'emit');
-    component.openPage();
-    expect(component.onOpen.emit).toHaveBeenCalled();
-  });
-
-  it('cancelPage should reset newConversationStart and emit onClose', () => {
-    fixture.detectChanges();
-    globals.newConversationStart = true;
-    spyOn(component.onClose, 'emit');
-    component.cancelPage();
-    expect(globals.newConversationStart).toBe(false);
-    expect(component.onClose.emit).toHaveBeenCalled();
-  });
-
-  it('should invoke beforeDepartmentsFormRender hook when present on windowContext.tiledesk', () => {
-    const hook = jasmine.createSpy('beforeDepartmentsFormRender').and.returnValue([{ _id: 'x', name: 'Filtered' }]);
-    globals.windowContext = { tiledesk: { beforeDepartmentsFormRender: hook } } as any;
-    const f2 = TestBed.createComponent(SelectionDepartmentComponent);
-    const c2 = f2.componentInstance;
-    f2.detectChanges();
-    expect(hook).toHaveBeenCalledWith(globals.departments);
-    expect(c2.departments.length).toBe(1);
-    expect(c2.departments[0].name).toBe('Filtered');
-    f2.destroy();
-  });
-
-  it('should emit onBeforeDepartmentsFormRender when hook is absent', () => {
-    spyOn(component.onBeforeDepartmentsFormRender, 'emit');
-    fixture.detectChanges();
-    expect(component.onBeforeDepartmentsFormRender.emit).toHaveBeenCalledWith(
-      jasmine.arrayContaining([jasmine.objectContaining({ name: 'Vendite' })]),
-    );
-  });
-
-  it('Escape host listener should call closePage', () => {
-    fixture.detectChanges();
-    spyOn(component, 'closePage');
-    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.closePage).toHaveBeenCalled();
-  });
-
-  it('should focus afSelectionDepartment after delay in ngAfterViewInit', fakeAsync(() => {
-    fixture.detectChanges();
-    const dialog = fixture.nativeElement.querySelector('#chat21-selection-department') as HTMLElement;
-    spyOn(dialog, 'focus');
-    component.ngAfterViewInit();
-    tick(1000);
-    expect(dialog.focus).toHaveBeenCalled();
-  }));
 });

package/src/app/component/selection-department/selection-department.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, OnInit, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { Globals } from '../../utils/globals';
 
@@ -172,13 +172,6 @@ export class SelectionDepartmentComponent implements OnInit, AfterViewInit {
         this.onClose.emit();
     }
 
-    @HostListener('keydown.escape', ['$event'])
-    onEscape(event: KeyboardEvent){
-        event.preventDefault();
-        event.stopPropagation();
-        this.closePage();
-    }
-
     cancelPage() {
         this.logger.debug('[SELECT-DEP] cancelPage');
         this.g.newConversationStart = false;

package/src/app/component/send-button/send-button.component.html

@@ -1,13 +1,21 @@
-<button aflauncherbutton #aflauncherbutton type="button" id="c21-launcher-button" class="c21-button-clean scale-in-center c21-align-right"
-    *ngIf="g.isLogged == true"
+<!-- tabindex="000"-->
+
+<button aflauncherbutton #aflauncherbutton id="c21-launcher-button" class="c21-button-clean scale-in-center c21-align-right" 
+    *ngIf="g.isLogged == true" 
     [style]="{ 'background-color': g.themeColor, 'bottom': g.marginY+'px!important', 'left':(g.align==='left')?g.marginX+'px!important':'', 'right':(g.align==='right')?g.marginX+'px!important':'', 'width': g.launcherWidth, 'height': g.launcherHeight, 'border-radius': g.baloonShape}"
     (click)="onSendPressed($event)"
-    [attr.aria-label]="g.LABEL_SEND_NEW_MESSAGE || 'Send new message'">
+    tabindex="1000" 
+    aria-label="    apri chat"
+    >
 
     <!-- SEND ICON -->
-    <div class="launcher-button rotate-center">
-        <svg aria-hidden="true" focusable="false" [style]="{'fill': g.themeForegroundColor, 'display': (g.baloonImage==='')?'':'none' }" xmlns="http://www.w3.org/2000/svg" width="100%"
+    <!-- [@enterBubbleAnimation] -->
+    <div class="launcher-button rotate-center" >
+        <!-- <img *ngIf="g.baloonImage !== '' " [src]="g.baloonImage" [ngStyle]="{'width': '100%', 'height': '100%', 'margin': 'auto'}"> -->
+        <svg role="img" [style]="{'fill': g.themeForegroundColor, 'display': (g.baloonImage==='')?'':'none' }" xmlns="http://www.w3.org/2000/svg" width="100%"
             height="100%" viewBox="0 0 90 90">
+            <!-- <path fill="none" d="M0 0h24v24H0V0z" />
+            <path d="M33.57,31A4.58,4.58,0,0,0,29,35.57V58.3a1.94,1.94,0,0,0,3.32,1.38l3-3a.29.29,0,0,1,.21-.09H56.43A4.58,4.58,0,0,0,61,52V35.57A4.58,4.58,0,0,0,56.43,31Z" /> -->
             <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
         </svg>
     </div>

package/src/app/component/send-button/send-button.component.spec.ts

@@ -1,4 +1,4 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { SendButtonComponent } from './send-button.component';
 
@@ -6,7 +6,7 @@ describe('SendButtonComponent', () => {
   let component: SendButtonComponent;
   let fixture: ComponentFixture<SendButtonComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ SendButtonComponent ]
     })

package/src/app/component/star-rating-widget/star-rating-widget.component.html

@@ -9,22 +9,33 @@ svg.star:hover{
     fill: #FFD700;
 }
 </style>
-<div id="chat21-star-rating-widget" role="dialog" aria-modal="true" [attr.aria-label]="g.CUSTOMER_SATISFACTION">
+<div id="chat21-star-rating-widget">
     <!-- HEADER -->
     <div class="c21-header" [ngStyle]="{ 'color': g.themeForegroundColor, 'background-image': g.colorGradient180 }">
         <div class="c21-header-container">
+            <!-- ICON CLOSE CHAT -->
+            <!-- <div class="c21-header-button">
+                <div class="c21-close-button c21-small"  aria-label="Close" aria-hidden="true" role="button">
+                    <div 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>
+                    </div>
+                </div>
+            </div> -->
+            
             <!-- CONTENT HEADER -->
             <div class="c21-header-content">
                 <!-- ICON BACK -->
-                <button *ngIf="(step > 0 && step != 2)"
-                    type="button"
-                    [attr.aria-label]="g['BACK']"
-                    class="c21-header-button c21-left c21-button-clean"
-                    (click)="prevStep()">
-                    <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg"
+                <button *ngIf="(step > 0 && step != 2)" tabindex="1417" aria-label=" indietro " class="c21-header-button c21-left c21-button-clean" (click)="prevStep()">
+                    <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }" xmlns="http://www.w3.org/2000/svg"
                         width="24px" height="24px" viewBox="0 0 24 24">
+                        <!-- <path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7.07 18.28c.43-.9 3.05-1.78 4.93-1.78s4.51.88 4.93 1.78C15.57 19.36 13.86 20 12 20s-3.57-.64-4.93-1.72zm11.29-1.45c-1.43-1.74-4.9-2.33-6.36-2.33s-4.93.59-6.36 2.33C4.62 15.49 4 13.82 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8c0 1.82-.62 3.49-1.64 4.83zM12 6c-1.94 0-3.5 1.56-3.5 3.5S10.06 13 12 13s3.5-1.56 3.5-3.5S13.94 6 12 6zm0 5c-.83 0-1.5-.67-1.5-1.5S11.17 8 12 8s1.5.67 1.5 1.5S12.83 11 12 11z"/> -->
                         <path fill="none" d="M0 0h24v24H0V0z" />
                         <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z" />
+                        <title id="altIconTitle">{{ g['BACK'] }}</title>
                     </svg>
                 </button>
                 <!-- TITLE HEADER -->
@@ -47,56 +58,61 @@ svg.star:hover{
                 <!-- ***************  STEP 0 : BEGIN ***************** -->
                 <div *ngIf="step==0" class="step-rate">
                     <div *ngIf="g.allowTranscriptDownload" class="c21-modal-content" style="text-align: right; margin: 0px 20px 30px 10px;">
-                        <button type="button" class="c21-link c21-button-clean" (click)="dowloadTranscript()">
+                        <div class="c21-link" (click)="dowloadTranscript()" >
                             <span [ngStyle]="{'color': stylesMap?.get('themeColor')}">{{ g.DOWNLOAD_TRANSCRIPT }}</span>
-                        </button>
+                        </div>
                     </div>
                     <div class="clear"></div>
-
+                   
                     <!-- CONTENT -->
                     <div class="c21-modal-content">
                         <div class="default-text">{{ g.YOUR_OPINION_ON_OUR_CUSTOMER_SERVICE }}</div>
                         <fieldset class="chat21-rating" [attr.disabled]="!g.isOpenStartRating? '' : null">
-                            <legend class="visually-hidden">{{ g.YOUR_RATING }}</legend>
                             <input class="c21-input-star" type="radio" id="star1" name="rating" value="1" />
                             <label (mouseover)="mouseOverRate(1)" (mouseleave)="mouseOverRate(0)" (click)="openRate(1)" class="full c21-button" for="star1" title="scarso - 1 star">
-                                <svg aria-hidden="true" focusable="false" class="star" [class.active]="mouseRate>=1" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
+                                <svg class="star" [class.active]="mouseRate>=1" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
                             </label>
                             <input class="c21-input-star" type="radio" id="star2" name="rating" value="2" />
                             <label (mouseover)="mouseOverRate(2)" (mouseleave)="mouseOverRate(0)" (click)="openRate(2)" class="full c21-button" for="star2" title="sufficiente - 2 stars">
-                                <svg aria-hidden="true" focusable="false" class="star" [class.active]="mouseRate>=2" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
+                                <svg class="star" [class.active]="mouseRate>=2" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
                             </label>
                             <input class="c21-input-star" type="radio" id="star3" name="rating" value="3" />
                             <label (mouseover)="mouseOverRate(3)" (mouseleave)="mouseOverRate(0)" (click)="openRate(3)" class="full c21-button" for="star3" title="buono - 3 stars">
-                                <svg aria-hidden="true" focusable="false" class="star" [class.active]="mouseRate>=3" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
+                                <svg class="star" [class.active]="mouseRate>=3" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
                             </label>
                             <input class="c21-input-star" type="radio" id="star4" name="rating" value="4" />
                             <label (mouseover)="mouseOverRate(4)" (mouseleave)="mouseOverRate(0)" (click)="openRate(4)" class="full c21-button" for="star4" title="ottimo - 4 stars">
-                                <svg aria-hidden="true" focusable="false" class="star" [class.active]="mouseRate>=4" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
+                                <svg class="star" [class.active]="mouseRate>=4" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
                             </label>
                             <input class="c21-input-star" type="radio" id="star5" name="rating" value="5" />
                             <label (mouseover)="mouseOverRate(5)" (mouseleave)="mouseOverRate(0)" (click)="openRate(5)" class="full c21-button" for="star5" title="eccellente - 5 stars">
-                                <svg aria-hidden="true" focusable="false" class="star" [class.active]="mouseRate>=5" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
+                                <svg class="star" [class.active]="mouseRate>=5" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/></svg>
                             </label>
                         </fieldset>
                     </div>
                     <div class="clear"></div>
-
-                     <!-- BUTTON CLOSE -->
-                    <button type="button" class="c21-button-primary"
-                        [attr.aria-label]="g.CLOSE"
-                        (click)="returnClosePage()"
-                        [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
+                    <!-- <button [attr.disabled]="!g.isOpenStartRating? '' : null" *ngIf="g.allowTranscriptDownload !== true" class="c21-button-primary" [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor}"
+                        (click)="dowloadTranscript()">
+                        <span [ngStyle]="{'color': g.themeForegroundColor}">{{ g.DOWNLOAD_TRANSCRIPT }}</span>
+                    </button> -->
+                    <!-- <button class="c21-button-link" (click)="returnClosePage()">
+                        <span>{{ g.CLOSE }}</span>
+                    </button> -->
+
+                     <!-- ICON CLOSE -->
+                    <button tabindex="1414"  class="c21-button-primary" (click)="returnClosePage()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
                         <span class="v-align-center">
-                            <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
+                            <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
                                 width="18" height="18" 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">{{ g.CLOSE }}</title>    
                             </svg>
                         </span>
                         <span class="v-align-center c21-label-button">
                             {{ g.CLOSE }}
-                        </span>
+                          <!-- {{translationMap?.get('LABEL_START_NW_CONV')}} -->
+                        </span>  
                         <div class="clear"></div>
                     </button>
                 </div>
@@ -104,47 +120,62 @@ svg.star:hover{
 
                 <!-- ***************  STEP 1 : BEGIN ***************** -->
                 <div *ngIf="step==1" class="step-rate">
+                    <!-- CONTENT -->
+                    <!-- <div *ngIf="g.allowTranscriptDownload" class="c21-modal-content" style="text-align: right; margin: 0px 20px 30px 10px;">
+                        <div class="c21-link" (click)="dowloadTranscript()" >
+                            <span [ngStyle]="{'color': g.themeColor}">{{ g.DOWNLOAD_TRANSCRIPT }}</span>
+                        </div>
+                    </div> -->
                     <div class="clear"></div>
                     <div class="c21-step-content">
-
+                        <!-- il tuo voto: -->
+                        
+                        <!-- <div class="chat21-stars">
+                            <span *ngIf="rate>0" class="fa fa-star checked"></span>
+                            <span *ngIf="rate>1" class="fa fa-star checked"></span>
+                            <span *ngIf="rate>2" class="fa fa-star checked"></span>
+                            <span *ngIf="rate>3" class="fa fa-star checked"></span>
+                            <span *ngIf="rate>4" class="fa fa-star checked"></span>
+                        </div> -->
+                        <!-- <div class="default-text">{{ g.YOUR_RATING }}</div> -->
+                        
+
+                        <!-- Scrivi la tua opinione...(opzionale) -->
                         <textarea #textbox rows="1" id="chat21-message-rate-context" class='textarea-rate'
-                            [attr.aria-label]="g.WRITE_YOUR_OPINION"
                             placeholder="{{ g.WRITE_YOUR_OPINION }}">{{message}}</textarea>
                         <div class="clear"></div>
 
-                        <!-- BUTTON CLOSE -->
-                        <button type="button" class="c21-button-primary"
-                            [attr.aria-label]="g.CLOSE"
-                            (click)="returnClosePage()"
-                            [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
+                        <!-- ICON CLOSE -->
+                        <button tabindex="1415"  class="c21-button-primary" (click)="returnClosePage()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
                             <span class="v-align-center">
-                                <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
+                                <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
                                     width="18" height="18" 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">{{ g.CLOSE }}</title>    
                                 </svg>
                             </span>
                             <span class="v-align-center c21-label-button">
                                 {{ g.CLOSE }}
-                            </span>
+                              <!-- {{translationMap?.get('LABEL_START_NW_CONV')}} -->
+                            </span>  
                             <div class="clear"></div>
                         </button>
 
-                        <!-- BUTTON SUBMIT -->
-                        <button type="button" class="c21-button-primary"
-                            [attr.aria-label]="g.SUBMIT"
-                            (click)="sendRate()"
-                            [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
+                        <!-- ICON SUBMIT -->
+                        <button tabindex="1416"  class="c21-button-primary" (click)="sendRate()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
                             <span class="v-align-center">
-                                <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
+                                <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
                                     width="18" height="18" viewBox="0 0 24 24">
                                     <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
                                     <path d="M0 0h24v24H0z" fill="none"/>
+                                    <title id="altIconTitle">{{ g.SUBMIT }}</title>    
                                 </svg>
                             </span>
                             <span class="v-align-center c21-label-button">
                                 {{ g.SUBMIT }}
-                            </span>
+                              <!-- {{translationMap?.get('LABEL_START_NW_CONV')}} -->
+                            </span>  
                             <div class="clear"></div>
                         </button>
 
@@ -156,33 +187,32 @@ svg.star:hover{
                 <!-- ***************  STEP 2 : BEGIN ***************** -->
                 <div *ngIf="step==2" class="step-rate">
                     <div *ngIf="g.allowTranscriptDownload" class="c21-modal-content" style="text-align: right; margin: 0px 20px 30px 10px;">
-                        <button type="button" class="c21-link c21-button-clean" (click)="dowloadTranscript()">
+                        <div class="c21-link" (click)="dowloadTranscript()" >
                             <span [ngStyle]="{'color': stylesMap?.get('themeColor')}">{{ g.DOWNLOAD_TRANSCRIPT }}</span>
-                        </button>
+                        </div>
                     </div>
                     <div class="clear"></div>
-
+                
                     <!-- CONTENT -->
                     <div class="c21-step-content">
                         <div class="default-title">{{ g.THANK_YOU_FOR_YOUR_EVALUATION }}</div>
                         <div class="default-text">{{ g.YOUR_RATING_HAS_BEEN_RECEIVED }}</div>
                     </div>
 
-                    <!-- BUTTON CLOSE -->
-                    <button type="button" class="c21-button-primary"
-                        [attr.aria-label]="g.CLOSE"
-                        (click)="returnClosePage()"
-                        [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
+                    <!-- ICON CLOSE -->
+                    <button tabindex="1415"  class="c21-button-primary" (click)="returnClosePage()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
                         <span class="v-align-center">
-                            <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
+                            <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}" xmlns="http://www.w3.org/2000/svg"
                                 width="18" height="18" 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">{{ g.CLOSE }}</title>    
                             </svg>
                         </span>
                         <span class="v-align-center c21-label-button">
                             {{ g.CLOSE }}
-                        </span>
+                          <!-- {{translationMap?.get('LABEL_START_NW_CONV')}} -->
+                        </span>  
                         <div class="clear"></div>
                     </button>
                 </div>
@@ -195,4 +225,4 @@ svg.star:hover{
 
     </div>
 
-</div>
+</div>

package/src/app/directives/tooltip.directive.spec.ts

@@ -1,12 +1,8 @@
-import { ElementRef, Renderer2 } from '@angular/core';
-
 import { TooltipDirective } from './tooltip.directive';
 
 describe('TooltipDirective', () => {
-  it('should create', () => {
-    const el = document.createElement('span');
-    const renderer = jasmine.createSpyObj('Renderer2', ['createElement', 'appendChild', 'addClass', 'removeClass', 'removeChild', 'setStyle']);
-    const directive = new TooltipDirective(new ElementRef(el), renderer as unknown as Renderer2);
-    expect(directive).toBeTruthy();
-  });
+  // it('should create an instance', () => {
+  //   const directive = new TooltipDirective();
+  //   expect(directive).toBeTruthy();
+  // });
 });

package/src/app/modals/confirm-close/confirm-close.component.html

@@ -1,37 +1,25 @@
-<div class="modal-container"
-    role="dialog"
-    aria-modal="true"
-    cdkTrapFocus
-    [cdkTrapFocusAutoCapture]="true"
-    aria-labelledby="confirm-close-title"
-    [attr.aria-label]="translationMap?.get('CONFIRM_CLOSE_CHAT')">
+<div class="modal-container">
     <div class="header">
         <!-- ICON CLOSE CHAT -->
-        <button type="button"
-            class="c21-header-button c21-right c21-close c21-button-clean"
-            [attr.aria-label]="translationMap?.get('CLOSE')"
-            (click)="onBack()">
-            <svg aria-hidden="true" focusable="false" [ngStyle]="{'fill': stylesMap?.get('themeColor') }" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
+        <button tabindex="-1" class="c21-header-button c21-right c21-close c21-button-clean" (click)="onBack()">
+            <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': stylesMap?.get('themeColor') }" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" 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">{{ translationMap?.get('CLOSE') }}</title>
             </svg>
         </button>
     </div>
     <div class="content">
-        <h2 id="confirm-close-title" class="text">{{ translationMap?.get('CONFIRM_CLOSE_CHAT') }}</h2>
+        <div class="text">{{ translationMap?.get('CONFIRM_CLOSE_CHAT') }}</div>
         <div class="options">
 
             <!-- BUTTON CANCEL-->
-            <button type="button"
-                class="c21-button-clean v-align-center c21-label-button back-button"
-                [class.disabled]="isLoadingActive"
-                [attr.disabled]="isLoadingActive ? true : null"
-                (click)="onBack()">
+            <span class="v-align-center c21-label-button back-button" [class.disabled]="isLoadingActive" (click)="onBack()">
                 {{translationMap?.get('BACK')}}
-            </button>
+            </span> 
 
             <!-- BUTTON CLOSE-->
-            <button type="button" aflistconv #aflistconv class="c21-button-primary" (click)="onConfirm()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
+            <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="onConfirm()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
                 <span *ngIf="isLoadingActive" class="spinner-container">
                     <svg xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25" height="25" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }"
                         viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">

package/src/app/modals/confirm-close/confirm-close.component.scss

@@ -16,9 +16,6 @@
     gap: 15px;
     .text{
         max-width: calc(100% - 30px);
-        margin: 0;
-        font-size: 1em;
-        font-weight: 500;
     }
     .options{
         display: flex;

package/src/app/modals/confirm-close/confirm-close.component.spec.ts

@@ -1,8 +1,4 @@
-import { A11yModule } from '@angular/cdk/a11y';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ConfirmCloseComponent } from './confirm-close.component';
 
@@ -10,17 +6,12 @@ describe('ConfirmCloseComponent', () => {
   let component: ConfirmCloseComponent;
   let fixture: ComponentFixture<ConfirmCloseComponent>;
 
-  beforeEach(waitForAsync(() => {
-    const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
-    LoggerInstance.setInstance(new CustomLogger(ngxlogger));
-    TestBed.configureTestingModule({
-      imports: [A11yModule],
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       declarations: [ ConfirmCloseComponent ]
     })
-      .compileComponents();
-  }));
+    .compileComponents();
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(ConfirmCloseComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();