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

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

@@ -1,107 +1,113 @@
+// Shadow DOM styles - isolati dal resto dell'applicazione
 :host {
     display: block;
+    // Le variabili CSS custom properties possono attraversare il boundary del Shadow DOM
     font-size: var(--font-size-bubble-message, 14px);
 }
 
 .message_innerhtml {
     margin: 0px;
-
-    &.marked {
+    // padding: 0px 14px;
+    &.marked{
         padding: 12px 16px;
-        margin-block-start: 0em !important;
-        margin-block-end: 0em !important;
+        margin-block-start: 0em!important;
+        margin-block-end: 0em!important;
     }
-
+    
     .text-message {
         padding-top: 14px;
     }
+}
 
-    p {
-        font-size: inherit;
-        margin: 0;
-        line-height: 1.4em;
-        font-style: normal;
-        letter-spacing: normal;
-        font-stretch: normal;
-        font-variant: normal;
-        font-weight: 300;
-        overflow: hidden;
-    }
-
-    a {
-        word-break: break-word;
-        color: inherit;
-        text-decoration: underline;
-    }
+p {
+    font-size: inherit;
+    margin: 0;
+    // padding: 14px;
+    line-height: 1.4em;
+    font-style: normal;
+    letter-spacing: normal;
+    font-stretch: normal;
+    font-variant: normal;
+    font-weight: 300;
+    overflow: hidden;
+}
 
-    a:hover {
-        margin-block-end: 0em;
-        margin-block-start: 0em;
-    }
+p ::ng-deep a,
+p a {
+    word-break: break-word;
+    color: inherit; // Eredita il colore dal parent
+    text-decoration: underline;
+}
 
-    ol {
-        margin-block-end: 0em;
-        margin-block-start: 0em;
-        padding-inline-start: 15px;
+p ::ng-deep p,
+p a:hover{
+    margin-block-end: 0em;
+    margin-block-start: 0em;
+}
 
-        li::before {
-            content: "";
-            font-size: 1.4em;
-            vertical-align: middle;
-        }
+p ol {
+    margin-block-end: 0em;
+    margin-block-start: 0em;
+    padding-inline-start: 15px;
+    
+    li::before {
+        content: "";
+        font-size: 1.4em;
+        vertical-align: middle;
     }
+}
 
-    h1, h2, h3, h4, h5, h6 {
-        margin-block-start: 0.5em;
-        margin-block-end: 0.5em;
-        font-weight: bold;
-        color: inherit;
-    }
+// Stili aggiuntivi per elementi markdown comuni
+p h1, p h2, p h3, p h4, p h5, p h6 {
+    margin-block-start: 0.5em;
+    margin-block-end: 0.5em;
+    font-weight: bold;
+    color: inherit; // Eredita il colore dal parent
+}
 
-    &.marked h1 {
-        line-height: normal;
-    }
+.message_innerhtml.marked h1 {
+    line-height: normal;
+}
 
-    ul {
-        margin-block-end: 0em;
-        margin-block-start: 0em;
-        padding-inline-start: 15px;
-    }
+p ul {
+    margin-block-end: 0em;
+    margin-block-start: 0em;
+    padding-inline-start: 15px;
+}
 
-    code {
-        background-color: rgba(0, 0, 0, 0.05);
-        padding: 2px 4px;
-        border-radius: 3px;
-        font-family: monospace;
-    }
+p code {
+    background-color: rgba(0, 0, 0, 0.05);
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: monospace;
+}
 
-    pre {
-        background-color: rgba(0, 0, 0, 0.05);
-        padding: 10px;
-        border-radius: 3px;
-        overflow-x: auto;
-    }
+p pre {
+    background-color: rgba(0, 0, 0, 0.05);
+    padding: 10px;
+    border-radius: 3px;
+    overflow-x: auto;
+}
 
-    blockquote {
-        border-left: 3px solid rgba(0, 0, 0, 0.1);
-        padding-left: 10px;
-        margin-left: 0;
-        font-style: italic;
-    }
+p blockquote {
+    border-left: 3px solid rgba(0, 0, 0, 0.1);
+    padding-left: 10px;
+    margin-left: 0;
+    font-style: italic;
+}
 
-    table {
-        border-collapse: collapse;
-        width: 100%;
-        margin: 10px 0;
-    }
+p table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 10px 0;
+}
 
-    table td, table th {
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        padding: 8px;
-    }
+p table td, p table th {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 8px;
+}
 
-    table th {
-        background-color: rgba(0, 0, 0, 0.05);
-        font-weight: bold;
-    }
+p table th {
+    background-color: rgba(0, 0, 0, 0.05);
+    font-weight: bold;
 }

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

@@ -1,126 +1,33 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { HtmlEntitiesEncodePipe } from './../../../pipe/html-entities-encode.pipe';
+import { MarkedPipe } from './../../../pipe/marked.pipe';
+import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
-import { MarkedPipe } from '../../../pipe/marked.pipe';
 import { TextComponent } from './text.component';
 
-/**
- * Il template usa solo `| marked` su ciò che ritorna `printMessage(...)`:
- * `[innerHTML]="printMessage(text, messageEl, this) | marked"`
- * I test qui riproducono gli stessi use case (XSS / HTML grezzo / markdown) sulla pipeline reale del componente.
- */
-describe('TextComponent (render via MarkedPipe)', () => {
+describe('TextComponent', () => {
   let component: TextComponent;
   let fixture: ComponentFixture<TextComponent>;
-  let markedPipe: MarkedPipe;
-
-  function shadowInnerHtml(): string {
-    const host = fixture.nativeElement as HTMLElement;
-    const root = host.shadowRoot;
-    if (!root) {
-      throw new Error('Expected ShadowDom root');
-    }
-    return (root.querySelector('.message_innerhtml') as HTMLElement).innerHTML;
-  }
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [TextComponent, MarkedPipe],
-    }).compileComponents();
+      declarations: [ 
+        TextComponent,
+        MarkedPipe,
+        HtmlEntitiesEncodePipe
+      ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TextComponent);
     component = fixture.componentInstance;
-    markedPipe = new MarkedPipe();
-    component.text = 'Msg text';
-    component.color = 'black';
+    component.text = 'Msg text'
+    component.color= 'black'
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('printMessage should emit before and after and return text (input grezzo per la pipe)', () => {
-    spyOn(component.onBeforeMessageRender, 'emit');
-    spyOn(component.onAfterMessageRender, 'emit');
-    const out = component.printMessage('Hello', {} as any, component);
-    expect(out).toBe('Hello');
-    expect(component.onBeforeMessageRender.emit).toHaveBeenCalled();
-    expect(component.onAfterMessageRender.emit).toHaveBeenCalled();
-  });
-
-  it('should render message container with color style', () => {
-    const host = fixture.nativeElement as HTMLElement;
-    const el = host.shadowRoot!.querySelector('div.message_innerhtml') as HTMLElement;
-    expect(el).toBeTruthy();
-    expect(el.style.color).toBe('black');
-  });
-
-  describe('markdown (use case contenuto legittimo)', () => {
-    it('should render heading and bold from markdown', () => {
-      component.text = '# Title\n\n**Bold**';
-      fixture.detectChanges();
-      const html = shadowInnerHtml();
-      expect(html).toMatch(/<h1|<h2/i);
-      expect(html).toMatch(/<strong>|<b>/i);
-    });
-
-    it('should render unordered list from markdown', () => {
-      component.text = '- uno\n- due';
-      fixture.detectChanges();
-      const html = shadowInnerHtml();
-      expect(html).toMatch(/<ul/i);
-      expect(html).toMatch(/<li/i);
-    });
-
-    it('should render safe https link with rel=noopener (MarkedPipe renderer)', () => {
-      component.text = '[label](https://example.com/path)';
-      fixture.detectChanges();
-      const html = shadowInnerHtml();
-      expect(html).toContain('https://example.com/path');
-      expect(html).toContain('rel="noopener noreferrer"');
-      expect(html).toContain('target="_blank"');
-    });
-  });
-
-  describe('sicurezza / anti code-injection (stesso use case, solo marked)', () => {
-    it('should not leave raw script tags in DOM innerHTML', () => {
-      component.text = '<script>alert(1)</script>testo';
-      fixture.detectChanges();
-      const html = shadowInnerHtml();
-      expect(html.toLowerCase()).not.toContain('<script');
-      expect(html).toContain('&lt;');
-    });
-
-    it('should escape inline HTML img/onerror so it is not a live <img> node', () => {
-      component.text = 'Hi <img src=x onerror="alert(1)">';
-      fixture.detectChanges();
-      const html = shadowInnerHtml();
-      expect(html.toLowerCase()).not.toContain('<img');
-      expect(html).toContain('&lt;');
-    });
-
-    it('should not emit javascript: href for markdown link', () => {
-      component.text = '[bad](javascript:void(0))';
-      fixture.detectChanges();
-      const html = shadowInnerHtml();
-      expect(html).not.toMatch(/href=["']javascript:/i);
-    });
-
-    it('should not emit data: href for markdown link', () => {
-      component.text = '[bad](data:text/html,<script>alert(1)</script>)';
-      fixture.detectChanges();
-      const html = shadowInnerHtml();
-      expect(html).not.toMatch(/href=["']data:/i);
-    });
-
-    it('DOM innerHTML should match MarkedPipe applied to printMessage output (stessa pipeline del template)', () => {
-      component.text = 'Line1\n\n**x**';
-      fixture.detectChanges();
-      const raw = component.printMessage(component.text, {} as any, component);
-      const viaPipe = markedPipe.transform(raw) as string;
-      expect(shadowInnerHtml()).toBe(viaPipe);
-    });
-  });
 });

package/src/app/component/message-attachment/message-attachment.component.spec.ts

@@ -1,154 +1,33 @@
-import { CommonModule } from '@angular/common';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-
-import { MessageModel } from 'src/chat21-core/models/message';
-import { ActionButtonComponent } from '../message/buttons/action-button/action-button.component';
-import { LinkButtonComponent } from '../message/buttons/link-button/link-button.component';
-import { TextButtonComponent } from '../message/buttons/text-button/text-button.component';
+import { ActionButtonComponent } from './../message/buttons/action-button/action-button.component';
+import { TextButtonComponent } from './../message/buttons/text-button/text-button.component';
+import { LinkButtonComponent } from './../message/buttons/link-button/link-button.component';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MessageAttachmentComponent } from './message-attachment.component';
 
-function makeMessageWithAttachment(buttons: any[]): MessageModel {
-  return new MessageModel(
-    'm1',
-    'it',
-    'r1',
-    'Recipient',
-    's1',
-    'Sender',
-    200,
-    {},
-    'testo',
-    Date.now(),
-    'text',
-    {
-      attachment: {
-        type: 'template',
-        buttons,
-      },
-    },
-    'chat',
-    true,
-    false,
-  );
-}
-
 describe('MessageAttachmentComponent', () => {
   let component: MessageAttachmentComponent;
   let fixture: ComponentFixture<MessageAttachmentComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [CommonModule],
-      declarations: [
-        MessageAttachmentComponent,
-        LinkButtonComponent,
-        TextButtonComponent,
-        ActionButtonComponent,
-      ],
-    }).compileComponents();
+      declarations: [ 
+        MessageAttachmentComponent, 
+        LinkButtonComponent, 
+        TextButtonComponent, 
+        ActionButtonComponent 
+      ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(MessageAttachmentComponent);
     component = fixture.componentInstance;
-    component.isConversationArchived = false;
-    component.isLastMessage = true;
-    component.fullscreenMode = false;
-    component.limit = 5;
-    component.stylesMap = new Map<string, string>([
-      ['buttonFontSize', '14px'],
-      ['buttonBackgroundColor', '#eee'],
-      ['buttonTextColor', '#111'],
-      ['buttonHoverBackgroundColor', '#ddd'],
-      ['buttonHoverTextColor', '#000'],
-    ]);
+    fixture.detectChanges();
   });
 
   it('should create', () => {
-    component.message = makeMessageWithAttachment([]);
-    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
-
-  it('getAttachmentButton should read type and buttons from message.attributes.attachment', () => {
-    component.message = makeMessageWithAttachment([
-      { type: 'text', value: 'OK' },
-      { type: 'url', value: 'Apri', link: 'https://example.com' },
-    ]);
-    component.ngOnInit();
-    expect(component.type).toBe('template');
-    expect((component.buttons as unknown as any[]).length).toBe(2);
-  });
-
-  it('should render text and url attachment buttons in DOM when isLastMessage is true for text', () => {
-    component.message = makeMessageWithAttachment([
-      { type: 'text', value: 'Conferma' },
-      { type: 'url', value: 'Vai', link: 'https://example.com', target: '_blank' },
-    ]);
-    fixture.detectChanges();
-    const root = fixture.nativeElement.querySelector('#buttons-in-message') as HTMLElement;
-    expect(root).toBeTruthy();
-    expect(fixture.nativeElement.querySelector('chat-text-button-attachment')).toBeTruthy();
-    expect(fixture.nativeElement.querySelector('chat-link-button-attachment')).toBeTruthy();
-    const textBtn = fixture.nativeElement.querySelector('chat-text-button-attachment .text') as HTMLElement;
-    expect(textBtn.textContent?.trim()).toContain('Conferma');
-  });
-
-  it('should respect limit via slice (only first button when limit is 1)', () => {
-    component.limit = 1;
-    component.message = makeMessageWithAttachment([
-      { type: 'text', value: 'A' },
-      { type: 'text', value: 'B' },
-    ]);
-    fixture.detectChanges();
-    const textButtons = fixture.nativeElement.querySelectorAll('chat-text-button-attachment');
-    expect(textButtons.length).toBe(1);
-  });
-
-  it('should hide text and action buttons when isLastMessage is false', () => {
-    component.isLastMessage = false;
-    component.message = makeMessageWithAttachment([
-      { type: 'text', value: 'Nascosto' },
-      { type: 'url', value: 'Visibile', link: 'https://x.com' },
-    ]);
-    fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('chat-text-button-attachment')).toBeNull();
-    expect(fixture.nativeElement.querySelector('chat-link-button-attachment')).toBeTruthy();
-  });
-
-  it('returnOnAttachmentButtonClicked should emit structured event when target exists', () => {
-    component.message = makeMessageWithAttachment([{ type: 'text', value: 'X' }]);
-    fixture.detectChanges();
-    spyOn(component.onAttachmentButtonClicked, 'emit');
-    const inner = fixture.debugElement.query(By.css('chat-text-button-attachment .text'));
-    inner.triggerEventHandler('click', {});
-    expect(component.onAttachmentButtonClicked.emit).toHaveBeenCalled();
-    const arg = (component.onAttachmentButtonClicked.emit as jasmine.Spy).calls.mostRecent().args[0];
-    expect(arg.message).toBe(component.message);
-    expect(arg.target).toBeTruthy();
-  });
-
-  it('returnOnAttachmentButtonClicked should not emit when event has no target', () => {
-    component.message = makeMessageWithAttachment([{ type: 'text', value: 'X' }]);
-    fixture.detectChanges();
-    spyOn(component.onAttachmentButtonClicked, 'emit');
-    component.returnOnAttachmentButtonClicked({} as any);
-    expect(component.onAttachmentButtonClicked.emit).not.toHaveBeenCalled();
-  });
-
-  it('ngAfterViewInit should emit onElementRendered for attachment', () => {
-    spyOn(component.onElementRendered, 'emit');
-    component.message = makeMessageWithAttachment([{ type: 'url', value: 'L', link: 'https://a' }]);
-    fixture.detectChanges();
-    component.ngAfterViewInit();
-    expect(component.onElementRendered.emit).toHaveBeenCalledWith({ element: 'attachment', status: true });
-  });
-
-  it('should render action button when type is action and isLastMessage', () => {
-    component.message = makeMessageWithAttachment([{ type: 'action', value: 'Azione', action: 'reply' }]);
-    fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('chat-action-button-attachment')).toBeTruthy();
-  });
 });

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

@@ -1,25 +1,24 @@
-<div id="chat21-selection-department"
+<!-- <div id="chat21-modal-content modal-body"></div> -->
+<!-- tabindex="1200"-->
+
+<div id="chat21-selection-department" 
     #afSelectionDepartment
-    role="dialog"
+    tabindex="1200"
     aria-modal="true"
-    cdkTrapFocus
-    [cdkTrapFocusAutoCapture]="true"
-    [attr.aria-label]="g.LABEL_SELECT_TOPIC">
+    onFocus="document.querySelector('[start-focus-chat21-selection-department]').focus()">
 
     <!-- HEADER -->
-    <div class="c21-header" [ngStyle]="{'color': g.themeForegroundColor, 'background-image': g.colorGradient180 }">
+    <div class="c21-header" [ngStyle]="{'color': g.themeForegroundColor, 'background-image': g.colorGradient180 }" >
         <div class="c21-header-container">
 
-            <!-- ICON CLOSE PANEL -->
+            <!-- ICON CLOSE CHAT -->
             <div class="c21-header-button">
-                <div class="c21-close-button c21-small">
-                    <button type="button"
-                        [attr.aria-label]="g.BUTTON_CLOSE_TO_ICON || 'Close panel'"
-                        class="c21-close-button-body"
-                        (click)="closePage()">
-                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
+                <div class="c21-close-button c21-small" role="button">
+                    <button tabindex="1210" aria-label=" chiudi pannello" class="c21-close-button-body" (click)="closePage()">
+                        <svg role="img" aria-labelledby="altIconTitle" 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">{{BUTTON_CLOSE_CHAT}}</title> -->
                         </svg>
                     </button>
                 </div>
@@ -27,7 +26,9 @@
 
             <!-- CONTENT HEADER -->
             <div class="c21-header-content">
+                <!-- TITLE HEADER -->
                 <div class="c21-title" [ngStyle]="{'color': g.themeForegroundColor}">
+                    <!-- <span>{{g.LABEL_SELECT_TOPIC}}</span> -->
                 </div>
             </div>
 
@@ -39,17 +40,15 @@
         <div class="c21-body-container">
 
             <div class="c21-body-header">
-                <h2 start-focus-chat21-selection-department class="c21-message-field">{{g.LABEL_SELECT_TOPIC}}</h2>
+                <div start-focus-chat21-selection-department tabindex="1201" class="c21-message-field">{{g.LABEL_SELECT_TOPIC}}</div>
             </div>
 
-            <div class="c21-body-content">
+            <div class="c21-body-content" tabindex="211" onFocus="document.querySelector('[start-focus]').focus()">
                 <ul class="chat21-content-modal-select">
                     <li *ngFor="let department of departments; let i = index">
-                        <button type="button"
-                            class="c21-button-department c21-button-clean"
-                            (click)="onSelectDepartment(department)">
-                            <span class="chat21-badge" aria-hidden="true">{{i+1}}</span>
-                            <span class="chat21-name-list">{{department?.name}}</span>
+                        <button tabindex="1202" class="c21-button-department c21-button-clean" (click)="onSelectDepartment(department)">
+                            <span  class="chat21-badge">{{i+1}}</span>
+                            <span class="chat21-name-list" >{{department?.name}}</span>
                         </button>
                     </li>
                 </ul>
@@ -57,4 +56,7 @@
 
         </div>
     </div>
-</div>
+    
+    <span style="height:0px" tabindex="1299" onFocus="document.querySelector('[start-focus-chat21-selection-department]').focus()"></span> 
+</div> 
+