@chat21/chat21-web-widget 5.0.55 → 5.0.56-rc.2

package/src/app/component/conversation-detail/conversation-header/conversation-header.component.ts

@@ -1,9 +1,9 @@
-import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges, OnChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { Globals } from 'src/app//utils/globals';
 import { AppConfigService } from 'src/app/providers/app-config.service';
-import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 
 @Component({
   selector: 'chat-conversation-header',
@@ -48,18 +48,15 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   
   isButtonsDisabled = true;
   
-  // public isTypings = false;
   public isDirect = false;
   public writingMessage: string;
-  // public nameUserTypingNow: string;
-  private setTimeoutWritingMessages;
 
   subscriptions = [];
   
   membersConversation = ['SYSTEM'];
   heightStatus: string = 'min'
 
-  // text used within the html
+
   private API_URL: string;
   private logger: LoggerService = LoggerInstance.getInstance()
   constructor(
@@ -82,85 +79,12 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   }
 
   ngAfterViewInit() {
-    // this.isShowSpinner();
     this.logger.debug('[CONV-HEADER] --------ngAfterViewInit: conversation-header-------- ');
-    // this.appStorageService.setItem('activeConversation', this.conversation.uid);
-    // --------------------------- //
-    // after animation intro
-    // setTimeout(() => {
-      // this.initAll();
-      // this.setFocusOnId('chat21-main-message-context');
-
-      // this.g.currentConversationComponent = this;
-      // if (this.g.newConversationStart === true) {
-      //   this.onNewConversationComponentInit();
-      //   this.g.newConversationStart = false;
-      // }
-      //this.subscriptionTyping();
-      // if (this.afConversationComponent) {
-      //   this.afConversationComponent.nativeElement.focus();
-      // }
-      this.isButtonsDisabled = false;
-    // }, 300);
-    this.setSubscriptions();
-
+    this.isButtonsDisabled = false;
   }
 
-
-  // initializeTyping() {
-  //   this.logger.debug('[CONV-HEADER] membersconversation', this.membersConversation)
-  //   this.typingService.isTyping(this.idConversation, this.senderId, this.isDirect);
-    
-  // }
-
-  // /** */
-  private setSubscriptions() {
-    // const that = this;
-    // const conversationSelected = this.subscriptions.find(item => item.key === this.idConversation);
-    // if (!conversationSelected) {
-    //   const subscribeBSIsTyping =  this.typingService.BSIsTyping.subscribe((data: any) => {
-    //     this.logger.debug('[CONV-HEADER] ***** BSIsTyping *****', data);
-    //     if (data) {
-    //       const isTypingUid = data.uid; //support-group-...
-    //       if (this.idConversation === isTypingUid) {
-    //         that.subscribeTypings(data);
-    //       }
-    //     }
-    //   });
-    //   const subscribe = {key: this.idConversation, value: subscribeBSIsTyping };
-    //   this.subscriptions.push(subscribe);
-    // }
-  }
-
-  /** */
-  // subscribeTypings(data: any) {
-  //   const that = this;
-  //   try {
-  //     const key = data.uidUserTypingNow; 
-  //     this.nameUserTypingNow = null;
-  //     if (data.nameUserTypingNow) {
-  //       this.nameUserTypingNow = data.nameUserTypingNow;
-  //     }
-  //     this.logger.debug('[CONV-HEADER] subscribeTypings data:', data);
-  //     const userTyping = this.membersConversation.includes(key);
-  //     if ( !userTyping) {
-  //       this.isTypings = true;
-  //       clearTimeout(this.setTimeoutWritingMessages);
-  //       this.setTimeoutWritingMessages = setTimeout(() => {
-  //           that.isTypings = false;
-  //       }, 2000);
-  //     }
-  //   } catch (error) {
-  //     this.logger.error('[CONV-HEADER] error: ', error);
-  //   }
-
-  // }
-
-
   // =========== BEGIN: event emitter function ====== //
   returnHome() {
-    // this.appStorageService.removeItem('activeConversation');
-    // this.g.setParameter('activeConversation', null, false);
     this.onBack.emit();
   }
 
@@ -174,7 +98,6 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   }
 
   closeWidget() {
-    //this.g.setParameter('activeConversation', null, false);
     this.onCloseWidget.emit();
   }
   // =========== END: event emitter function ====== //
@@ -183,12 +106,10 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
     const url = this.API_URL + 'public/requests/' + this.idConversation + '/messages-user.html';
     const windowContext = this.windowContext;
     windowContext.open(url, '_blank');
-    // this.isMenuShow  = false;
     this.onMenuOptionShow.emit(false)
   }
   
   toggleSound() {
-    //this.isMenuShow  = false;
     this.onMenuOptionShow.emit(false)
     this.onSoundChange.emit(!this.soundEnabled)
   }
@@ -199,7 +120,6 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
 
   toggleMenu() {
     this.onMenuOptionShow.emit(!this.isMenuShow)
-    // this.isMenuShow = !this.isMenuShow;   
   }
 
   /**
@@ -218,15 +138,11 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   /**
    * elimino tutte le sottoscrizioni
    */
-  // tslint:disable-next-line:use-life-cycle-interface
   ngOnDestroy() {
     this.logger.debug('[CONV-HEADER] ngOnDestroy ------------------> this.subscriptions', this.subscriptions);
-    //this.appStorageService.removeItem('activeConversation');
-    // this.unsubscribe();
     this.unsubescribeAll()
   }
 
-
   /** */
   private unsubescribeAll() {
     this.logger.debug('[CONV-HEADER] unsubescribeAll: ', this.subscriptions);

package/src/app/component/conversation-detail/conversation-internal-frame/conversation-internal-frame.component.html

@@ -10,7 +10,7 @@
           <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z" />
           <title id="altIconTitle">{{ translationMap?.get('CLOSE') }}</title>
       </svg>
-  </button>
+    </button>
 
     <!-- ICON OPEN EXTERNAL -->
     <button *ngIf="openExternalLinkButton" tabindex="1530" class="c21-header-button c21-right c21-button-clean" (click)="returnOpenExternal()">
@@ -18,28 +18,19 @@
           width="24px" height="24px" viewBox="0 0 24 24">
           <path d="M0 0h24v24H0z" fill="none"/>
           <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
-          <!-- <title id="altIconTitle">{{ translationMap?.get('CLOSE') }}</title> -->
       </svg>
-  </button>
+    </button>
 
-  <!-- TITLE HEADER -->
-  <div class="c21-title" [ngStyle]="{'color': stylesMap?.get('foregroundColor') }">
-    <div class="titleText">{{button?.value}}</div>
-</div>
+    <!-- TITLE HEADER -->
+    <div class="c21-title" [ngStyle]="{'color': stylesMap?.get('foregroundColor') }">
+      <div class="titleText">{{button?.value}}</div>
+    </div>
   </div>
   <div class="c21-iframe">
     <div  *ngIf="!hideSpinner" class="lds-roller">
       <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
     </div>
-    <!-- <span *ngIf="!hideSpinner">
-      <div class="chat21-spinner active" id="chat21-spinner">
-          <div class="chat21-bounce1"></div>
-          <div class="chat21-bounce2"></div>
-          <div class="chat21-bounce3"></div>
-          <span>loading</span>
-      </div>
-    </span> -->
-    <!-- referrerpolicy="no-referrer" -->
+
     <iframe  id="contentFrame" #iframe allowfullscreen title="" width="100%" height="100%" style= "border:none;" [src] = "url" (load)="onIframeLoaded($event)" (error)="onError($event)"></iframe>
   </div>
 </div>

package/src/app/component/conversation-detail/conversation-internal-frame/conversation-internal-frame.component.ts

@@ -1,9 +1,9 @@
+import { animate, style, transition, trigger } from '@angular/animations';
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
-import { trigger, style, animate, transition } from '@angular/animations';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 
 @Component({
   selector: 'chat-internal-frame',
@@ -20,32 +20,8 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
           style({transform: 'translateX(0)', opacity: 1}),
           animate('400ms', style({transform: 'translateX(100%)', opacity: 0}))
         ])
-        // state('in', style({
-        //   transform: 'translateX(100%)',
-        //   opacity: 0
-        // })),
-        // state('out',   style({
-        //   transform: 'translateX(0)',
-        //   opacity: 1
-        // })),
-        // transition('in => out', animate('400ms', style({transform: 'translateX(0)', opacity: 1}))),
-        // transition('out => in', animate('400ms', style({transform: 'translateX(100%)', opacity: 0})))
       ]
     )
-    // trigger('enterAnimation', [
-    //   state('open', style({
-    //     opacity: 1,
-    //   })),
-    //   state('closed', style({
-    //     opacity: 1,
-    //   })),
-    //   transition('closed => open', [
-    //     animate('1s', style({transform: 'translateX(0)', opacity: 1}))
-    //   ]),
-    //   transition('open => closed', [
-    //     animate('0.5s', style({transform: 'translateX(100%)', opacity: 0}))
-    //   ]),
-    // ]),
   ]
 })
 export class ConversationInternalFrameComponent implements OnInit {

package/src/app/component/conversation-detail/conversation-preview/conversation-preview.component.html

@@ -37,8 +37,6 @@
 
     <div id="c21-footer">
       <div class="visible-text-area">
-        <!-- isFilePendingToUpload || -->
-        <!-- [attr.disabled] = "isFilePendingToLoad" -->
         <textarea 
           start-focus-chat21-conversation-preview-component
           inputTextArea 
@@ -55,18 +53,10 @@
           (paste)="onPaste($event)"
           placeholder="{{ translationMap?.get('LABEL_PLACEHOLDER') }}">
         </textarea>
-      
-        <!-- <chat-message-text-area
-          [text]="textInputTextArea"
-          (onChangeTextArea)="returnText($event)"
-        ></chat-message-text-area> -->
-      
+
       </div>
       <div tabindex="-1" class="chat21-textarea-button" id="chat21-button-send" [class.active]="!isFilePendingToLoad " (click)="onSendPressed($event)">
         <span class="v-align-center">
-            <!-- <svg xmlns="http://www.w3.org/2000/svg" [ngStyle]="{'fill': stylesMap?.get('themeColor') }" width="24" height="24" viewBox="0 0 28 28">
-                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
-            </svg> -->
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
               <path d="M1.8,18.9V1.7L22,10.3L1.8,18.9z M3.9,15.6l12.6-5.4L3.9,4.9v3.7l6.4,1.6l-6.4,1.6V15.6z M3.9,15.6V4.9v7V15.6z"/>
             </svg>

package/src/app/component/conversation-detail/conversation-preview/conversation-preview.component.scss

@@ -1,4 +1,4 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 
 
 :host .c21-content ::ng-deep > chat-image  {
@@ -22,7 +22,7 @@
     --modal-width: 80%;
 
     --content-height: 160px;
-    --border-radius: #{$chat-footer-border-radius};
+    --border-radius: #{var(--chat-footer-border-radius)};
 
     background-color: rgba(0,0,0,0.4);
     height: 100%;
@@ -194,7 +194,7 @@
             resize: horizontal;
             overflow-y: auto;
             box-sizing: border-box;
-            color: $black;
+            color: var(--black);
             min-width: 100%;
             outline: 0;
             resize: none;
@@ -247,7 +247,7 @@
         .visible-text-area {
             pointer-events: auto;
             border-radius: 10px;
-            background-color: $chat-footer-background-color;
+            background-color: var(--chat-footer-background-color);
             -webkit-box-flex: 1;
             width: 88%;
         }
@@ -256,7 +256,7 @@
             pointer-events: auto;
         }
         .chat21-textarea-button {
-            fill: $icon-fill-color;
+            fill: var(--icon-fill-color);
             pointer-events: auto;
         }
 

package/src/app/component/conversation-detail/conversation-preview/conversation-preview.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, EventEmitter, Output, ViewChild, ElementRef } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MIN_WIDTH_IMAGES } from 'src/app/utils/constants';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
@@ -47,7 +47,6 @@ export class ConversationPreviewComponent implements OnInit {
   ngOnInit() {
     this.logger.log('[LOADER-PREVIEW-PAGE] Hello!', this.textInputTextArea);
     this.setFocusOnId('chat21-main-message-context-preview')
-    // tslint:disable-next-line: prefer-for-of
     // this.selectedFiles = this.files;
     for (let i = 0; i < this.attachments.length; i++) {
       this.logger.log('[LOADER-PREVIEW-PAGE] ngOnInit', this.attachments[i])
@@ -171,15 +170,13 @@ export class ConversationPreviewComponent implements OnInit {
   onTextAreaChange(){
     this.resizeInputField();
     this.resizeModalHeight()
-    // this.setWritingMessages(this.textInputTextArea)
   }
 
   setFocusOnId(id) {
     setTimeout(function () {
         const textarea = document.getElementById(id);
         if (textarea) {
-            //   that.logger.debug('[CONV-FOOTER] 1--------> FOCUSSSSSS : ', textarea);
-            textarea.setAttribute('value', ' ');
+            textarea.setAttribute('value', '');
             textarea.focus();
         }
     }, 500);
@@ -188,7 +185,6 @@ export class ConversationPreviewComponent implements OnInit {
   resizeInputField() {
     try {
       const target = document.getElementById('chat21-main-message-context-preview') as HTMLInputElement;
-      //   that.logger.debug('[CONV-FOOTER] H:: this.textInputTextArea', (document.getElementById('chat21-main-message-context') as HTMLInputElement).value , target.style.height, target.scrollHeight, target.offsetHeight, target.clientHeight);
       target.style.height = '100%';
       if (target.value === '\n') {
         target.value = '';
@@ -198,18 +194,11 @@ export class ConversationPreviewComponent implements OnInit {
         target.style.minHeight = this.HEIGHT_DEFAULT;
 
       } else {
-        //   that.logger.debug('[CONV-FOOTER] PASSO 3');
         target.style.height = this.HEIGHT_DEFAULT;
-        // segno sto scrivendo
-        // target.offsetHeight - 15 + 'px';
       }
-      //this.setWritingMessages(target.value);
-      // this.onChangeTextArea.emit({textAreaEl: target, minHeightDefault: this.HEIGHT_DEFAULT})
     } catch (e) {
       this.logger.error('[LOADER-PREVIEW-PAGE] > Error :' + e);
     }
-    // tslint:disable-next-line:max-line-length
-    //   that.logger.debug('[CONV-FOOTER] H:: this.textInputTextArea', this.textInputTextArea, target.style.height, target.scrollHeight, target.offsetHeight, target.clientHeight);
   }
 
 
@@ -235,7 +224,6 @@ export class ConversationPreviewComponent implements OnInit {
   }
 
   private restoreTextArea() {
-    //   that.logger.debug('[CONV-FOOTER] AppComponent:restoreTextArea::restoreTextArea');
     this.resizeInputField();
     const textArea = (<HTMLInputElement>document.getElementById('chat21-main-message-context-preview'));
     this.textInputTextArea = ''; // clear the textarea
@@ -257,11 +245,6 @@ export class ConversationPreviewComponent implements OnInit {
     this.textInputTextArea = ((document.getElementById('chat21-main-message-context-preview') as HTMLInputElement).value);
     if (keyCode === 13) {
       if (this.textInputTextArea && this.textInputTextArea.trim() !== '') {
-        //   that.logger.debug('[CONV-FOOTER] sendMessage -> ', this.textInputTextArea);
-        // this.resizeInputField();
-        // this.messagingService.sendMessage(msg, TYPE_MSG_TEXT);
-        // this.setDepartment();
-        // this.textInputTextArea = replaceBr(this.textInputTextArea);
         this.onSendAttachment.emit(this.textInputTextArea);
         this.restoreTextArea();
       }

package/src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.html

@@ -1,45 +1,23 @@
 
 <!-- ******* EYE-CATCHER CARD  - DISPLAYED ONLY IS-MOBILE IS FALSE ******** -->
 <div *ngIf="!g.isOpenNewMessage" class="eye-catcher-card scale-in-center"
-[class.mobile]="g.isMobile"
-[ngClass]="{'c21-align-left' : g.align === 'left', 'c21-align-right' : g.align !== 'left'}"
-[ngStyle]="{ 'display':g.displayEyeCatcherCard,  'bottom': g.marginY+'px', 'left':(g.align==='left')?g.marginX+'px':'', 'right':(g.align==='right')?g.marginX+'px':'' }"
-(mouseenter) ="mouseEnter()" (mouseleave) ="mouseLeave()">
+    [class.mobile]="g.isMobile"
+    [ngClass]="{'c21-align-left' : g.align === 'left', 'c21-align-right' : g.align !== 'left'}"
+    [ngStyle]="{ 'display':g.displayEyeCatcherCard,  'bottom': g.marginY+'px', 'left':(g.align==='left')?g.marginX+'px':'', 'right':(g.align==='right')?g.marginX+'px':'' }">
 
-    
-
-    <!-- ******* EYE-CATCHER CLOSE BTN IF IS-MOBILE IS TRUE ******* -->
-    <!-- <div *ngIf="!g.isMobile">
-        <div class="eye-catcher-card-close-btn-img-is-mobile-wrapper" (click)="closeEyeCatcherCardWhenMobile()" 
-            [ngStyle]="{'display':displayEyeCatcherCardCloseBtnIsMobileWrapper}">
-            <img class="eye-catcher-card-close-btn-img-is-mobile" src="{{g.baseLocation}}/assets/images/tiledesk-chat-close-dark-gray.svg"/>
-        </div>
-    </div> -->
-
-    <!-- <button (click)="rotate()">Press me to rotate</button> -->
-    <!-- <div class="eye-catcher_row" (mouseenter) ="mouseEnter()" (mouseleave) ="mouseLeave()" (click)="openChatFromEyeCatcherCard()"> -->
     <div class="eye-catcher_row">
 
         <!-- ******* EYE-CATCHER CLOSE BTN IF IS-MOBILE IS FALSE ******** -->
-        <!-- <div> -->
-            <div class="eye-catcher-card-close-btn-wrapper">
-                <!-- [ngStyle]="{'display':displayEyeCatcherCardCloseBtnWrapper}" (mouseenter) ="mouseEnter()" (mouseleave) ="mouseLeave()"></div> 
-                [ngStyle]="{'display':displayEyeCatcherCardCloseBtn}"
-                -->
-                <div class="eye-catcher-card-close-btn" (click)="closeEyeCatcherCard()">
-                    <svg class="eye-catcher-card-close-btn-img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px">
-                        <path d="M0 0h24v24H0V0z" fill="none"/>
-                        <path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/>
-                    </svg>
-                    <!-- <img class="eye-catcher-card-close-btn-img" src="{{g.baseLocation}}/assets/images/tiledesk-chat-close.svg"/> -->
-                </div>
+        <div class="eye-catcher-card-close-btn-wrapper">
+            <div class="eye-catcher-card-close-btn" (click)="closeEyeCatcherCard()">
+                <svg class="eye-catcher-card-close-btn-img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px">
+                    <path d="M0 0h24v24H0V0z" fill="none"/>
+                    <path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/>
+                </svg>
             </div>
-        <!-- </div> -->
+        </div>
 
         <div class="eye-catcher_column ec_left" (click)="openChatFromEyeCatcherCard()">
-            <!-- <div class="eye-catcher-card-img-wrapper" [ngStyle]="{'background-color': g.themeColor }">
-                <img class="chat21-card-img" src="{{g.baseLocation}}/assets/images/tiledesk-chat-ballon-big-badge.svg"/>     
-            </div> -->
             <div [@rotatedState]='state' class="eye-catcher-card-emoticons-wrapper">
                 <span *ngIf="emoticon" class="chat21-card-emoticons">{{emoticon}}</span>
             </div>
@@ -49,16 +27,6 @@
             <div class="eye-catcher-card-text-wrapper">
                 <p class="eye-catcher-card-title">{{title}}</p>
                 
-                <!-- Need Help? -->
-                <!-- <p *ngIf="g.calloutTitle !== ''; else calloutTitle_placeholder" class="eye-catcher-card-title">
-                    {{ g.calloutTitle }}
-                </p>  
-                <ng-template #calloutTitle_placeholder>
-                    <p class="eye-catcher-card-title">
-                        {{ g.CALLOUT_TITLE_PLACEHOLDER }}
-                    </p>
-                </ng-template> -->
-
                 <!-- Click here and start chatting with us!  -->
                 <p *ngIf="g.calloutMsg !== ''; else calloutMsg_placeholder" class="eye-catcher-card-msg">
                     {{ g.calloutMsg }}

package/src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.scss

@@ -3,8 +3,7 @@
 * EYE-CATCHER CARD & EYE-CATCHER CARD CLOSE BTN
 * *********************************************  
 */ 
-@import 'src/app/sass/variables';
-// @import '../../../sass/variables';
+// @import 'src/app/sass/variables';
 
 
 

package/src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.ts

@@ -1,9 +1,8 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { Globals } from '../../utils/globals';
-import { isEmoji } from '../../utils/utils';
 
 
-import { trigger, state, style, animate, transition } from '@angular/animations';
+import { trigger } from '@angular/animations';
 import { LoggerService } from '../../../chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from '../../../chat21-core/providers/logger/loggerInstance';
 

package/src/app/component/form/form-builder/form-builder.component.html

@@ -38,7 +38,6 @@
     </span>
   </form>
 
-  <!-- [disabled]="!preChatFormGroupCustom?.valid" -->
   <div class="c21-new-conversation">
     <button [tabindex]="lastTabIndex"  class="c21-button-primary" 
     (click)="onSubmitPreChatForm()"

package/src/app/component/form/form-builder/form-builder.component.scss

@@ -1,4 +1,4 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 
 .c21-label-button {
     font-size: 1.2em !important;

package/src/app/component/form/form-builder/form-builder.component.ts

@@ -1,12 +1,11 @@
-import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { Component, EventEmitter, Input, OnInit, Output, SimpleChange } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import * as parser from 'accept-language-parser';
 import { FormArray } from 'src/chat21-core/models/formArray';
-import { Component, OnInit, SimpleChange, EventEmitter, Output, Input, ChangeDetectorRef } from '@angular/core';
-import { isString } from 'util';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { validateRegex } from 'src/chat21-core/utils/utils';
-import * as parser from 'accept-language-parser'
-import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 
 @Component({
   selector: 'chat-form-builder',

package/src/app/component/form/inputs/form-checkbox/form-checkbox.component.scss

@@ -32,10 +32,9 @@ input[type="checkbox"] {
     border: 1px solid var(--themeColor);
     border-radius:3px;
     -webkit-border-radius:3px;
-    -webkit-appearance: none;
+    appearance: none;
     -webkit-transition: box-shadow 200ms;
     transition: box-shadow 200ms;
-  
 }
 
 

package/src/app/component/form/inputs/form-checkbox/form-checkbox.component.ts

@@ -1,6 +1,5 @@
-import { Component, Input, OnInit, ElementRef, EventEmitter, Output, SimpleChanges } from '@angular/core';
-import { FormGroupDirective } from '@angular/forms';
-import { FormGroup } from '@angular/forms';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { FormGroup, FormGroupDirective } from '@angular/forms';
 import { FormArray } from '../../../../../chat21-core/models/formArray';
 
 @Component({

package/src/app/component/form/inputs/form-label/form-label.component.ts

@@ -1,4 +1,3 @@
-import { element } from 'protractor';
 import { Component, Input, OnInit } from '@angular/core';
 import { FormGroup, FormGroupDirective } from '@angular/forms';
 import { FormArray } from '../../../../../chat21-core/models/formArray';

package/src/app/component/form/inputs/form-text/form-text.component.scss

@@ -1,4 +1,4 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 
 :host {
 	--foregroundColor: #0000;
@@ -30,16 +30,6 @@
       background-color: #ffffff;
       vertical-align: middle;
   }
-  // input {
-  //     display: block;
-  //     padding: 11px 10px 8px 10px;
-  //     color: #616161;
-  //     font-size: 1.3em;
-  //     font-weight: 300;
-  //     line-height: 1.2em;
-  //     -webkit-box-shadow: none;
-  //     box-shadow: none;
-  // }
   input::placeholder {
       color: rgb(179, 182, 184);
       font-weight: initial;
@@ -102,11 +92,11 @@ input {
   background-size: 0 2px,100% 1px;
   background-repeat: no-repeat;
   background-position: center bottom,center calc(100% - 1px);
-  background-color:$chat-footer-background-color;
+  background-color: var(--chat-footer-background-color);
   transition: background 0s ease-out;
   float: none;
   box-shadow: none;
-  border-radius: $chat-footer-border-radius;
+  border-radius: var(--chat-footer-border-radius);
   font-weight: 400;
   height: 48px;
   padding: 0px 16px;

package/src/app/component/form/inputs/form-text/form-text.component.ts

@@ -1,5 +1,4 @@
-import { style } from '@angular/animations';
-import { Component, ElementRef, Input, OnInit, SimpleChange, ViewChild, OnChanges, Output, EventEmitter } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChange, ViewChild } from '@angular/core';
 import { FormGroup, FormGroupDirective } from '@angular/forms';
 import { FormArray } from '../../../../../chat21-core/models/formArray';
 

package/src/app/component/form/inputs/form-textarea/form-textarea.component.html

@@ -1,17 +1,4 @@
 <form [formGroup]="form">
-  <!-- <div class="c21-input-container" >
-    <input 
-      class="form-control" 
-      tabindex="1411" 
-      type="text" 
-      id="form-field-name" 
-      [formControlName]="element.name" 
-      [placeholder]="element.label"
-      [ngClass]="{'errors': form.controls[element.name].errors && form.controls[element.name].touched }">
-    <!- - <small [hidden]="form.controls[element.name].valid || form.controls[element.name].pristine">
-        Field required
-    </small> - ->
-  </div> -->
   <div class="form-group label-floating" id="div_input" #div_input
       [ngClass]="{'is-empty': !form?.controls[element.name]?.value}">
     <label class="control-label">

package/src/app/component/form/inputs/form-textarea/form-textarea.component.scss

@@ -1,4 +1,4 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 
 :host {
 	--foregroundColor: #0000;
@@ -96,14 +96,14 @@ textarea {
     background-size: 0 2px,100% 1px;
     background-repeat: no-repeat;
     background-position: center bottom,center calc(100% - 1px);
-    background-color: $chat-footer-background-color;
+    background-color: var(--chat-footer-background-color);
     transition: background 0s ease-out;
     float: none;
     box-shadow: none;
-    border-radius: $chat-footer-border-radius;
+    border-radius: var(--chat-footer-border-radius);
     font-weight: 400;
     // height: 36px;
-    padding: 0px 16px;
+    padding: 8px 16px;
     font-size: 14px;
     line-height: 1.42857143;
     display: block;