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

package/src/app/component/message/buttons/link-button/link-button.component.scss

@@ -42,17 +42,20 @@
     transition: background-color .6s ease;
     .icon-button-action {
         position: absolute;
-        top: -1px;
-        right: 1px;
+        top: 50%;
+        right: 8px;
+        transform: translateY(-50%);
         svg {
-            fill: var(--buttonTextColor);
+            fill: var(--textColor);
         }
     }
     .icon-button-action-self{
         position: absolute;
-        right: 1px;
+        top: 50%;
+        right: 8px;
+        transform: translateY(-50%);
         svg {
-            fill: var(--buttonTextColor);
+            fill: var(--textColor);
         }
     }
     &:focus,

package/src/app/component/message/buttons/link-button/link-button.component.spec.ts

@@ -1,6 +1,4 @@
-import { SimpleChange } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LinkButtonComponent } from './link-button.component';
 
@@ -8,63 +6,20 @@ describe('LinkButtonComponent', () => {
   let component: LinkButtonComponent;
   let fixture: ComponentFixture<LinkButtonComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [LinkButtonComponent],
-    }).compileComponents();
+      declarations: [ LinkButtonComponent ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LinkButtonComponent);
     component = fixture.componentInstance;
-    component.button = { value: 'Open', link: 'https://x.test', target: 'blank' };
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('ngOnChanges should set CSS variables on .url', () => {
-    component.fontSize = '12px';
-    component.backgroundColor = '#aaa';
-    component.textColor = '#bbb';
-    component.hoverBackgroundColor = '#ccc';
-    component.hoverTextColor = '#ddd';
-    component.ngOnChanges({
-      fontSize: new SimpleChange(null, '12px', true),
-    });
-    const el = fixture.nativeElement.querySelector('.url') as HTMLElement;
-    expect(el.style.getPropertyValue('--buttonFontSize').trim()).toBe('12px');
-  });
-
-  it('actionButtonUrl should emit when link set', () => {
-    spyOn(component.onButtonClicked, 'emit');
-    component.actionButtonUrl();
-    expect(component.onButtonClicked.emit).toHaveBeenCalled();
-  });
-
-  it('actionButtonUrl should not emit when link empty', () => {
-    component.button = { value: 'x', link: '' };
-    spyOn(component.onButtonClicked, 'emit');
-    component.actionButtonUrl();
-    expect(component.onButtonClicked.emit).not.toHaveBeenCalled();
-  });
-
-  it('should render external icon when target is not self', () => {
-    component.button = { value: 'L', link: 'u', target: 'blank' };
-    fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('.icon-button-action'))).toBeTruthy();
-  });
-
-  it('should render self icon when target is self', () => {
-    component.button = { value: 'L', link: 'u', target: 'self' };
-    fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('.icon-button-action-self'))).toBeTruthy();
-  });
-
-  it('mouseover and mouseout should not throw', () => {
-    expect(() => component.onMouseOver({} as any)).not.toThrow();
-    expect(() => component.onMouseOut({} as any)).not.toThrow();
-  });
 });

package/src/app/component/message/buttons/text-button/text-button.component.spec.ts

@@ -1,6 +1,4 @@
-import { SimpleChange } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TextButtonComponent } from './text-button.component';
 
@@ -8,57 +6,20 @@ describe('TextButtonComponent', () => {
   let component: TextButtonComponent;
   let fixture: ComponentFixture<TextButtonComponent>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [TextButtonComponent],
-    }).compileComponents();
+      declarations: [ TextButtonComponent ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TextButtonComponent);
     component = fixture.componentInstance;
-    component.button = { value: 'Reply' };
-    component.isConversationArchived = false;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('ngOnChanges should set CSS variables on .text', () => {
-    component.fontSize = '13px';
-    component.backgroundColor = '#111';
-    component.textColor = '#222';
-    component.hoverBackgroundColor = '#333';
-    component.hoverTextColor = '#444';
-    component.ngOnChanges({
-      fontSize: new SimpleChange(null, '13px', true),
-    });
-    const el = fixture.nativeElement.querySelector('.text') as HTMLElement;
-    expect(el.style.getPropertyValue('--buttonFontSize').trim()).toBe('13px');
-  });
-
-  it('actionButtonText should emit click payload', () => {
-    spyOn(component.onButtonClicked, 'emit');
-    component.actionButtonText();
-    expect(component.onButtonClicked.emit).toHaveBeenCalled();
-  });
-
-  it('click on template should invoke actionButtonText', () => {
-    spyOn(component, 'actionButtonText');
-    fixture.debugElement.query(By.css('.text')).triggerEventHandler('click', {});
-    expect(component.actionButtonText).toHaveBeenCalled();
-  });
-
-  it('should add disabled class when conversation archived', () => {
-    component.isConversationArchived = true;
-    fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('.text').classList.contains('disabled')).toBe(true);
-  });
-
-  it('mouseover and mouseout should not throw', () => {
-    expect(() => component.onMouseOver({} as any)).not.toThrow();
-    expect(() => component.onMouseOut({} as any)).not.toThrow();
-  });
 });

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

@@ -1,28 +1,19 @@
-<div class="wrapper"
-    role="region"
-    aria-roledescription="carousel"
-    [attr.aria-label]="translationMap?.get('CAROUSEL_LABEL') || 'Cards carousel'">
-    <button type="button"
-        id="left"
-        class="arrow left c21-button-clean"
-        [attr.aria-label]="translationMap?.get('CAROUSEL_PREVIOUS') || 'Previous slide'"
-        (click)="goTo('previous')" *ngIf="activeElement > 1">
-        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+<div class="wrapper">
+    <div id="left" class="arrow left" (click)="goTo('previous')" *ngIf="activeElement > 1">
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
             <path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"/>
         </svg>
-    </button>
+    </div>
     <div class="carousel">
-        <div class="card"
-            *ngFor="let card of gallery; let i = index"
-            role="group"
-            aria-roledescription="slide"
-            [attr.aria-label]="getSlideLabel(i + 1, gallery?.length)">
+        <!-- <div class="card" style="width: 17px;"></div> -->
+        <div class="card" *ngFor="let card of gallery; let i = index">
+            <!-- <div [style.opacity]="i+1 === activeElement? 1: 0.5"> -->
             <div>
                 <div class="card-image" *ngIf="card?.preview?.src !== ''">
-                    <img [src]="card?.preview?.src" [attr.alt]="card?.title || 'Carousel image'" draggable="false">
+                    <img [src]="card?.preview?.src" alt="img" draggable="false">
                 </div>
                 <div class="card-image card-image-placeholder" *ngIf="card?.preview?.src == ''">
-                    <img src="assets/images/icons/no-image.svg" alt="" draggable="false">
+                    <img src="assets/images/icons/no-image.svg" alt="img" draggable="false">
                     <span>Image not available</span>
                 </div>
                 <div class="card-content">
@@ -30,24 +21,20 @@
                     <div class="card-description">{{card?.description}}</div>
                 </div>
                 <div class="buttons" *ngIf="card?.buttons && card?.buttons.length > 0">
-                    <button type="button" *ngFor="let button of card?.buttons"
-                        class="single-button action c21-button-clean"
+                    <div *ngFor="let button of card?.buttons" 
+                        class="single-button action"
                         [ngClass]="{'disabled': (isConversationArchived || (!isLastMessage && button.type !== TYPE_BUTTON.URL)), 'active': button?.active}"
-                        [attr.aria-label]="button?.value"
                         (click)="actionButtonClick($event, button, i)" >
                         {{button.value}}
-                    </button>
+                    </div>
                 </div>
             </div>
         </div>
+        <!-- <div class="card" style="width: 17px;"></div> -->
     </div>
-    <button type="button"
-        id="right"
-        class="arrow right c21-button-clean"
-        [attr.aria-label]="translationMap?.get('CAROUSEL_NEXT') || 'Next slide'"
-        (click)="goTo('next')" *ngIf="activeElement !== gallery.length">
-        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+    <div id="right" class="arrow right" (click)="goTo('next')" *ngIf="activeElement !== gallery.length">
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
             <path d="M0 0h24v24H0V0z" fill="none"/><path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z"/>
         </svg>
-    </button>
+    </div>
 </div>

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

@@ -24,17 +24,13 @@
     font-size: 14px;
     // margin: 0 25px;
 }
-.wrapper button.arrow {
+.wrapper div.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%);
@@ -45,13 +41,13 @@
     justify-content: center;
     align-items: center;
 }
-.wrapper button.arrow:active{
+.wrapper div.arrow:active{
     transform: translateY(-50%) scale(0.85);
 }
-.wrapper button.arrow:first-child{
+.wrapper div.arrow:first-child{
     left: -22px;
 }
-.wrapper button.arrow:last-child{
+.wrapper div.arrow:last-child{
     right: -22px;
 }
 .wrapper .carousel{
@@ -196,18 +192,13 @@
 
 
     .single-button{
-        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;
+        // border-top-color: rgb(219, 225, 232);
+
         -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;
@@ -231,6 +222,7 @@
         line-height: 16px;
         padding: 8px 16px!important;
 
+        &:focus,
         &:hover {
             color: var(--hoverTextColor);
             background:  var(--hoverBackgroundColor);
@@ -241,10 +233,6 @@
                 }
             }
         }
-        &: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,6 +1,4 @@
 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';
 
@@ -8,93 +6,18 @@ 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,7 +15,6 @@ 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 ============//
@@ -109,21 +108,6 @@ 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,13 +1,8 @@
-<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%"
-    [title]="frameTitle"
+    width = "100%" height = "100%"
     [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 { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { DomSanitizer } from '@angular/platform-browser';
 
 import { FrameComponent } from './frame.component';
@@ -9,48 +9,29 @@ describe('FrameComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [FrameComponent],
-    }).compileComponents();
+      declarations: [ FrameComponent ],
+      providers: [
+        {
+          provide: DomSanitizer,
+          useValue: {
+            sanitize: () => 'safeString',
+            bypassSecurityTrustResourceUrl: () => 'safeString'
+          }
+        }
+      ,]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FrameComponent);
     component = fixture.componentInstance;
+    fixture.detectChanges();
   });
 
   it('should create', () => {
-    component.metadata = { src: 'https://www.example.com/embed' };
-    component.width = 400;
-    component.height = 300;
+    component.url = component['sanitizer'].bypassSecurityTrustResourceUrl('http://www.tiledesk.com');
     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,19 +15,14 @@ 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 class="htmlCode" #htmlCode [textContent]="htmlText"></pre>
+<pre id="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,7 +1,6 @@
-import { SimpleChange } from '@angular/core';
+import { SafeHtmlPipe } from './../../../pipe/safe-html.pipe';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SafeHtmlPipe } from './../../../pipe/safe-html.pipe';
 import { HtmlComponent } from './html.component';
 
 describe('HtmlComponent', () => {
@@ -10,8 +9,12 @@ describe('HtmlComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [HtmlComponent, SafeHtmlPipe],
-    }).compileComponents();
+      declarations: [ 
+        HtmlComponent,
+        SafeHtmlPipe
+       ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
@@ -23,24 +26,4 @@ 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,14 +1,12 @@
+<!-- [ngStyle] = "{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; text-align: center; margin: auto"-->
 <div class="c21-img-container">
-  <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>
+  <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);  -->
 </div>