@chat21/chat21-ionic 3.0.107-rc.3 → 3.0.107-rc.5

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.scss

@@ -3,20 +3,20 @@
     -webkit-box-align: center;
     align-items: center;
     padding: 0px 16px 0px;
-    border-bottom: 1px solid rgb(239, 242, 246);
+    border-bottom: 1px solid var(--border-color-base);
     border-top: 3px solid var(--basic-blue);
 
     .section-option{
         line-height: 16px;
         letter-spacing: -0.01em;
-        color: rgb(100, 116, 145);
+        color: var(--icon-color);
         position: relative;
         display: flex;
         align-items: flex-end;
         border-radius: 4px;
 
         ion-button{
-            color: rgb(135, 150, 175);
+            color: var(--icon-color);
             font-size: 11px;
             margin: 2px;
             padding-bottom: 0px;
@@ -76,7 +76,7 @@
     margin: 0;
 
     ion-icon{
-        color: var(--basic-blue);
+        color: var(--icon-color);
     }
     .buttons-left {
         // position: absolute;
@@ -141,7 +141,7 @@
             // min-height: 30px;
             min-height: 37px; // NK edited
             max-height: 184px;
-            background-color: rgba(0, 0, 0, 0.05);
+            background-color: var(--textarea-background);
             // --padding-top: 5px; // NK edited
             --padding-top: 8px;
             --padding-bottom: 5px;
@@ -264,6 +264,17 @@
     right: -123px;
     width: 230px;
 }
+
+emoji-mart::ng-deep{
+    .emoji-mart{
+        background-color: var(--emojii-mart-background);
+        border-color: var(--emoji-mart-color);
+    }
+    .emoji-mart-category-label span{
+        background-color: var(--emojii-mart-background);
+        color: var(--emoji-mart-color);
+    }
+}
 //   input[placeholder] { text-overflow: ellipsis; }
 // ::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
 // input:-moz-placeholder { text-overflow: ellipsis; }

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

@@ -248,6 +248,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] - onFileSelected event', e);
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] - onFileSelected this.messageString ", this.messageString);
     this.msg = this.messageString
+    this.showEmojiPicker = false
     setTimeout(() => {
       this.messageString = "";
     }, 100);
@@ -257,16 +258,19 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   onOpenSection(section:string){
     this.section = section
+    this.showEmojiPicker = false
     this.onOpenFooterSection.emit(section)
   }
 
   onOpenEmailModal(){
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] - onOpenEmailModal');
+    this.showEmojiPicker = false
     this.presentEmailModal()
   }
 
   onOpenTemplateModal(){
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] - onOpenTemplateModal');
+    this.showEmojiPicker = false
     this.prensentTemplateModal();
   }
 
@@ -583,6 +587,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   openCannedResponses() {
     this.onClickOpenCannedResponses.emit();
+    this.showEmojiPicker = false;
   }
 
 

package/src/app/components/conversation-info/advanced-info-accordion/advanced-info-accordion.component.html

@@ -16,30 +16,22 @@
       <div class="attributes-icon-wpr-1">
         <div class="attributes-icon-wpr-2">
           <span class="material-icons">
-            {{ attr.icon }}
-            
+            {{ attr.icon }}   
           </span>
         </div>
       </div>
 
       <div class="attributes-title-subtitle-wpr-1">
-        <div class="attributes-title-subtitle-wpr-2">
-
-          <div class="attributes-title-subtitle-wpr-3">
-            <div class="attributes-title-wpr">
-              <span class="attributes-title">
-                <!-- {{ attr.key  }} -->
-                {{ translationMap?.get(attr.key) }}
-              </span>
-            </div>
-
-
-            <div class="attributes-subtitle-wpr">
-              <span class="attributes-subtitle">
-                {{ attr.value}}
-              </span>
-            </div>
-          </div>
+        <div class="attributes-title-wpr">
+          <span class="attributes-title">
+            <!-- {{ attr.key  }} -->
+            {{ translationMap?.get(attr.key) }}
+          </span>
+        </div>
+        <div class="attributes-subtitle-wpr">
+          <span class="attributes-subtitle">
+            {{ attr.value}}
+          </span>
         </div>
       </div>
     </div>

package/src/app/components/conversation-info/advanced-info-accordion/advanced-info-accordion.component.scss

@@ -1,8 +1,12 @@
 /* Style the buttons that are used to open and close the accordion panel */
 .advanced-info-accordion {
     transition: 0.4s;
-    --background-hover: #f5f7f9;
+    --background-hover: unset;
     --ripple-color: transparent;
+
+    ion-icon{
+        color: var(--icon-color);
+    }
 }
 
 /* Style the accordion panel. Note: hidden by default */
@@ -48,7 +52,7 @@
     position: absolute;
     left: 0px;
     text-transform: none;
-    color: #050505;
+    color: var(--icon-color);
 }
 .icon-with-background {
     vertical-align: middle;
@@ -65,6 +69,7 @@
 .attributes-wpr {
     position: relative;
     display: flex;
+    gap: 5px;
     justify-content: space-between;
     flex-grow: 1;
     align-items: center;
@@ -80,11 +85,15 @@
 .attributes-icon-wpr-2 {
     height: 36px;
     width: 36px;
-    background-color: #e4e6eb;
+    background-color: var(--icon-color);
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
+
+    span.material-icons{
+        color: var(--info-direct-detail-accordion-background);
+    }
 }
 
 .attributes-title-subtitle-wpr-1 {
@@ -92,27 +101,14 @@
     display: flex;
     justify-content: space-between;
     flex-grow: 1;
-    flex-direction: row;
-    align-items: center;
-}
-
-.attributes-title-subtitle-wpr-2 {
-    flex-direction: column;
-    padding-bottom: 12px;
-    flex-direction: column;
-    flex-grow: 1;
-    padding-left: 0;
-}
-.attributes-title-subtitle-wpr-3 {
-    display: flex;
     flex-direction: column;
-    margin-left: 5px;
+    align-items: flex-start;
 }
 
 .attributes-title {
     text-align: left;
     word-break: break-word;
-    color: #050505;
+    color: var(--info-direct-color-accordion-color-title);
     font-size: 0.9375rem;
     -webkit-font-smoothing: antialiased;
     font-weight: 500;
@@ -127,7 +123,7 @@
 }
 
 .attributes-subtitle {
-    color: #65676b;
+    color: var(--info-direct-color-accordion-color-subtitle);
     word-break: break-word;
     font-weight: normal;
     line-height: 1.2308;

package/src/app/components/conversation-info/info-direct/info-direct.component.scss

@@ -1,5 +1,5 @@
 ion-content{
-    --background: var(--list-bkg-color);
+    --background: var(--conversation-detail-background);
 }
 
 .member-profile {
@@ -17,7 +17,8 @@ ion-content{
         border-radius: 0;
         -webkit-box-shadow: none;
         box-shadow: none;
-        border-bottom: 1px solid rgba(169, 169, 169, 0.2);
+        background: transparent;
+        border-bottom: 1px solid var(--border-color-base);
     }
 
     .image-profile {
@@ -48,7 +49,7 @@ ion-content{
             user-select: text;
             font-family: "Roboto", "Helvetica Neue", sans-serif;
             -webkit-box-direction: normal;
-            color: #333333;
+            color: var(--info-text-color);
             font-weight: 500;
             font-size: 17px;
             box-sizing: border-box;
@@ -70,7 +71,7 @@ ion-content{
     margin-right: 8px !important;
 
     margin-top: 12px !important;
-    background-color: #fff;
+    background-color: var(--info-direct-detail-accordion-background);
     border-radius: 4px;
     box-shadow: rgba(0, 27, 71, 0.08) 0px 3px;
 
@@ -83,7 +84,7 @@ ion-content{
         width: 100%;
 
         &:hover{
-            background-color: #f5f7f9;
+            background-color: var(--info-direct-color-accordion-hover);
         }
     }
 

package/src/app/components/conversation-info/info-group/info-group.component.html

@@ -19,7 +19,7 @@
     </ion-card>
     
     <ion-list id="fake-members-list" *ngIf="displaySkeletonScreen">
-      <ion-item lines="none" *ngFor="let fake of generateFake(membersObjectLength)" style="margin-left:-3px">
+      <ion-item color="none" lines="none" *ngFor="let fake of generateFake(membersObjectLength)" style="margin-left:-3px">
         <ion-avatar slot="start">
           <ion-skeleton-text animated style="width: 44px; height: 44px;"></ion-skeleton-text>
         </ion-avatar>
@@ -33,7 +33,7 @@
   
     <!-- <pre style="font-size: 8px;"> {{member_array | json }} </pre>  <pre style="font-size: 8px;"> {{displaySkeletonScreen}} </pre> -->
     <ion-list id="members-list" *ngIf="groupDetail?.member_array?.length > 0 && !displaySkeletonScreen">
-      <ion-item lines="none" *ngFor='let member of groupDetail?.member_array'>
+      <ion-item color="none" lines="none" *ngFor='let member of groupDetail?.member_array'>
         <ion-avatar  slot="start" style="margin-right: 12px;"> 
           <app-avatar-profile [itemAvatar]=member></app-avatar-profile>
           <div class="status-icon-container" [class.mobile]="isMobile" >

package/src/app/components/conversation-info/info-group/info-group.component.scss

@@ -1,3 +1,7 @@
+ion-content{
+    --background: var(--conversation-detail-background);
+}
+
 .group-profile {
     ion-card {
         width: 100%;
@@ -6,7 +10,8 @@
         border-radius: 0;
         -webkit-box-shadow: none;
         box-shadow: none;
-        border-bottom: 1px solid rgba(169, 169, 169, 0.2);
+        border-bottom: 1px solid var(--border-color-base);
+        background: transparent;
 
         .image-profile {
             padding: 0 0 0 0;
@@ -28,7 +33,7 @@
                 user-select: text;
                 font-family: "Roboto", "Helvetica Neue", sans-serif;
                 -webkit-box-direction: normal;
-                color: #333333;
+                color: var(--info-text-color);
                 font-weight: 500;
                 font-size: 17px;
                 box-sizing: border-box;
@@ -75,6 +80,10 @@
         }
     }
 
+    ion-list{
+        background-color: transparent;
+    }
+
     
 
     // .member-profile {

package/src/app/components/conversation-info/info-support-group/info-support-group.component.html

@@ -3,5 +3,6 @@
         [src]="urlConversationSupportGroup"
         frameborder="0"
         allowfullscreen
-        id="iframeConsole">
+        id="iframeConsole"
+        (load)="onLoad(this)">
 </iframe>

package/src/app/components/conversation-info/info-support-group/info-support-group.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
+import { EventsService } from 'src/app/services/events-service';
+import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 
 // Logger
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
@@ -13,10 +15,14 @@ export class InfoSupportGroupComponent implements OnInit {
   @Input() urlConversationSupportGroup: any;
 
   private logger: LoggerService = LoggerInstance.getInstance();
-  constructor() { }
+  constructor(
+    private appStorageService: AppStorageService,
+    private events : EventsService
+  ) { }
 
   ngOnInit() {
     this.logger.log('InfoSupportGroupComponent - urlConversationSupportGroup: ', this.urlConversationSupportGroup);
+    this.events.subscribe('style', (data)=>this.loadStyle(data) )
   }
 
   ngOnDestroy() {
@@ -25,4 +31,41 @@ export class InfoSupportGroupComponent implements OnInit {
 
   }
 
+  onLoad(iframe){
+    let styleData = this.appStorageService.getItem('style')
+    console.log('styleeeeee', styleData)
+    if(styleData && styleData !== 'undefined'){
+      this.loadStyle(JSON.parse(styleData))
+    }
+  }
+
+
+  async loadStyle(data){
+    var iframeWin = <HTMLIFrameElement>document.getElementById("iframeConsole")
+    if(!data.parameter){
+      iframeWin.contentWindow.document.body.classList.remove('light')
+      iframeWin.contentWindow.document.body.classList.remove('dark')
+      iframeWin.contentWindow.document.body.classList.remove('custom')
+      let link = iframeWin.contentWindow.document.getElementById('themeCustom');
+      if(link){
+        link.remove();
+      }
+      return;
+    } 
+
+    // Create link
+    let link = iframeWin.contentWindow.document.createElement('link');
+    link.id= 'themeCustom'
+    link.href = data.parameter;
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.media='all';
+    
+    console.log('linkkkk', link, iframeWin.contentWindow.document)
+    let head = iframeWin.contentWindow.document.getElementsByTagName('head')[0];
+    head.appendChild(link);
+    iframeWin.contentWindow.document.body.classList.add(data.type) //ADD class to body element as theme type ('light', 'dark', 'custom')
+    return;
+  }
+
 }

package/src/app/components/conversations-list/header-conversations-list/header-conversations-list.component.html

@@ -1,6 +1,7 @@
 <ion-toolbar [class.mobile]="isMobile">
 
-  <ion-buttons *ngIf="isMobile || !supportMode" slot="start" style="height:60px">
+  <!-- *ngIf="isMobile || !supportMode" -->
+  <ion-buttons  slot="start" style="height:60px">
     <ion-button ion-button icon-only fill="clear" (click)="onOpenProfileInfo($event)">
       <ion-icon slot="icon-only" name="reorder-three-outline"></ion-icon>
     </ion-button>

package/src/app/components/conversations-list/header-conversations-list/header-conversations-list.component.scss

@@ -9,8 +9,9 @@ ion-toolbar {
         border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     }
 
-    ion-button{
-        --color: var(--basic-blue);
+    ion-button,
+    ion-title{
+        --color: var(--icon-color);
     }
 }
 

package/src/app/components/conversations-list/header-conversations-list-archived/header-conversations-list-archived.component.scss

@@ -1,14 +1,16 @@
 ion-toolbar {
     height: var(--header-height);   
+    --background: transparent;
     &:not(.mobile){
-        --background: var(--list-bkg-color);
+        // --background: var(--list-bkg-color);
         border: none;
     }
     &.mobile{
         border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     }
 
-    ion-button{
-        --color: var(--basic-blue);
+    ion-button,
+    ion-title{
+        --color: var(--icon-color);
     }
 }

package/src/app/components/conversations-list/header-conversations-list-unassigned/header-conversations-list-unassigned.component.scss

@@ -1,14 +1,16 @@
 ion-toolbar {
     height: var(--header-height);   
+    --background: transparent;
     &:not(.mobile){
-        --background: var(--list-bkg-color);
+        // --background: var(--list-bkg-color);
         border: none;
     }
     &.mobile{
         border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     }
 
-    ion-button{
-        --color: var(--basic-blue);
+    ion-button,
+    ion-title{
+        --color: var(--icon-color);
     }
 }

package/src/app/components/navbar/navbar.component.html

@@ -7,7 +7,7 @@
         <!-- test site -->
         <ng-container *ngIf="project">
           <button class="btn simulate-visitor-btn btn-success-no-boxshadow " (click)="testWidgetPage()">
-            <i class="material-icons" style="padding-top: 0px;font-size: 24px;">play_arrow</i>
+            <i class="material-icons">play_arrow</i>
             {{translationsMap?.get('NAVBAR.SIMULATE_VISITOR')}}
           </button>
         </ng-container>
@@ -31,17 +31,17 @@
                 </li> -->
   
                 <!--  ALL PROJECTS -->
-                <li (click)="onClickDropdownOption('allProjects')">
-                  <a style="cursor: pointer">
-                    <i class="material-icons" style="padding-right: 5px; margin-bottom: 2px; font-size: 20px">view_list</i>
+                <li (click)="onClickDropdownOption('allProjects')" class="all-projects">
+                  <a>
+                    <i class="material-icons">view_list</i>
                     {{translationsMap?.get('NAVBAR.VIEW_ALL_PROJECTS')}}
                   </a>
                 </li>
   
                 <!--  ADD PROJECT -->
-                <li id="navbar_create_prjct" *ngIf="MT === true" (click)="onClickDropdownOption('addProject')">
-                  <a style="cursor: pointer">
-                    <i class="material-icons" style="padding-right: 5px; margin-bottom: 2px; font-size: 20px">add_circle_outline </i>
+                <li id="navbar_create_prjct" *ngIf="MT === true" (click)="onClickDropdownOption('addProject')" class="add-project">
+                  <a>
+                    <i class="material-icons">add_circle_outline </i>
                     {{translationsMap?.get('NAVBAR.ADD_PROJECT')}}
                   </a>
                 </li>
@@ -49,10 +49,8 @@
                 <li class="divider"></li>
   
                 <!--  RECENT PROJECTS -->
-                <li>
-                  <span style="padding-left: 24px;font-size: 12px; color: rgb(118,149,165);font-weight: 400">
+                <li class="section-title">
                     {{translationsMap?.get('NAVBAR.RECENT_PROJECTS')}}
-                  </span>
                 </li>
                 <!-- 
                 ***** ngFor - reverse order of output using the index *****
@@ -71,10 +69,8 @@
 
                 <ng-container *ngIf="projects?.length > 5">
                   <li class="divider"></li>
-                  <li>
-                    <span style="padding-left: 24px;font-size: 12px; color: rgb(118,149,165);font-weight: 400">
-                      {{translationsMap?.get('NAVBAR.OTHER_PROJECTS')}}
-                    </span>
+                  <li class="section-title">
+                    {{translationsMap?.get('NAVBAR.OTHER_PROJECTS')}}
                   </li>
     
                   <!-- *ngFor="let prjct of projects?.slice().reverse() | slice:5:10; let i=index" -->

package/src/app/components/navbar/navbar.component.scss

@@ -2,13 +2,13 @@
     padding-top: 5px;
     z-index: 1;
     padding-bottom: 5px;
-    border-bottom: 1px solid #e7e7e7;
+    border-bottom: 1px solid var(--border-color-base);
     -webkit-font-smoothing: auto;
 }
 
 .navbar{
-    background-color: #fff;
-    color: #555;
+    background-color: var(--navbar-background);
+    color: var(--text-base-color);
     min-height: var(--nav-bar-heigth);
     transition: all 150ms ease 0s;
 }
@@ -62,10 +62,10 @@ ion-navbar{
     border-radius: 30px;
     font-family: 'Poppins';
 
-    box-shadow: unset!important;
-    text-transform: none!important;
-    background: #3ecf8e!important;
-    color: #fff;
+    box-shadow: unset;
+    text-transform: none;
+    background: var(--simulate-btn-background);
+    color: var(--simulate-btn-color);
 
 }
 
@@ -83,7 +83,7 @@ ion-navbar{
 
 .dropdown-toggle, .volume{
     background-color: transparent;
-    color: inherit;
+    color: var(--icon-color);
 
     padding: 0px 15px;
     font-weight: 400;
@@ -119,7 +119,7 @@ li{
     font-size: 14px;
     text-align: left;
     list-style: none;
-    background-color: #fff;
+    background-color: var(--dropdown-menu-background);
     -webkit-background-clip: padding-box;
     background-clip: padding-box;
 }
@@ -146,13 +146,30 @@ li{
     position: relative;
 
     .li-selected{
-        color: #4285f4;
-        background-color: #eee;
+        color: var(--dropdown-menu-selected-color);
+        background-color: var(--dropdown-menu-selected-background);
+    }
+
+    &.all-projects,
+    &.add-project{
+        color: var(--dropdown-menu-item-color);
+        i{
+            padding-right: 5px; 
+            margin-bottom: 2px; 
+            font-size: 20px
+        }
+    }
+
+    &.section-title{
+        padding-left: 24px;
+        font-size: 12px; 
+        color: var(--dropdown-section-title);
+        font-weight: 400
     }
 }
 
 .dropdown-menu .divider{
-    background-color: rgba(0,0,0,.12);
+    background-color: var(--dropdown-divider-color);
     margin: 5px 0;
 
     height: 1px;
@@ -170,10 +187,9 @@ li{
     clear: both;
     font-weight: 400;
     line-height: 1.42857143;
-    color: #333;
+    color: var(--dropdown-menu-color);
     white-space: nowrap;
     text-decoration: none;
-
     cursor: pointer;
 
     .material-icons {
@@ -181,9 +197,9 @@ li{
     }
 
     &:hover{
-        background-color: #3ea9f5;
-        color: #fff;
-        box-shadow: 0 12px 20px -10px rgba(62, 169, 245, 0.28), 0 4px 20px 0 rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(62, 169, 245, 0.2);
+        background-color: var(--dropdown-menu-hover-background);
+        color: var(--dropdown-menu-hover-color);
+        box-shadow: 0 12px 20px -10px rgba(var(--dropdown-menu-hover-color), 0.28), 0 4px 20px 0 rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(var(--dropdown-menu-hover-color), 0.2);
     }
 }