@chat21/chat21-ionic 3.0.55-RC6 → 3.0.57

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

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
 
 @Component({
-  selector: 'tiledeskwidget-image',
+  selector: 'chat-image',
   templateUrl: './image.component.html',
   styleUrls: ['./image.component.scss']
 })
@@ -11,17 +11,49 @@ export class ImageComponent implements OnInit {
   @Input() width: string;
   @Input() height: number;
   @Output() onImageRendered = new EventEmitter<boolean>();
+
   loading: boolean = true
+  tooltipMessage: string;
+
+  tooltipOptions = {
+    'show-delay': 0,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 200
+  };
 
   constructor() { }
 
   ngOnInit() {
+    this.getBrowserLanguageAndTranslateTooltipMsg()
+  }
+  getBrowserLanguageAndTranslateTooltipMsg() {
+    var userLang = navigator.language;
+    // console.log('Image COMP - userLang ', userLang)
+    if (userLang === 'en') {
+      this.tooltipMessage = "Click to download"
+    } else {
+      this.tooltipMessage = "Clicca per scaricare"
+    }
   }
 
-  onLoaded(event){
+  onLoaded(event) {
     this.loading = false
     this.onImageRendered.emit(true)
   }
 
-
+  downloadImage(url: string, fileName: string) {
+    // console.log('Image COMP - IMAGE URL ', url) 
+    // console.log('Image COMP - IMAGE FILENAME ', fileName) 
+    const a: any = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    document.body.appendChild(a);
+    a.style = 'display: none';
+    a.click();
+    a.remove();
+  }
 }

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

@@ -6,7 +6,7 @@ import { replaceEndOfLine } from 'src/chat21-core/utils/utils';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
 @Component({
-  selector: 'tiledeskwidget-info-message',
+  selector: 'chat-info-message',
   templateUrl: './info-message.component.html',
   styleUrls: ['./info-message.component.scss']
 })

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

@@ -0,0 +1,56 @@
+<div id="buttons-in-message">
+  
+  <span *ngFor="let button of buttons" class="div-button">
+      
+      <chat-text-button-attachment *ngIf="button.type === 'text' && isLastMessage === true" class="div-button"
+        [button]="button"
+        [themeColor]="stylesMap.get('themeColor')"
+        [foregroundColor]="stylesMap.get('foregroundColor')"
+        (onButtonClicked)="returnOnAttachmentButtonClicked($event)">
+      </chat-text-button-attachment>
+
+      <chat-link-button-attachment *ngIf="button.type === 'url'" class="div-button"
+        [button]="button"
+        [themeColor]="stylesMap.get('themeColor')"
+        [foregroundColor]="stylesMap.get('foregroundColor')"
+        (onButtonClicked)="returnOnAttachmentButtonClicked($event)">
+      </chat-link-button-attachment>
+
+      <chat-action-button-attachment *ngIf="button.type === 'action' && isLastMessage === true" class="div-button"
+        [button]="button"
+        [themeColor]="stylesMap.get('themeColor')"
+        [foregroundColor]="stylesMap.get('foregroundColor')"
+        (onButtonClicked)="returnOnAttachmentButtonClicked($event)">
+      </chat-action-button-attachment>
+
+      <!-- <div class="alt">{{button.value}}</div> -->
+      <!-- <div *ngIf="button.type === 'text' && isLastMessage === true" class="button-in-msg {{button.type}}" (click)="actionButtonText(button)" title="{{button.value}}">
+        {{button.value}}
+      </div> -->
+
+      <!-- <div *ngIf="button.type === 'url'" class="button-in-msg {{button.type}}" (click)="actionButtonUrl(button)" 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>
+        
+        {{button.value}} 
+        <div class="clear"></div>
+      </div>  -->
+
+      <!-- <div *ngIf="button.type === 'action' && isLastMessage === true" #actionButton id="actionButton" class="button-in-msg {{button.type}}" (click)="actionButtonAction(button)" title="{{button.value}}">
+        {{button.value}}
+      </div>  -->
+
+      <!-- <button tabindex="1413" [disabled]="!preChatFormGroup.controls.name.valid || !preChatFormGroup.controls.email.valid" class="c21-button-primary" (click)="openNewConversation()" [ngStyle]="{'background-color': g.themeColor, 'border-color': g.themeColor, 'color': g.themeForegroundColor }">
+        
+    </button> -->
+
+  </span>
+</div>

package/src/app/chatlib/conversation-detail/message/message-attachment/message-attachment.component.scss

@@ -0,0 +1,169 @@
+#buttons-in-message {
+    text-align: left;
+    display: block; 
+    margin-top: -6px;
+    margin-bottom: 5px;
+    height: auto;
+
+
+    .div-button {
+        display: inline-block;
+        .button-in-msg {
+            padding: 8px 16px!important;
+        }
+    }
+
+    
+    
+    
+    // .button-success {
+    //     background-color: white; 
+    //     color: #333333;
+    //     border: 1px solid rgb(28, 184, 65);
+    // }
+    // .button-error {
+    //     background-color: white; 
+    //     color: #333333;
+    //     border: 1px solid rgb(202, 60, 60);
+    // }
+    // .button-warning {
+    //     background-color: white; 
+    //     color: #333333;
+    //     border: 1px solid rgb(223, 117, 20);
+    // }
+    // .button-secondary {
+    //     background-color: white; 
+    //     color: #333333;
+    //     border: 1px solid rgb(66, 184, 221);
+    // }
+    // .button-success:hover {
+    //     color: white;
+    //     background: rgb(28, 184, 65);
+    // }
+    // .button-error:hover {
+    //     color: white;
+    //     background: rgb(202, 60, 60);
+    // }
+    // .button-warning:hover {
+    //     color: white;
+    //     background: rgb(223, 117, 20);
+    // }
+    // .button-secondary:hover {
+    //     color: white;
+    //     background: rgb(66, 184, 221);
+    // } 
+}
+
+
+.button-in-msg {
+    position: relative;
+    max-width: 300px;
+    min-width: inherit;
+    cursor: pointer;
+    border: 1px solid rgb(42, 106, 193);
+    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: rgb(42, 106, 193);
+    line-height: 16px;
+    // &:focus,
+    // &:hover {
+    //     color: white;
+    //     background:  rgb(42, 106, 193);
+    // }
+
+    
+    &.text {
+        // color: rgb(42, 106, 193);
+        transition: background-color .6s ease;
+        &:focus,
+        &:hover {
+            color: white;
+            background:  rgb(42, 106, 193);
+            .icon-button-action {
+                svg {
+                    fill: rgb(255,255,255);
+                }
+            }
+        }
+    }
+    &.url {
+        transition: background-color .6s ease;
+        .icon-button-action {
+            position: absolute;
+            top: -1;
+            right: 1;
+            svg {
+                fill: rgb(42, 106, 193);
+            }
+        }
+        &:focus,
+        &:hover {
+            color: white;
+            background:  rgb(42, 106, 193);
+            .icon-button-action {
+                svg {
+                    fill: rgb(255,255,255);
+                }
+            }
+        }
+    }
+    &.action {
+        background:  rgb(255,255,255);
+        transition: background-color .6s ease;
+        &:focus,
+        &:hover {
+            color: white;
+            background:  rgb(42, 106, 193);
+            .icon-button-action {
+                svg {
+                    fill: rgb(255,255,255);
+                }
+            }
+        }
+        &: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/message-attachment/message-attachment.component.spec.ts

@@ -0,0 +1,33 @@
+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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessageAttachmentComponent } from './message-attachment.component';
+
+describe('MessageAttachmentComponent', () => {
+  let component: MessageAttachmentComponent;
+  let fixture: ComponentFixture<MessageAttachmentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ 
+        MessageAttachmentComponent, 
+        LinkButtonComponent, 
+        TextButtonComponent, 
+        ActionButtonComponent 
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessageAttachmentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,80 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+// models
+import { MessageModel } from 'src/chat21-core/models/message';
+
+@Component({
+  selector: 'chat-message-attachment',
+  templateUrl: './message-attachment.component.html',
+  styleUrls: ['./message-attachment.component.scss']
+})
+export class MessageAttachmentComponent implements OnInit {
+
+  // ========= begin:: Input/Output values ============//
+  @Output() onAttachmentButtonClicked = new EventEmitter<any>();
+  @Input() message: MessageModel;
+  @Input() isLastMessage: boolean;
+  @Input() stylesMap: Map<string, string>;
+  // ========= end:: Input/Output values ============//
+
+  public type: string;
+  public buttons: [any];
+
+  constructor() { }
+
+  ngOnInit() {
+    this.getAttachmentButton();
+  }
+
+  /** */
+  getAttachmentButton() {
+    if (this.message && this.message.attributes && this.message.attributes.attachment) {
+      try {
+        this.type = this.message.attributes.attachment.type;
+        // console.log(this.type);
+      } catch (error) {
+        // this.g.wdLog(['> Error :' + error]);
+        return;
+      }
+      try {
+        this.buttons = this.message.attributes.attachment.buttons;
+      } catch (error) {
+        // this.g.wdLog(['> Error :' + error]);
+        return;
+      }
+    }
+  }
+
+  returnOnAttachmentButtonClicked(event: any){
+    if ( event && event.target ) {
+      const ev = {target: event.target, message: this.message, currentTarget: this }
+      this.onAttachmentButtonClicked.emit(ev);
+    }
+  }
+
+  // actionButtonText(event: any) {
+  //   if ( event ) {
+  //     this.eventOpenAttachment.emit(event.value);
+  //   }
+  // }
+
+  /** */
+  // actionButtonUrl(event: any) {
+  //   if ( event && event.link && event.link !== '') {
+  //     this.eventClickOnAttachmentButton.emit(event);
+  //   }
+  // }
+
+  // actionButtonAction(event: any) {
+  //   if ( event && event.action && event.action !== '') {
+  //     const spanCheck = window.document.getElementById('actionButton');
+  //     if (spanCheck) {
+  //       spanCheck.classList.add('active');
+  //       setTimeout(function() {
+  //         spanCheck.classList.remove('active');
+  //       }, 400);
+  //     }
+  //     this.eventClickOnAttachmentButton.emit(event);
+  //   }
+  // }
+}

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

@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { MSG_STATUS_RETURN_RECEIPT, MSG_STATUS_SENT, MSG_STATUS_SENT_SERVER } from 'src/chat21-core/utils/constants';
 
 @Component({
-  selector: 'tiledeskwidget-return-receipt',
+  selector: 'chat-return-receipt',
   templateUrl: './return-receipt.component.html',
   styleUrls: ['./return-receipt.component.scss']
 })

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

@@ -1,4 +1,5 @@
-<p [ngStyle] = "{ 'width': media_width +'px'  }" #messageEl class="message_innerhtml marked" 
+<!-- [ngStyle] = "{ 'width': message.type === 'image' ? media_width +'px' : ''  }" -->
+<p  #messageEl class="message_innerhtml marked"  
     [innerHTML]="printMessage(text, messageEl, this) | htmlEntiesEncode  | marked"
     [ngStyle]="{'color': '$'+ color }">
 </p>

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

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, Sanitizer } from '@angular/core';
 import { MAX_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
 @Component({
-  selector: 'tiledeskwidget-text',
+  selector: 'chat-text',
   templateUrl: './text.component.html',
   styleUrls: ['./text.component.scss']
 })
@@ -36,7 +36,7 @@ export class TextComponent implements OnInit {
 
   ngOnChanges() {
     if (this.message.type === 'image') {
-      console.log('TextComponent message ', this.message)
+      // console.log('TextComponent message ', this.message)
       if (this.message.metadata.width && this.message.metadata.width > MAX_WIDTH_IMAGES) {
 
         const ratio = (this.message.metadata['width'] / this.message.metadata['height']);
@@ -44,11 +44,11 @@ export class TextComponent implements OnInit {
         this.media_width = MAX_WIDTH_IMAGES;
         this.media_height = MAX_WIDTH_IMAGES / ratio;
 
-        console.log('TextComponent media_width ', this.media_width, ' media_height' ,  this.media_height)
+        // console.log('TextComponent media_width ', this.media_width, ' media_height' ,  this.media_height)
       } else {
         this.media_width = this.message.metadata.width;
         this.media_height = this.message.metadata.height;
-        console.log('TextComponent media_width ', this.media_width, ' media_height' ,  this.media_height)
+        // console.log('TextComponent media_width ', this.media_width, ' media_height' ,  this.media_height)
       }
     }
   }

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -22,15 +22,38 @@
   </div>
 </div> -->
 
+<!-- -------------------------------------------------------------------------- -->
+<!-- New   <ion-spinner class="spinner-middle" style="margin-left: 19px;"></ion-spinner> -->
+<!-- -------------------------------------------------------------------------- -->
+<ion-item *ngIf="isOnline === false" button="true" lines="none" class="ion-no-padding waiting-for-connection">
+  <ion-avatar item-start>
+    <div class="sk-fading-circle">
+      <div class="sk-circle1 sk-circle"></div>
+      <div class="sk-circle2 sk-circle"></div>
+      <div class="sk-circle3 sk-circle"></div>
+      <div class="sk-circle4 sk-circle"></div>
+      <div class="sk-circle5 sk-circle"></div>
+      <div class="sk-circle6 sk-circle"></div>
+      <div class="sk-circle7 sk-circle"></div>
+      <div class="sk-circle8 sk-circle"></div>
+      <div class="sk-circle9 sk-circle"></div>
+      <div class="sk-circle10 sk-circle"></div>
+      <div class="sk-circle11 sk-circle"></div>
+      <div class="sk-circle12 sk-circle"></div>
+    </div>
+  </ion-avatar>
+  <ion-label part="message-text" class="waiting-for-network-msg"> Waiting for network</ion-label>
+</ion-item>
 
-<ion-item button="true" lines="none" class="ion-no-padding"  [class.ion-selected]="conversation.uid === uidConvSelected" *ngFor="let conversation of listConversations"
-  (click)="openConversationByID(conversation)">
-  <!-- (mouseup)="openMessageList()" -->
+<ion-item button="true" lines="none" class="ion-no-padding" [class.ion-selected]="conversation.uid === uidConvSelected"
+  *ngFor="let conversation of listConversations" (click)="openConversationByID(conversation)">
+  <div tabindex="0"></div>
 
- 
   <!-- <div [class.selected]="conversation.uid === uidConvSelected"></div> -->
   <ion-avatar item-start>
-    <div #avatarPlaceholder class="avatar-placeholder" [style.background-color]="conversation.color"
+    <!-- [style.background-color]="conversation.color"  -->
+    <div #avatarPlaceholder class="avatar-placeholder"
+      [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + conversation.color + ')'}"
       [innerHTML]="conversation.avatar"></div>
     <div *ngIf="conversation.image" #avatarImage class="avatar-profile"
       [style.background-image]="'url(' + conversation.image + ')'"></div>
@@ -50,12 +73,14 @@
         [innerHTML]="conversation.last_message_text"></p> -->
 
       <!-- <div *ngIf="conversation.type === 'image'" class="icon-image-before-msg-wpr"> -->
-      <ion-icon *ngIf="conversation.type === 'image' && conversation.type !== 'file' " name="image-outline" class="icon-image-before-msg"></ion-icon>
-      <ion-icon *ngIf="conversation.type === 'file'  && conversation.type !== 'image'" name="attach-outline" class="icon-attach-before-msg"></ion-icon>
+      <ion-icon *ngIf="conversation.type === 'image' && conversation.type !== 'file' " name="image-outline"
+        class="icon-image-before-msg"></ion-icon>
+      <ion-icon *ngIf="conversation.type === 'file'  && conversation.type !== 'image'" name="attach-outline"
+        class="icon-attach-before-msg"></ion-icon>
       <!-- </div> -->
       <!-- [innerHTML]="conversation.last_message_text" -->
       <span [class.not-read]="conversation.is_new">
-       {{ conversation.last_message_text }} 
+        {{ conversation.last_message_text }}
       </span>
     </div>
   </ion-label>
@@ -78,20 +103,22 @@
 
   <div item-end *ngIf="conversation?.archived" class="achived-icon-wpr">
     <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') === currentYear" class="time-in-archived">
-      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp | amDateFormat:'MMM DD')}}
-     
+      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp |
+      amDateFormat:'MMM DD')}}
+
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM'}} -->
     </span>
     <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') !== currentYear" class="time-in-archived">
-      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp | amDateFormat:'MMM DD YYYY')}}
+      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp |
+      amDateFormat:'MMM DD YYYY')}}
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM YYYY'}} -->
     </span>
     <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i>
   </div>
 
   <!-- && !conversation?.archived -->
-  <div item-end class="notification_point"
-    [ngClass]="{'notification_point-on-desktop': !isApp }" *ngIf="conversation.is_new">
+  <div item-end class="notification_point" [ngClass]="{'notification_point-on-desktop': !isApp }"
+    *ngIf="conversation.is_new">
   </div>
 
 </ion-item>