@chat21/chat21-ionic 2.0.13 → 3.0.5-9.2

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.ts

@@ -0,0 +1,215 @@
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MessageModel } from 'src/chat21-core/models/message';
+import { MAX_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { isFile, isFrame, isImage } from 'src/chat21-core/utils/utils-message';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { TranslateService } from '@ngx-translate/core';
+import * as moment from 'moment';
+@Component({
+  selector: 'chat-bubble-message',
+  templateUrl: './bubble-message.component.html',
+  styleUrls: ['./bubble-message.component.scss']
+})
+export class BubbleMessageComponent implements OnInit, OnChanges {
+
+  @Input() message: MessageModel;
+  @Input() textColor: string;
+  @Output() onBeforeMessageRender = new EventEmitter();
+  @Output() onAfterMessageRender = new EventEmitter();
+  @Output() onImageRendered = new EventEmitter<boolean>()
+  isImage = isImage;
+  isFile = isFile;
+  isFrame = isFrame;
+
+  public browserLang: string;
+
+  tooltipOptions = {
+    'show-delay': 500,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 200
+  };
+
+  private logger: LoggerService = LoggerInstance.getInstance()
+  constructor(
+    public sanitizer: DomSanitizer,
+    private translate: TranslateService) {
+    // console.log('BUBBLE-MSG Hello !!!!')
+  }
+
+  ngOnInit() {
+    this.browserLang = this.translate.getBrowserLang();
+    // console.log('BUBBLE-MSG ngOnInit browserLang ', this.browserLang)
+    if (this.browserLang) {
+      if (this.browserLang === 'it') {
+        // console.log('BUBBLE-MSG browserLang ', this.browserLang)
+        // moment.locale('it')
+
+        moment.locale('it', {
+          calendar: {
+            lastDay: '[Ieri alle] LT',
+            sameDay: '[Oggi alle] LT',
+            nextDay: '[Domani alle] LT',
+            lastWeek: '[Ultimo] dddd [alle] LT',
+            nextWeek: 'dddd [alle] LT',
+            sameElse: 'lll'
+          }
+        });
+
+      } else {
+        // console.log('BUBBLE-MSG browserLang ', this.browserLang)
+        // moment.locale('en')
+
+        moment.locale('en', {
+          calendar: {
+            lastDay: '[Yesterday at] LT',
+            sameDay: '[Today at] LT',
+            nextDay: '[Tomorrow at] LT',
+            lastWeek: '[last] dddd [at] LT',
+            nextWeek: 'dddd [at] LT',
+            sameElse: 'lll'
+          }
+        });
+      }
+    }
+
+
+
+    // const yesterday = moment().subtract(1, 'day')
+    // console.log('BUBBLE-MSG yesterday ', yesterday)
+
+  }
+
+  ngOnChanges() {
+    // console.log('BUBBLE-MSG Hello !!!! this.message ',  this.message)
+    if (this.message && this.message.metadata && typeof this.message.metadata === 'object') {
+      this.getMetadataSize(this.message.metadata)
+      // console.log('BUBBLE-MSG ngOnChanges message > metadata', this.message.metadata)
+    }
+
+  }
+
+
+  /**
+   *
+   * @param message
+   */
+  // getMetadataSize(metadata): any {
+  //   if(metadata.width === undefined){
+  //     metadata.width= MAX_WIDTH_IMAGES
+  //   }
+  //   if(metadata.height === undefined){
+  //     metadata.height = MAX_WIDTH_IMAGES
+  //   }
+  //   // const MAX_WIDTH_IMAGES = 300;
+  //   const sizeImage = {
+  //       width: metadata.width,
+  //       height: metadata.height
+  //   };
+  //   //   that.g.wdLog(['message::: ', metadata);
+  //   if (metadata.width && metadata.width > MAX_WIDTH_IMAGES) {
+  //       const rapporto = (metadata['width'] / metadata['height']);
+  //       sizeImage.width = MAX_WIDTH_IMAGES;
+  //       sizeImage.height = MAX_WIDTH_IMAGES / rapporto;
+  //   }
+  //   return sizeImage; // h.toString();
+  // }
+
+  getMetadataSize(metadata): any {
+    if (metadata.width === undefined) {
+      metadata.width = MAX_WIDTH_IMAGES
+    }
+    if (metadata.height === undefined) {
+      metadata.height = MAX_WIDTH_IMAGES
+    }
+
+    if (metadata.width && metadata.width < MAX_WIDTH_IMAGES) {
+      if (metadata.width <= 55) {
+        const ratio = (metadata['width'] / metadata['height']);
+        metadata.width = 200;
+        metadata.height = 200 / ratio;
+      } else if (metadata.width > 55) {
+        metadata.width = this.message.metadata.width;
+        metadata.height = this.message.metadata.height;
+      }
+    } else if (metadata.width && metadata.width > MAX_WIDTH_IMAGES) {
+      const ratio = (metadata['width'] / metadata['height']);
+      metadata.width = MAX_WIDTH_IMAGES;
+      metadata.height = MAX_WIDTH_IMAGES / ratio;
+    }
+  }
+
+
+
+
+  /**
+  * function customize tooltip
+  */
+  handleTooltipEvents(event) {
+    const that = this;
+    const showDelay = this.tooltipOptions['show-delay'];
+    setTimeout(function () {
+      try {
+        const domRepresentation = document.getElementsByClassName('chat-tooltip');
+        if (domRepresentation) {
+          const item = domRepresentation[0] as HTMLInputElement;
+          if (!item.classList.contains('tooltip-show')) {
+            item.classList.add('tooltip-show');
+          }
+          setTimeout(function () {
+            if (item.classList.contains('tooltip-show')) {
+              item.classList.remove('tooltip-show');
+            }
+          }, that.tooltipOptions['hideDelayAfterClick']);
+        }
+      } catch (err) {
+        that.logger.error('[BUBBLE-MESSAGE] handleTooltipEvents >>>> Error :' + err);
+      }
+    }, showDelay);
+  }
+
+  // ========= begin:: event emitter function ============//
+
+  // returnOpenAttachment(event: String) {
+  //   this.onOpenAttachment.emit(event)
+  // }
+
+  // /** */
+  // returnClickOnAttachmentButton(event: any) {
+  //   this.onClickAttachmentButton.emit(event)
+  // }
+
+  returnOnBeforeMessageRender(event) {
+    const messageOBJ = { message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component }
+    this.onBeforeMessageRender.emit(messageOBJ)
+  }
+
+  returnOnAfterMessageRender(event) {
+    const messageOBJ = { message: this.message, sanitizer: this.sanitizer, messageEl: event.messageEl, component: event.component }
+    this.onAfterMessageRender.emit(messageOBJ)
+  }
+
+  onImageRenderedFN(event) {
+    this.onImageRendered.emit(event)
+  }
+
+  // printMessage(message, messageEl, component) {
+  //   const messageOBJ = { message: message, sanitizer: this.sanitizer, messageEl: messageEl, component: component}
+  //   this.onBeforeMessageRender.emit(messageOBJ)
+  //   const messageText = message.text;
+  //   this.onAfterMessageRender.emit(messageOBJ)
+  //   // this.triggerBeforeMessageRender(message, messageEl, component);
+  //   // const messageText = message.text;
+  //   // this.triggerAfterMessageRender(message, messageEl, component);
+  //   return messageText;
+  // }
+
+  // ========= END:: event emitter function ============//
+
+
+}

package/src/app/chatlib/conversation-detail/message/buttons/action-button/action-button.component.html

@@ -0,0 +1,3 @@
+<div #actionButton id="actionButton" class="button-in-msg action" (click)="actionButtonAction()" title="{{button?.value}}">
+  {{button.value}}
+</div>

package/src/app/chatlib/conversation-detail/message/buttons/action-button/action-button.component.scss

@@ -0,0 +1,83 @@
+// @import '../../../../../sass/variables';
+
+div {
+    --bck-msg-sent: #62a8ea;
+    --col-msg-sent:#ffffff;
+    --light-white: #f7f7f7;
+    --black: #1a1a1a;
+    --gray: #aaaaaa;
+    --blue: rgb(42, 106, 193);
+}
+
+.button-in-msg {
+    padding: 8px 16px!important;
+    position: relative;
+    max-width: 300px;
+    min-width: inherit;
+    cursor: pointer;
+    border: 1px solid var(--blue);
+    border-radius: 20px;
+    margin: 3px;
+    background: transparent;
+    overflow: hidden;
+    font-family: 'Muli', sans-serif;
+    font-size: 15px;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    letter-spacing: -0.24px;
+    -webkit-font-smoothing: antialiased;
+    color: var(--blue);
+    line-height: 16px;
+}
+
+.action {
+    background: white;
+    transition: background-color .6s ease;
+    &:focus,
+    &:hover {
+        color: white;
+        background:  var(--blue);
+        .icon-button-action {
+            svg {
+                fill: white;
+            }
+        }
+    }
+    &:after {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+        top: 50%;
+        left: 50%;
+        transform-style: flat;
+        transform: translate3d(-50%,-50%,0);
+        background: rgba(white,.2);
+        border-radius: 100%;
+        transition: width .5s ease, height .5s ease;
+    }
+    &.active {
+        &:after {
+            width: 200px;
+            height: 200px;
+        }
+        
+    }
+    
+    // &:focus{
+    //     color: white;
+    //     background:  rgb(42, 106, 193);
+    // }
+    // &:hover {
+    //     transition: background-color .6s ease;
+    // //     color: white;
+    // //     background:  rgb(42, 106, 193);
+    // }
+    // &:active {
+    //     &:after {
+    //         width: 200px;
+    //         height: 200px;
+    //     }
+    // }
+}

package/src/app/chatlib/conversation-detail/message/buttons/action-button/action-button.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActionButtonComponent } from './action-button.component';
+
+describe('ActionButtonComponent', () => {
+  let component: ActionButtonComponent;
+  let fixture: ComponentFixture<ActionButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActionButtonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActionButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/chatlib/conversation-detail/message/buttons/action-button/action-button.component.ts

@@ -0,0 +1,37 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'chat-action-button-attachment',
+  templateUrl: './action-button.component.html',
+  styleUrls: ['./action-button.component.scss']
+})
+export class ActionButtonComponent implements OnInit {
+
+  @Input() button: any;
+  @Input() themeColor: string;
+  @Input() foregroundColor: string;
+  @Output() onButtonClicked = new EventEmitter();
+  public type: string = "action"
+  constructor(private elementRef: ElementRef) { }
+
+  ngOnInit() {
+    //decomment if element should have same color of themeColor and fregroundColor
+    // this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
+    // this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
+  }
+
+  actionButtonAction(){
+    if ( this.button && this.button.action && this.button.action !== '') {
+      const spanCheck = window.document.getElementById('actionButton');
+      if (spanCheck) {
+        spanCheck.classList.add('active');
+        setTimeout(function() {
+          spanCheck.classList.remove('active');
+        }, 400);
+      }
+      const event = { target: this, currentTarget: this}
+      this.onButtonClicked.emit(event);
+    }
+  }
+
+}

package/src/app/chatlib/conversation-detail/message/buttons/link-button/link-button.component.html

@@ -0,0 +1,24 @@
+<div class="button-in-msg url" (click)="actionButtonUrl()" title="{{button?.value}}"> 
+  <span *ngIf="button?.target !== 'self'" class="icon-button-action">
+    <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="12px" height="12px">
+      <path d="M0 0h24v24H0z" fill="none"/>
+      <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/>
+    </svg> -->
+    <svg style="transform: rotateZ(45deg);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px">
+      <path d="M0 0h24v24H0z" fill="none"/>
+      <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
+    </svg>
+  </span>
+  <span *ngIf="button?.target === 'self'" class="icon-button-action-self">
+    <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="12px" height="12px">
+      <path d="M0 0h24v24H0z" fill="none"/>
+      <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/>
+    </svg> -->
+    <svg style="transform: rotateZ(90deg);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px">
+      <path d="M0 0h24v24H0z" fill="none"/>
+      <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
+    </svg>
+  </span>
+  {{button?.value}} 
+  <div class="clear"></div>
+</div>  

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

@@ -0,0 +1,61 @@
+// @import '../../../../../sass/variables';
+
+div {
+    --bck-msg-sent: #62a8ea;
+    --col-msg-sent:#ffffff;
+    --light-white: #f7f7f7;
+    --black: #1a1a1a;
+    --gray: #aaaaaa;
+    --blue: rgb(42, 106, 193);
+}
+
+.button-in-msg {
+    padding: 8px 16px!important;
+    position: relative;
+    max-width: 300px;
+    min-width: inherit;
+    cursor: pointer;
+    border: 1px solid var(--blue);
+    border-radius: 20px;
+    margin: 3px;
+    background: transparent;
+    overflow: hidden;
+    font-family: 'Muli', sans-serif;
+    font-size: 15px;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    letter-spacing: -0.24px;
+    -webkit-font-smoothing: antialiased;
+    color: var(--blue);
+    line-height: 16px;
+}
+
+.url {
+    transition: background-color .6s ease;
+    .icon-button-action {
+        position: absolute;
+        top: -1px;
+        right: 1px;
+        svg {
+            fill: var(--blue);
+        }
+    }
+    .icon-button-action-self{
+        position: absolute;
+        right: 1px;
+        svg {
+            fill: var(--blue);
+        }
+    }
+    &:focus,
+    &:hover {
+        color: white;
+        background:  var(--blue);
+        .icon-button-action, .icon-button-action-self {
+            svg {
+                fill: white;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LinkButtonComponent } from './link-button.component';
+
+describe('LinkButtonComponent', () => {
+  let component: LinkButtonComponent;
+  let fixture: ComponentFixture<LinkButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LinkButtonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LinkButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/chatlib/conversation-detail/message/buttons/link-button/link-button.component.ts

@@ -0,0 +1,30 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'chat-link-button-attachment',
+  templateUrl: './link-button.component.html',
+  styleUrls: ['./link-button.component.scss']
+})
+export class LinkButtonComponent implements OnInit {
+
+  @Input() button: any;
+  @Input() themeColor: string;
+  @Input() foregroundColor: string;
+  @Output() onButtonClicked = new EventEmitter();
+  public type: string = "url"
+  constructor(private elementRef: ElementRef) { }
+
+  ngOnInit() {
+    //decomment if element should have same color of themeColor and fregroundColor
+    // this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
+    // this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
+  }
+
+  actionButtonUrl(){
+    if ( this.button && this.button.link && this.button.link !== '') {
+      const event = { target: this, currentTarget: this}
+      this.onButtonClicked.emit(event);
+    }
+  }
+
+}

package/src/app/chatlib/conversation-detail/message/buttons/text-button/text-button.component.html

@@ -0,0 +1,3 @@
+<div class="button-in-msg text" (click)="actionButtonText()" title="{{button?.value}}">
+  {{button?.value}}
+</div>

package/src/app/chatlib/conversation-detail/message/buttons/text-button/text-button.component.scss

@@ -0,0 +1,47 @@
+// @import '../../../../../sass/variables';
+div {
+    --bck-msg-sent: #62a8ea;
+    --col-msg-sent:#ffffff;
+    --light-white: #f7f7f7;
+    --black: #1a1a1a;
+    --gray: #aaaaaa;
+    --blue: rgb(42, 106, 193);
+}
+
+
+.button-in-msg {
+    padding: 8px 16px!important;
+    position: relative;
+    max-width: 300px;
+    min-width: inherit;
+    cursor: pointer;
+    border: 1px solid var(--blue);
+    border-radius: 20px;
+    margin: 3px;
+    background: transparent;
+    overflow: hidden;
+    font-family: 'Muli', sans-serif;
+    font-size: 15px;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    letter-spacing: -0.24px;
+    -webkit-font-smoothing: antialiased;
+    color: var(--blue);
+    line-height: 16px;
+}
+
+.text {
+    // color: rgb(42, 106, 193);
+    transition: background-color .6s ease;
+    &:focus,
+    &:hover {
+        color: white;
+        background: var(--blue);
+        .icon-button-action {
+            svg {
+                fill: var(--black);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextButtonComponent } from './text-button.component';
+
+describe('TextButtonComponent', () => {
+  let component: TextButtonComponent;
+  let fixture: ComponentFixture<TextButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TextButtonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TextButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/chatlib/conversation-detail/message/buttons/text-button/text-button.component.ts

@@ -0,0 +1,29 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+
+@Component({
+  selector: 'chat-text-button-attachment',
+  templateUrl: './text-button.component.html',
+  styleUrls: ['./text-button.component.scss']
+})
+export class TextButtonComponent implements OnInit {
+
+  @Input() button: any;
+  @Input() themeColor: string;
+  @Input() foregroundColor: string;
+  @Output() onButtonClicked = new EventEmitter();
+  public type: string = "text"
+  constructor(private elementRef: ElementRef) { }
+
+  ngOnInit() {
+    //decomment if element should have same color of themeColor and fregroundColor
+    // this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
+    // this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.foregroundColor);
+  }
+
+  actionButtonText(){
+    const event = { target: this, currentTarget: this}
+    this.onButtonClicked.emit(event)
+  }
+
+}

package/src/app/chatlib/conversation-detail/message/frame/frame.component.html

@@ -0,0 +1,3 @@
+<div  [ngStyle] = "{ 'max-width': '100%', 'width': width, 'height': height + 'px' }">
+  <iframe  allowfullscreen width = "100%" height = "100%" style= "border:none; border-radius: 8px 8px 0 0 " [src]="url" ></iframe>
+</div>

package/src/app/chatlib/conversation-detail/message/frame/frame.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FrameComponent } from './frame.component';
+
+describe('FrameComponent', () => {
+  let component: FrameComponent;
+  let fixture: ComponentFixture<FrameComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FrameComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FrameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/chatlib/conversation-detail/message/frame/frame.component.ts

@@ -0,0 +1,33 @@
+import { DomSanitizer } from '@angular/platform-browser';
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'chat-frame',
+  templateUrl: './frame.component.html',
+  styleUrls: ['./frame.component.scss']
+})
+export class FrameComponent implements OnInit {
+
+  @Input() metadata: any;
+  @Input() width: string;
+  @Input() height: string;
+  
+  url: any;
+  constructor(private sanitizer: DomSanitizer) { }
+
+  ngOnInit() {
+    if(this.metadata && this.metadata.src){
+      this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.metadata.src);
+    }
+    // this.width = this.getSizeImg(this.metadata).width;
+    // this.height = this.getSizeImg(this.metadata).height;
+  }
+  
+
+
+  ngOnDestroy(){
+    this.url = null;
+  }
+
+
+}