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

package/src/app/component/message/carousel/carousel.component.scss

@@ -24,13 +24,17 @@
     font-size: 14px;
     // margin: 0 25px;
 }
-.wrapper div.arrow {
+.wrapper button.arrow {
     top: 50%;
     height: 40px;
     width: 40px;
     cursor: pointer;
     position: absolute;
     background: #fff;
+    border: none;
+    padding: 0;
+    -webkit-appearance: none;
+    appearance: none;
     border-radius: 50%;
     box-shadow: 0 3px 6px rgba(0,0,0,0.23);
     transform: translateY(-50%);
@@ -41,13 +45,13 @@
     justify-content: center;
     align-items: center;
 }
-.wrapper div.arrow:active{
+.wrapper button.arrow:active{
     transform: translateY(-50%) scale(0.85);
 }
-.wrapper div.arrow:first-child{
+.wrapper button.arrow:first-child{
     left: -22px;
 }
-.wrapper div.arrow:last-child{
+.wrapper button.arrow:last-child{
     right: -22px;
 }
 .wrapper .carousel{
@@ -192,13 +196,18 @@
 
 
     .single-button{
-        // border-top-color: rgb(219, 225, 232);
-
+        width: 100%;
+        box-sizing: border-box;
+        margin: 0;
+        border: none;
+        border-top: 1px dashed rgba(0, 0, 0, 0.08);
+        text-align: center;
+        -webkit-appearance: none;
+        appearance: none;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
         justify-content: center;
-        border-top: 1px dashed rgba(0, 0, 0, 0.08);
         cursor: pointer;
         display: -webkit-box;
         display: -ms-flexbox;
@@ -222,7 +231,6 @@
         line-height: 16px;
         padding: 8px 16px!important;
 
-        &:focus,
         &:hover {
             color: var(--hoverTextColor);
             background:  var(--hoverBackgroundColor);
@@ -233,6 +241,10 @@
                 }
             }
         }
+        &:focus-visible {
+            outline: 2px solid var(--hoverBackgroundColor, #1565c0);
+            outline-offset: 2px;
+        }
         &:after {
             content: "";
             position: absolute;

package/src/app/component/message/carousel/carousel.component.spec.ts

@@ -1,4 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { TYPE_BUTTON } from 'src/chat21-core/utils/constants';
 
 import { CarouselComponent } from './carousel.component';
 
@@ -6,18 +8,93 @@ describe('CarouselComponent', () => {
   let component: CarouselComponent;
   let fixture: ComponentFixture<CarouselComponent>;
 
+  const btnA = { type: TYPE_BUTTON.TEXT, value: 'Go', action: '', link: '', text: 'x', active: false };
+  const gallery = [
+    { preview: { src: 'https://a/img.png' }, title: 'A', description: 'da', buttons: [btnA] },
+    { preview: { src: 'https://b/img.png' }, title: 'B', description: 'db', buttons: [{ type: TYPE_BUTTON.TEXT, value: 'B2', action: 'a', text: 't', active: false }] },
+  ];
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ CarouselComponent ]
-    })
-    .compileComponents();
+      declarations: [CarouselComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(CarouselComponent);
     component = fixture.componentInstance;
+    component.message = { attributes: { attachment: { gallery } } } as any;
+    component.gallery = gallery;
+    component.stylesMap = new Map<string, string>([
+      ['buttonFontSize', '14px'],
+      ['buttonBackgroundColor', '#111'],
+      ['buttonTextColor', '#222'],
+      ['buttonHoverBackgroundColor', '#333'],
+      ['buttonHoverTextColor', '#444'],
+    ]);
+    component.isConversationArchived = false;
+    component.isLastMessage = true;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
+    expect(component.gallery.length).toBe(2);
+  });
+
+  it('ngOnChanges should apply style map to wrapper', () => {
+    component.ngOnChanges({
+      stylesMap: {
+        previousValue: undefined,
+        currentValue: component.stylesMap,
+        firstChange: true,
+        isFirstChange: () => true,
+      },
+    });
+    const wrap = fixture.nativeElement.querySelector('.wrapper') as HTMLElement;
+    expect(wrap.style.getPropertyValue('--buttonFontSize').trim()).toBe('14px');
+  });
+
+  it('goTo should bump activeElement for next and previous', () => {
+    const carouselEl = component.carousel;
+    spyOnProperty(carouselEl, 'offsetWidth', 'get').and.returnValue(400);
+    const cards = carouselEl.querySelectorAll('.card');
+    expect(cards.length).toBeGreaterThanOrEqual(2);
+    const card1 = cards[1] as HTMLElement;
+    spyOnProperty(card1, 'offsetWidth', 'get').and.returnValue(180);
+    const startEl = component.activeElement;
+    component.goTo('next');
+    expect(component.activeElement).toBe(startEl + 1);
+    component.goTo('previous');
+    expect(component.activeElement).toBe(startEl);
+  });
+
+  it('actionButtonClick should emit onAttachmentButtonClicked', () => {
+    spyOn(component.onAttachmentButtonClicked, 'emit');
+    const ev = { target: { classList: { add: jasmine.createSpy('add') } } };
+    component.gallery = gallery;
+    component.actionButtonClick(ev as any, btnA, 0);
+    expect(component.onAttachmentButtonClicked.emit).toHaveBeenCalled();
+    expect(btnA.active).toBe(true);
+  });
+
+  it('actionButtonClick should ignore empty button', () => {
+    spyOn(component.onAttachmentButtonClicked, 'emit');
+    const empty = { type: TYPE_BUTTON.TEXT, value: '', action: '', link: '', text: '', active: false };
+    component.actionButtonClick({ target: { classList: { add: () => {} } } } as any, empty, 0);
+    expect(component.onAttachmentButtonClicked.emit).not.toHaveBeenCalled();
+  });
+
+  it('arrow clicks should invoke goTo', () => {
+    spyOn(component, 'goTo');
+    component.activeElement = 1;
+    component.gallery = gallery;
+    fixture.detectChanges();
+    const right = fixture.debugElement.query(By.css('.arrow.right'));
+    expect(right).toBeTruthy();
+    right!.triggerEventHandler('click', {});
+    expect(component.goTo).toHaveBeenCalledWith('next');
+  });
+
+  it('TYPE_BUTTON should be exposed for template', () => {
+    expect(component.TYPE_BUTTON).toBe(TYPE_BUTTON);
   });
 });

package/src/app/component/message/carousel/carousel.component.ts

@@ -15,6 +15,7 @@ export class CarouselComponent implements OnInit{
   @Input() isConversationArchived: boolean;
   @Input() isLastMessage: boolean;
   @Input() stylesMap: Map<string, string>;
+  @Input() translationMap: Map<string, string>;
   @Output() onAttachmentButtonClicked = new EventEmitter<any>();
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>()
   // ========= end:: Input/Output values ============//
@@ -108,6 +109,21 @@ export class CarouselComponent implements OnInit{
 
   }
 
+  /**
+   * Builds an accessible label for each carousel slide, e.g. "Slide 2 of 5".
+   * Uses the i18n template `CAROUSEL_SLIDE_LABEL` if available, otherwise falls back to English.
+   */
+  getSlideLabel(current: number, total: number): string {
+    const template = this.translationMap?.get('CAROUSEL_SLIDE_LABEL');
+    const safeTotal = total || 0;
+    if (template && typeof template === 'string') {
+      return template
+        .replace('{current}', String(current))
+        .replace('{total}', String(safeTotal));
+    }
+    return `Slide ${current} of ${safeTotal}`;
+  }
+
   actionButtonClick(ev, button, index){
     this.button = button
     this.type = button.type

package/src/app/component/message/frame/frame.component.html

@@ -1,8 +1,13 @@
-<div  [ngStyle] = "{ 'max-width': '100%', 'width': width, 'height': height }">
-  <div *ngIf="loading" class="loader" [ngStyle] = "{ 'width': width , 'height': height  }"></div>
-  <iframe  allowfullscreen
+<div [ngStyle]="{ 'max-width': '100%', 'width': width, 'height': height }">
+  <div *ngIf="loading" class="loader" [ngStyle]="{ 'width': width, 'height': height }"></div>
+  <iframe allowfullscreen
     [ngClass]="{'isLoadingImage': loading}"
-    width = "100%" height = "100%"
+    width="100%" height="100%"
+    [title]="frameTitle"
     [src]="url"
+    sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox"
+    referrerpolicy="strict-origin-when-cross-origin"
+    loading="lazy"
     (load)="onLoaded($event)"></iframe>
 </div>
+

package/src/app/component/message/frame/frame.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { DomSanitizer } from '@angular/platform-browser';
 
 import { FrameComponent } from './frame.component';
@@ -9,29 +9,48 @@ describe('FrameComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ FrameComponent ],
-      providers: [
-        {
-          provide: DomSanitizer,
-          useValue: {
-            sanitize: () => 'safeString',
-            bypassSecurityTrustResourceUrl: () => 'safeString'
-          }
-        }
-      ,]
-    })
-    .compileComponents();
+      declarations: [FrameComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FrameComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
-    component.url = component['sanitizer'].bypassSecurityTrustResourceUrl('http://www.tiledesk.com');
+    component.metadata = { src: 'https://www.example.com/embed' };
+    component.width = 400;
+    component.height = 300;
     fixture.detectChanges();
     expect(component).toBeTruthy();
   });
+
+  it('ngOnInit should trust resource URL when metadata.src present', () => {
+    component.metadata = { src: 'https://player.example/v/1' };
+    component.ngOnInit();
+    expect(component.url).toBeTruthy();
+    expect((component.url as any).changingThisBreaksApplicationSecurity).toBe('https://player.example/v/1');
+  });
+
+  it('ngOnInit should leave url null when metadata missing src', () => {
+    component.metadata = {};
+    component.ngOnInit();
+    expect(component.url).toBeNull();
+  });
+
+  it('onLoaded should clear loading and emit', () => {
+    spyOn(component.onElementRendered, 'emit');
+    component.loading = true;
+    component.onLoaded({} as any);
+    expect(component.loading).toBe(false);
+    expect(component.onElementRendered.emit).toHaveBeenCalledWith({ element: 'frame', status: true });
+  });
+
+  it('ngOnDestroy should clear trusted url', () => {
+    const sanitizer = TestBed.inject(DomSanitizer);
+    component.url = sanitizer.bypassSecurityTrustResourceUrl('https://x');
+    component.ngOnDestroy();
+    expect(component.url).toBeNull();
+  });
 });

package/src/app/component/message/frame/frame.component.ts

@@ -15,14 +15,19 @@ export class FrameComponent implements OnInit {
   
   url: SafeResourceUrl = null
   loading: boolean = true
+  frameTitle: string = 'Embedded content'
   constructor(private sanitizer: DomSanitizer) { }
 
   ngOnInit() {
     if(this.metadata && this.metadata.src){
       this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.metadata.src);
+      try {
+        const host = new URL(this.metadata.src).hostname;
+        this.frameTitle = `Embedded content from ${host}`;
+      } catch (_) {
+        this.frameTitle = 'Embedded content';
+      }
     }
-    // this.width = this.getSizeImg(this.metadata).width;
-    // this.height = this.getSizeImg(this.metadata).height;
   }
 
   ngOnDestroy(){

package/src/app/component/message/html/html.component.html

@@ -2,4 +2,4 @@
   Security: render HTML messages as plain text (no DOM interpretation).
   This preserves the exact input (e.g. "<h1>...</h1>") including line breaks.
 -->
-<pre id="htmlCode" #htmlCode [textContent]="htmlText"></pre>
+<pre class="htmlCode" #htmlCode [textContent]="htmlText"></pre>

package/src/app/component/message/html/html.component.scss

@@ -77,7 +77,7 @@
 }
 
 /* Render raw HTML source safely */
-#htmlCode {
+.htmlCode {
     white-space: pre-wrap; /* preserve newlines, allow wrapping */
     word-break: break-word;
     margin: 0;

package/src/app/component/message/html/html.component.spec.ts

@@ -1,6 +1,7 @@
-import { SafeHtmlPipe } from './../../../pipe/safe-html.pipe';
+import { SimpleChange } from '@angular/core';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { SafeHtmlPipe } from './../../../pipe/safe-html.pipe';
 import { HtmlComponent } from './html.component';
 
 describe('HtmlComponent', () => {
@@ -9,12 +10,8 @@ describe('HtmlComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ 
-        HtmlComponent,
-        SafeHtmlPipe
-       ]
-    })
-    .compileComponents();
+      declarations: [HtmlComponent, SafeHtmlPipe],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -26,4 +23,24 @@ describe('HtmlComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('ngOnChanges should set host CSS variables from inputs', () => {
+    component.fontSize = '15px';
+    component.themeColor = '#abc';
+    component.foregroundColor = '#def';
+    component.ngOnChanges({
+      fontSize: new SimpleChange(null, '15px', true),
+    });
+    const host = fixture.nativeElement as HTMLElement;
+    expect(host.style.getPropertyValue('--buttonFontSize').trim()).toBe('15px');
+    expect(host.style.getPropertyValue('--themeColor').trim()).toBe('#abc');
+    expect(host.style.getPropertyValue('--foregroundColor').trim()).toBe('#def');
+  });
+
+  it('should render htmlText as plain text in pre (XSS-safe)', () => {
+    component.htmlText = '<script>bad()</script>';
+    fixture.detectChanges();
+    const pre = fixture.nativeElement.querySelector('pre');
+    expect(pre?.textContent).toContain('<script>');
+  });
 });

package/src/app/component/message/image/image.component.html

@@ -1,12 +1,14 @@
-<!-- [ngStyle] = "{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; text-align: center; margin: auto"-->
 <div class="c21-img-container">
-  <img 
-    class="message-contentX message-content-imageX" 
-    [alt]="metadata?.name"
-    [ngClass]="{'isLoadingImage': loading}"
-    [ngStyle] = "{ 'width': width + 'px', 'height': height+'px' }"
-    [src]="metadata.src" 
-    (load)="onLoaded($event)"
-    (click)="onClickImage()"/>
-    <!-- downloadImage(metadata.src, metadata.name);  -->
+  <button type="button"
+    class="c21-image-trigger c21-button-clean"
+    [attr.aria-label]="metadata?.name ? ('Open image: ' + metadata.name) : 'Open image preview'"
+    (click)="onClickImage()">
+    <img
+      class="message-contentX message-content-imageX"
+      [alt]="metadata?.name || ''"
+      [ngClass]="{'isLoadingImage': loading}"
+      [ngStyle]="{ 'width': width + 'px', 'height': height+'px' }"
+      [src]="metadata.src"
+      (load)="onLoaded($event)"/>
+  </button>
 </div>

package/src/app/component/message/image/image.component.scss

@@ -21,6 +21,22 @@ img {
     transform: scale(1.05);
 }
 
+.c21-image-trigger {
+    display: block;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: none;
+    border-radius: var(--borderRadius);
+    width: 100%;
+    cursor: pointer;
+    line-height: 0;
+}
+.c21-image-trigger:focus-visible {
+    outline: 2px solid var(--c21-focus-ring, #1a73e8);
+    outline-offset: 2px;
+}
+
   
 .c21-img-container {
     text-align: center;

package/src/app/component/message/image/image.component.spec.ts

@@ -1,4 +1,5 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import * as FileSaver from 'file-saver';
 
 import { ImageComponent } from './image.component';
 
@@ -6,30 +7,115 @@ describe('ImageComponent', () => {
   let component: ImageComponent;
   let fixture: ComponentFixture<ImageComponent>;
 
-  beforeEach(async(() => {
+  const metadata = {
+    height: 100,
+    name: 'logo_fb.png',
+    src: 'https://cdn.example.com/logo.png',
+    type: 'image/png',
+    uid: 'u1',
+    width: 100,
+  };
+
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ ImageComponent ]
-    })
-    .compileComponents();
+      declarations: [ImageComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ImageComponent);
     component = fixture.componentInstance;
-    component.metadata = {
-      height: 650,
-      name: "logo_fb.png",
-      src: "https://firebasestorage.googleapis.com/v0/b/chat21-pre-01.appspot.com/o/public%2Fimages%2F42083ab3-3aa6-4507-831c-41c84b09dd83%2F0e8e8562-360e-4407-aa20-a0ccbe99b62d%2Flogo_fb.png?alt=media&token=8125435a-76ac-42f0-9017-cf3d8fb4e8a1",
-      type: "image/png",
-      uid: "ksg7sxnt",
-      width: 650
-    }
-    component.width = 650
-    component.height = 650
+    component.metadata = { ...metadata };
+    component.width = 80;
+    component.height = 80;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('ngOnInit should run', () => {
+    expect(() => component.ngOnInit()).not.toThrow();
+  });
+
+  it('onLoaded should clear loading and emit', () => {
+    spyOn(component.onElementRendered, 'emit');
+    component.loading = true;
+    component.onLoaded({} as any);
+    expect(component.loading).toBe(false);
+    expect(component.onElementRendered.emit).toHaveBeenCalledWith({ element: 'image', status: true });
+  });
+
+  it('downloadImage should call saveAs with explicit fileName', () => {
+    spyOn(FileSaver, 'saveAs');
+    component.downloadImage('https://cdn/x/a.png', 'out.png');
+    expect(FileSaver.saveAs).toHaveBeenCalledWith('https://cdn/x/a.png', 'out.png');
+  });
+
+  it('downloadImage should derive fileName from URL when omitted', () => {
+    spyOn(FileSaver, 'saveAs');
+    const url = 'https://cdn/x/my%20file.png';
+    component.downloadImage(url, null as any);
+    expect(FileSaver.saveAs).toHaveBeenCalled();
+    const name = (FileSaver.saveAs as jasmine.Spy).calls.mostRecent().args[1] as string;
+    expect(name).toContain('my');
+  });
+
+  it('onClickImage onload should register keydown on iframe document and close on Escape', () => {
+    const origCreate = document.createElement.bind(document);
+    const origGetById = document.getElementById.bind(document);
+    const fakeIframe: any = {
+      setAttribute: jasmine.createSpy('setAttribute'),
+      style: {},
+      srcdoc: '',
+      onload: null as null | ((ev: Event) => void),
+    };
+    spyOn(document, 'createElement').and.callFake((tag: string) => (tag === 'iframe' ? fakeIframe : origCreate(tag)));
+    spyOn(document, 'getElementById').and.callFake((id: string) =>
+      id === 'tiledesk-image-preview' ? fakeIframe : origGetById(id),
+    );
+    spyOn(document.body, 'appendChild').and.callFake((node: any) => {
+      node.parentNode = document.body;
+      return node;
+    });
+    spyOn(document.body, 'removeChild').and.stub();
+    component.onClickImage();
+    const docMock: any = {
+      getElementById: jasmine.createSpy('getElementById').and.returnValue(null),
+      addEventListener: jasmine.createSpy('addEventListener'),
+    };
+    fakeIframe.contentWindow = { document: docMock };
+    expect(fakeIframe.onload).toBeTruthy();
+    fakeIframe.onload({} as any);
+    expect(docMock.addEventListener).toHaveBeenCalledWith('keydown', jasmine.any(Function));
+    const keydownHandler = docMock.addEventListener.calls.mostRecent().args[1] as (e: KeyboardEvent) => void;
+    keydownHandler({ key: 'Escape', keyCode: 27, preventDefault: jasmine.createSpy() } as any);
+    expect(document.body.removeChild).toHaveBeenCalledWith(fakeIframe);
+  });
+
+  it('onClickImage should append iframe with preview markup', () => {
+    const iframes: HTMLIFrameElement[] = [];
+    const origCreate = document.createElement.bind(document);
+    spyOn(document, 'createElement').and.callFake((tag: string) => {
+      const el = origCreate(tag) as HTMLElement;
+      if (tag === 'iframe') {
+        iframes.push(el as HTMLIFrameElement);
+      }
+      return el;
+    });
+    spyOn(document.body, 'appendChild').and.callThrough();
+    component.onClickImage();
+    expect(document.body.appendChild).toHaveBeenCalled();
+    expect(iframes.length).toBe(1);
+    expect(iframes[0].id).toBe('tiledesk-image-preview');
+    expect(iframes[0].srcdoc).toContain('tiledesk-popup');
+    expect(iframes[0].srcdoc).toContain(metadata.src);
+    document.body.removeChild(iframes[0]);
+  });
+
+  it('img should expose alt from metadata name', () => {
+    const img = (fixture.nativeElement as HTMLElement).querySelector('img');
+    expect(img?.getAttribute('alt')).toBe('logo_fb.png');
+  });
 });