@chat21/chat21-web-widget 5.0.52 → 5.0.53-rc.2

package/.github/workflows/docker-community-push-latest.yml

@@ -19,4 +19,5 @@ jobs:
         username: ${{ secrets.DOCKERHUB_USERNAME }}
         password: ${{ secrets.DOCKERHUB_TOKEN }}
         repository: chat21/chat21-web-widget
+        push: true
         tags: latest

package/.github/workflows/docker-image-tag-community-tag-push.yml

@@ -18,4 +18,5 @@ jobs:
         username: ${{ secrets.DOCKERHUB_USERNAME }}
         password: ${{ secrets.DOCKERHUB_TOKEN }}
         repository: chat21/chat21-web-widget
+        push: true
         tag_with_ref: true

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.53-rc.2
+- added: angular 15 engine
+- added: custom tooltip directive
+- changed: buildOptimization ng build parameter to build-optimization
+- removed: ng2-tooltip-directive and ng2-tooltip-directive-ng13fix
+- removed: initializatoin of abstract variables in chat21-core abstract providers
+- removed: enableIvy parameter from tsconfig.json
+
+### 5.0.53-rc.1
+- added: Rules class (work in progress)
+- added: base_script.html to load element inside tiledesk-iframe
+- added: getLoggerConfig to logger service
+- removed: document.write() injection
+- removed: unused html test file
+
+
 ### 5.0.52 in PROD
 
 ### 5.0.52-rc.4

package/Dockerfile

@@ -1,7 +1,7 @@
 ### STAGE 1: Build ###
 
 # We label our stage as ‘builder’
-FROM node:12.20.2-alpine as builder
+FROM node:14.21.2-alpine as builder
 
 COPY package.json package-lock.json ./
 
@@ -15,7 +15,7 @@ COPY . .
 
 ## Build the angular app in production mode and store the artifacts in dist folder
 
-RUN npm run ng build -- --configuration="prod" --output-path=dist --base-href="./" --output-hashing=none --buildOptimizer=false --vendor-chunk
+RUN npm run ng build -- --configuration="prod" --output-path=dist --base-href="./" --output-hashing=none --build-optimizer=false --vendor-chunk
 
 
 ### STAGE 2: Setup ###

package/angular.json

@@ -1,7 +1,6 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
-  "defaultProject": "widget",
   "newProjectRoot": "projects",
   "projects": {
     "widget": {
@@ -27,13 +26,11 @@
               "src/favicon.ico",
               "src/assets",
               "src/test.html",
-              "src/test-buttons.html",
-              "src/test-auth.html",
-              "src/test-auth-remote.html",
               "src/test-new.html",
               "src/test-custom-auth.html",
               "src/tiledesk.js",
               "src/launch.js",
+              "src/base_script.html",
               "src/iframe-style.css",
               "src/widget-config-template.json",
               "src/widget-config.json",
@@ -45,14 +42,13 @@
             ],
             "styles": [
               "src/app/sass/styles.scss",
-              "node_modules/@ctrl/ngx-emoji-mart/picker.css",
-              "node_modules/bootstrap/dist/js/bootstrap.min.js",
-              "node_modules/popper.js/dist/umd/popper.min.js"
+              "node_modules/@ctrl/ngx-emoji-mart/picker.css"
             ],
             "scripts": [
               "src/assets/js/mqtt/4.2.6/mqtt.min.js",
               "node_modules/jquery/dist/jquery.min.js",
-              "node_modules/bootstrap/dist/js/bootstrap.min.js"
+              "node_modules/bootstrap/dist/js/bootstrap.min.js",
+              "node_modules/popper.js/dist/umd/popper.min.js"
             ],
             "vendorChunk": true,
             "extractLicenses": false,
@@ -161,19 +157,6 @@
             "codeCoverage": true
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {

package/deploy_amazon_beta.sh

@@ -2,7 +2,7 @@
 version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
-ng build --configuration="pre" --aot=true --base-href --output-hashing none --buildOptimizer=true
+ng build --configuration="pre" --aot=true --base-href --output-hashing none --build-optimizer=true
 
 # ########## --->>>> NATIVE-MQTT folder START <<<<<------ ########## #
 

package/deploy_amazon_prod.sh

@@ -3,7 +3,7 @@ version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
 # --build-optimizer=false if localstorage is disabled (webview) appears https://github.com/firebase/angularfire/issues/970
-ng build --configuration="prod" --aot=true --base-href --output-hashing none --buildOptimizer=true --vendor-chunk=true
+ng build --configuration="prod" --aot=true --base-href --output-hashing none --build-optimizer=true --vendor-chunk=true
 
 cd dist
 # aws s3 sync . s3://tiledesk-widget/v5/latest/

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.52",
+  "version": "5.0.53-rc.2",
   "license": "MIT License",
   "homepage": "https://www.tiledesk.com",
   "repository": {
@@ -18,18 +18,18 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^12.2.16",
-    "@angular/cdk": "^12.2.13",
-    "@angular/common": "^12.2.16",
-    "@angular/compiler": "~12.2.16",
-    "@angular/core": "~12.2.16",
-    "@angular/forms": "~12.2.16",
-    "@angular/localize": "^12.2.16",
-    "@angular/platform-browser": "^12.2.16",
-    "@angular/platform-browser-dynamic": "~12.2.16",
-    "@angular/router": "~12.2.16",
+    "@angular/animations": "^15.0.4",
+    "@angular/cdk": "^15.0.3",
+    "@angular/common": "^15.0.4",
+    "@angular/compiler": "^15.0.4",
+    "@angular/core": "^15.0.4",
+    "@angular/forms": "^15.0.4",
+    "@angular/localize": "^15.0.4",
+    "@angular/platform-browser": "^15.0.4",
+    "@angular/platform-browser-dynamic": "^15.0.4",
+    "@angular/router": "^15.0.4",
     "@ctrl/ngx-emoji-mart": "^5.1.2",
-    "@ngx-translate/core": "^12.1.2",
+    "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^4.0.0",
     "@popperjs/core": "^2.11.5",
     "@types/marked": "^4.0.3",
@@ -41,7 +41,6 @@
     "jquery": "^3.6.0",
     "marked": "^4.0.16",
     "moment": "^2.29.3",
-    "ng2-tooltip-directive": "^2.10.3",
     "ngx-logger": "^5.0.11",
     "ngx-moment": "^6.0.2",
     "popper.js": "^1.16.1",
@@ -51,10 +50,10 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.17",
-    "@angular/cli": "~12.2.17",
-    "@angular/compiler-cli": "~12.2.16",
-    "@angular/language-service": "~12.2.16",
+    "@angular-devkit/build-angular": "^15.0.4",
+    "@angular/cli": "^15.0.4",
+    "@angular/compiler-cli": "^15.0.4",
+    "@angular/language-service": "^15.0.4",
     "@types/jasmine": "^3.6.11",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
@@ -69,6 +68,6 @@
     "protractor": "~7.0.0",
     "ts-node": "~7.0.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.3.5"
+    "typescript": "4.8.4"
   }
 }

package/src/app/app.component.scss

@@ -5,7 +5,7 @@
 @import 'src/app/sass/variables';
 @import url('./sass/animations.scss');
 @import url("./sass/hover.css");
-@import '~@ctrl/ngx-emoji-mart/picker';
+@import '@ctrl/ngx-emoji-mart/picker';
 // @import "~bootstrap/dist/css/bootstrap.css";
 /** custom scroll bar **/
 input, select:focus, textarea {
@@ -47,15 +47,6 @@ input, select:focus, textarea {
     --button-in-msg-font-size: 15px;
 }
 
-.chat-tooltip {
-    font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
-    font-size: 12px;
-    font-style: normal;
-    letter-spacing: normal;
-    font-stretch: normal;
-    font-variant: normal;
-    font-weight: 300;
-}
 
 body {
     margin:0px;
@@ -216,7 +207,44 @@ textarea::placeholder {
         }
     }
     
+}
+
+.tooltip-container {
+    font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    letter-spacing: normal;
+    font-stretch: normal;
+    font-variant: normal;
+    font-weight: 300;
+    z-index: 100;
+    position: fixed;
+    padding: 6px 12px;
+    line-height: initial;
+    color: black;
+    width: auto;
+    background:rgb(255, 255, 255);
+    border-radius: 10px;
+    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); 
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+    box-sizing: border-box;
+    opacity: 0;
+    transform: translate(-80%, -70%);
+    animation: tooltip-slide 0.18s ease-out 0.5s;
+    animation-fill-mode: forwards;
+    pointer-events: none;
+}
+
+@keyframes tooltip-slide {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -70%);
   }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
 
 chat-root {
     position: absolute;

package/src/app/app.component.ts

@@ -43,6 +43,7 @@ import { supports_html5_storage } from 'src/chat21-core/utils/utils';
 import { AUTH_STATE_OFFLINE, AUTH_STATE_ONLINE, TYPE_MSG_FILE, TYPE_MSG_IMAGE, URL_SOUND_LIST_CONVERSATION } from 'src/chat21-core/utils/constants';
 import { isInfo, isUserBanned } from 'src/chat21-core/utils/utils-message';
 import { MessageModel } from 'src/chat21-core/models/message';
+import { Rules } from './utils/rules';
 
 interface MessageObj {
   tenant?: string;
@@ -107,6 +108,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     private el: ElementRef,
     private ngZone: NgZone,
     public g: Globals,
+    private rules: Rules,
     public triggerHandler: Triggerhandler,
     public globalSettingsService: GlobalSettingsService,
     private settingsSaverService: SettingsSaverService,

package/src/app/app.module.ts

@@ -57,7 +57,6 @@ import { environment } from 'src/environments/environment';
 //THIRD-PART MODULES
 import { TranslateModule } from '@ngx-translate/core';
 import { MomentModule } from 'ngx-moment';
-import { TooltipModule } from 'ng2-tooltip-directive';
 import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import { INGXLoggerMetadata, LoggerModule, NGXLogger, NgxLoggerLevel, NGXLoggerServerService, TOKEN_LOGGER_SERVER_SERVICE } from "ngx-logger";
 
@@ -127,6 +126,8 @@ import { Triggerhandler } from 'src/chat21-core/utils/triggerHandler';
 import { WaitingService } from './providers/waiting.service';
 import { StarRatingWidgetService } from './providers/star-rating-widget.service';
 import { LikeUnlikeComponent } from './component/message/like-unlike/like-unlike.component';
+import { Rules } from './utils/rules';
+import { TooltipDirective } from 'src/app/directives/tooltip.directive';
 
 
 const appInitializerFn = (appConfig: AppConfigService, logger: NGXLogger) => {
@@ -282,7 +283,8 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     HtmlEntitiesEncodePipe,
     MarkedPipe,
     SafeHtmlPipe,
-    LikeUnlikeComponent
+    LikeUnlikeComponent,
+    TooltipDirective
   ],
   imports: [
     BrowserModule,
@@ -292,7 +294,6 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     FormsModule,
     ReactiveFormsModule,
     MomentModule,
-    TooltipModule,
     PickerModule,
     TranslateModule.forRoot(//),
     {
@@ -315,6 +316,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     AppConfigService,
     Chat21Service,
     Globals,
+    Rules,
     GlobalSettingsService,
     SettingsSaverService,
     StarRatingWidgetService,

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

@@ -37,6 +37,12 @@
         (onMenuOptionShow)="onMenuOption($event)">
     </chat-conversation-header>
 
+    <div id="dropZone_container" *ngIf="isHovering">
+        <div class="drop">
+            drop zone
+        </div>
+    </div>
+    
     <!-- CONTENT -->
     <chat-conversation-content
         [messages]="messages"
@@ -55,9 +61,14 @@
         (onAttachmentButtonClicked)="onAttachmentButtonClicked($event)"
         (onScrollContent)="onScrollContent($event)"
         (onMenuOptionShow)="onMenuOption($event)"
-        (onEmojiiPickerShow)="onEmojiiPickerShow($event)">
+        (onEmojiiPickerShow)="onEmojiiPickerShow($event)"
+        (drop)="drop($event)"
+        (dragover)="allowDrop($event)" 
+        (dragleave)="drag($event)" >
     </chat-conversation-content>
 
+    
+
     <!-- INTERNAL FRAME FOR SELF ACTION LINK BUTTONS-->
     <chat-internal-frame *ngIf="isButtonUrl"
         [button]="buttonClicked"
@@ -105,6 +116,7 @@
             [isEmojiiPickerShow]="isEmojiiPickerShow"
             [footerMessagePlaceholder]="footerMessagePlaceholder"
             [fileUploadAccept]="appConfigService?.getConfig().fileUploadAccept"
+            [dropEvent]="dropEvent"
             [stylesMap]="stylesMap"
             [translationMap]="translationMapFooter"
             (onEmojiiPickerShow)="onEmojiiPickerShow($event)"

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

@@ -468,6 +468,25 @@
 
 }
 
+#dropZone_container{
+    position: absolute;
+    top: 52px;
+    bottom: 56px;
+    left: 0;
+    right: 0;
+    background-color: rgba(240,248,255,0.6);
+    .drop{
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: 5px;
+        border: 2px dashed #a4acb3;
+        border-radius: 16px;
+    }
+}
+
 /* ==================== OPTION MENU CONTAINER ==================== */ 
 #c21-options-menu {
     width: auto;

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

@@ -139,15 +139,10 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   isIE = /msie\s|trident\//i.test(window.navigator.userAgent);
   firstScroll = true;
 
-  tooltipOptions = {
-    'show-delay': 1500,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
+  // ========== begin:: DRAG & DROP =======  
+  isHovering: boolean = false
+  dropEvent: Event
+  // ========== end:: DRAG & DROP =======
 
   translationMapHeader: Map<string, string>;
   translationMapFooter: Map<string, string>;
@@ -1250,4 +1245,50 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   }
   // ========= END:: TRIGGER FUNCTIONS ============//
 
+
+  drop(event){
+    event.preventDefault()
+    event.stopPropagation()
+
+    this.logger.log('[CONV-COMP] ----> FILE - DROP ev ', event)
+    const fileList = event.dataTransfer.files
+    this.logger.log('[CONV-COMP] ----> FILE - DROP ev.dataTransfer.files ',fileList)
+    this.isHovering = false
+    if (fileList.length > 0) {
+      const file: File = fileList[0]
+      this.logger.log('[CONV-COMP] ----> FILE - DROP file ', file)
+
+      var mimeType = fileList[0].type
+      this.logger.log('[CONV-COMP] ----> FILE - DROP mimeType files ', mimeType)
+
+      // if (mimeType.startsWith("image") || mimeType.startsWith("application")) {
+      // this.logger.log('[CONV-COMP] ----> FILE - DROP mimeType files: ', this.appConfigProvider.getConfig().fileUploadAccept);
+      // this.checkAcceptedFile(mimeType);
+      // const isAccepted = this.checkAcceptedFile(mimeType)
+      // this.logger.log('[CONV-COMP] > checkAcceptedFile - fileUploadAccept isAcceptFile FILE - DROP',isAccepted)
+      // if (isAccepted === true) {
+      this.dropEvent = event
+      // } else {
+      //   this.logger.log( '[CONV-COMP] ----> FILE - DROP mimeType files ', mimeType,'NOT SUPPORTED FILE TYPE')
+      //   this.presentToast(this.translationsMap.get('FAILED_TO_UPLOAD_THE_FORMAT_IS_NOT_SUPPORTED'), 'danger','toast-custom-class', 5000 )
+      //   // this.presentToastOnlyImageFilesAreAllowedToDrag()
+      // }
+      
+    }
+  }
+
+  allowDrop(event: any) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.logger.log('[CONV-COMP] ----> FILE - (dragover) allowDrop ev ', event)
+    this.isHovering = true
+  }
+
+  drag(event){
+    event.preventDefault()
+    event.stopPropagation()
+    console.log('dragleave-->', event)
+    this.isHovering = false
+  }
+
 }

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.spec.ts

@@ -1,5 +1,4 @@
 import { MomentModule } from 'ngx-moment';
-import { TooltipModule } from 'ng2-tooltip-directive';
 import { async, ComponentFixture, TestBed, waitForAsync, inject } from '@angular/core/testing';
 
 import { ConversationContentComponent } from './conversation-content.component';
@@ -36,7 +35,6 @@ describe('ConversationContentComponent', () => {
         HtmlEntitiesEncodePipe,
       ],
       imports: [
-        TooltipModule,
         MomentModule
       ],
       providers: [ 

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

@@ -67,16 +67,6 @@ export class ConversationContentComponent implements OnInit {
   MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
   // ========== end:: check message type functions ======= //
 
-  tooltipOptions = {
-    'show-delay': 1500,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
-
   urlBOTImage = 'https://s3.eu-west-1.amazonaws.com/tiledesk-widget/dev/2.0.4-beta.7/assets/images/avatar_bot_tiledesk.svg'
   uploadProgress: number;
   showUploadProgress: boolean = false;

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

@@ -37,6 +37,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Input() fileUploadAccept: string;
   @Input() stylesMap: Map<string, string>
   @Input() translationMap: Map< string, string>;
+  @Input() dropEvent: Event;
   @Output() onEmojiiPickerShow = new EventEmitter<boolean>();
   @Output() onBeforeMessageSent = new EventEmitter();
   @Output() onAfterSendMessage = new EventEmitter<MessageModel>();
@@ -86,6 +87,11 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     if(changes['hideTextReply'] && changes['hideTextReply'].currentValue !== undefined){
       this.restoreTextArea();
     }
+
+    if(changes['dropEvent'] && changes['dropEvent'].currentValue !== undefined){
+      this.onDrop(this.dropEvent)
+    }
+
   }
   
   ngAfterViewInit() {
@@ -573,4 +579,20 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     }
   }
 
+  onDrop(event){
+    const items = event.dataTransfer.files;
+    let file = null;
+    this.logger.debug('[CONV-FOOTER] onDrop items ', items);
+    for (const item of items) {
+      this.logger.debug('[CONV-FOOTER] onDrop item ', item);
+      this.logger.debug('[CONV-FOOTER] onDrop item.type ', item.type);
+
+      const data = {target: {files: new DataTransfer()}}
+      data.target.files = items
+      this.logger.debug('[CONV-FOOTER] onDrop data', data);
+      this.logger.debug('[CONV-FOOTER] onDrop file ', file);
+      this.detectFiles(data)
+    }
+  }
+
 }

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

@@ -52,7 +52,7 @@ export class FormBuilderComponent implements OnInit {
     }
   }
 
-  buildFormGroup(inputJson: Array<FormArray>): FormGroup {
+  buildFormGroup(inputJson: Array<FormArray>): FormGroup<any> {
     let objectFormBuilder: { [key: string]: FormControl } = {}
     let restoreDefault = false;
     let initIndex:number = 1411;

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

@@ -17,7 +17,7 @@ export class FormCheckboxComponent implements OnInit {
   @Input() hasSubmitted: boolean;
   @Output() onKeyEnterPressed = new EventEmitter<any>();
   
-  form: FormGroup;
+  form: FormGroup<any>;
   constructor(private rootFormGroup: FormGroupDirective,
               private elementRef: ElementRef) { }
 

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

@@ -14,7 +14,7 @@ export class FormLabelComponent implements OnInit {
   @Input() controlName: string;
   @Input() hasSubmitted: boolean; 
 
-  form: FormGroup;
+  form: FormGroup<any>;
   constructor(private rootFormGroup: FormGroupDirective) { }
 
   ngOnInit() {

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

@@ -18,13 +18,13 @@ export class FormTextComponent implements OnInit {
   @Output() onKeyEnterPressed = new EventEmitter<any>(); 
 
   @ViewChild('div_input') input: ElementRef;
-  form: FormGroup;
+  form: FormGroup<any>;
   inputType: string = 'text'
   constructor(private rootFormGroup: FormGroupDirective,
               private elementRef: ElementRef) { }
 
   ngOnInit() {
-    this.form = this.rootFormGroup.control as FormGroup;
+    this.form = this.rootFormGroup.control as FormGroup<any>;
     if(this.form && this.form.controls && this.form.controls[this.controlName]){
       this.form.controls[this.controlName].valueChanges.subscribe((value) => {
         this.hasSubmitted= false;

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

@@ -17,12 +17,12 @@ export class FormTextareaComponent implements OnInit {
   @Input() hasSubmitted: boolean; 
   @Output() onKeyEnterPressed = new EventEmitter<any>();
   @ViewChild('div_input') input: ElementRef;
-  form: FormGroup;
+  form: FormGroup<any>;
   constructor(private rootFormGroup: FormGroupDirective,
               private elementRef: ElementRef) { }
 
   ngOnInit() {
-    this.form = this.rootFormGroup.control as FormGroup;
+    this.form = this.rootFormGroup.control as FormGroup<any>;
     if(this.form && this.form.controls && this.form.controls[this.controlName]){
       this.form.controls[this.controlName].valueChanges.subscribe((value) => {
         this.hasSubmitted= false;

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

@@ -23,7 +23,7 @@ export class PrechatFormComponent implements OnInit, AfterViewInit {
 
 
   // ========= begin:: component variables ======= //
-  preChatFormGroup: FormGroup;
+  preChatFormGroup: FormGroup<any>;
   userFullname: string;
   userEmail: string;
   // ========= end:: component variables ======= //