@chat21/chat21-web-widget 5.1.0-rc22 → 5.1.0-rc23

package/CHANGELOG.md

@@ -6,6 +6,9 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.0-rc23
+- **added**: hideHeaderConversation tiledeskSettings property
+
 # 5.1.0-rc22
 - **changed**: footer UI if fullscreenMode is enabled
 - **changed**: buttons alignment if fullscreenMode is enabled

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.0-rc22",
+  "version": "5.1.0-rc23",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/app.component.scss

@@ -515,16 +515,6 @@ chat-root {
             border-radius: 16px;
         }
 
-        .chat21-fullscreen {
-            width: 100%;
-            height: 100%;
-            right: 0px;
-            left: 0px;
-            bottom: 0px;
-            border-radius: 0px;
-            max-height: none;
-        }
-
 
         /***************************
         ******** PAGE MODAL ********
@@ -596,7 +586,7 @@ chat-root {
     .c21-header {
         overflow: hidden;
         width: 100%;
-        height: 52px;
+        height: var(--chat-header-height);
         position: relative;
         margin: 0;
         padding: 0;
@@ -617,7 +607,7 @@ chat-root {
 
         .c21-header-container{
             position: relative;
-            height: 52px;
+            height: 100%;
             width: 100%;
             margin: 0 auto;
 
@@ -688,7 +678,7 @@ chat-root {
     }
     .c21-body {
         position: absolute;
-        top: 52px;
+        top: var(--chat-header-height);
         bottom: 0;
         left: 0;
         right: 0;

package/src/app/app.component.ts

@@ -2122,7 +2122,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.el.nativeElement.style.setProperty('--font-family-bubble-message', this.g.fontFamily)
         this.el.nativeElement.style.setProperty('--button-in-msg-font-family', this.g.fontFamily)
         
-
+        this.el.nativeElement.style.setProperty('--chat-header-height', this.g.hideHeaderConversation? '0px': null)
     }
 
 

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

@@ -8,6 +8,7 @@
 
     <!-- HEADER -->
     <chat-conversation-header
+        *ngIf="!g?.hideHeaderConversation"
         [idConversation]= "conversationWith"
         [senderId]="senderId"
         [soundEnabled]="g?.soundEnabled"

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

@@ -13,34 +13,36 @@
     bottom: var(--chat-footer-height) !important
 }
 
-:host-context(#chat21-conversations.full-screen-mode){
-    --button-in-msg-padding: 10px 16px;
-    #chat21-footer{
-        left: 20%;
-        right: 20%;
-    }
-
-    chat-conversation-content ::ng-deep{
-        .attachment_container,
-        .buttons-wrapper {
-            justify-content: flex-start;
-        }
-
-        .button-in-message{
-            padding: 14px 22px !important
+@media(min-width:688px){
+    :host-context(#chat21-conversations.full-screen-mode){
+        --button-in-msg-padding: 10px 16px;
+        #chat21-footer{
+            left: 20%;
+            right: 20%;
         }
-
-    }
-
-    chat-conversation-footer ::ng-deep {
-        .textarea-container {
-            padding: 8px 24px;
-            background-color: var(--chat-footer-background-color);
-            border-radius: 28px;
+    
+        chat-conversation-content ::ng-deep{
+            .attachment_container,
+            .buttons-wrapper {
+                justify-content: flex-start;
+            }
+    
+            .button-in-message{
+                padding: 14px 22px !important
+            }
+    
         }
-        #hiddenFooter,
-        #emoji-mart-container {
-            bottom: calc(100% + 10px)
+    
+        chat-conversation-footer ::ng-deep {
+            .textarea-container {
+                padding: 8px 24px;
+                background-color: var(--chat-footer-background-color);
+                border-radius: 28px;
+            }
+            #hiddenFooter,
+            #emoji-mart-container {
+                bottom: calc(100% + 10px)
+            }
         }
     }
 }

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

@@ -6,7 +6,7 @@
         .c21-header {
             overflow: hidden;
             width: 100%;
-            height: 52px;
+            height: var(--chat-header-height);
             .c21-header-button {
                 .c21-close-button.c21-small {
                     width: 31px;

package/src/app/component/list-all-conversations/list-all-conversations.component.scss

@@ -15,7 +15,7 @@
     .c21-header {
         overflow: hidden;
         width: 100%;
-        height: 52px;
+        height: var(--chat-header-height);
         position: relative;
         margin: 0;
         padding: 0;
@@ -64,7 +64,7 @@
 
         .c21-header-container{
             position: relative;
-            height: 52px;
+            height: 100%;
             width: 100%;
             margin: 0 auto;
 

package/src/app/component/selection-department/selection-department.component.scss

@@ -12,7 +12,7 @@
     .c21-header {
         overflow: hidden;
         width: 100%;
-        height: 52px;
+        height: var(--chat-header-height);
         .c21-header-button {
             .c21-close-button.c21-small {
                 width: 31px;

package/src/app/providers/global-settings.service.ts

@@ -760,13 +760,19 @@ export class GlobalSettingsService {
         TEMP = tiledeskSettings['fullscreenMode'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fullscreenMode:: ', TEMP);
         if (TEMP !== undefined) {
-            globals.fullscreenMode = TEMP;
+            globals.fullscreenMode = (TEMP === true) ? true : false;
             // globals.setParameter('fullscreenMode', TEMP);
         }
         TEMP = tiledeskSettings['hideHeaderCloseButton'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > hideHeaderCloseButton:: ', TEMP);
         if (TEMP !== undefined) {
-            globals.hideHeaderCloseButton = TEMP;
+            globals.hideHeaderCloseButton = (TEMP === true) ? true : false;
+            // globals.setParameter('hideHeaderCloseButton', TEMP);
+        }
+        TEMP = tiledeskSettings['hideHeaderConversation'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > hideHeaderCloseButton:: ', TEMP);
+        if (TEMP !== undefined) {
+            globals.hideHeaderConversation = (TEMP === true) ? true : false;
             // globals.setParameter('hideHeaderCloseButton', TEMP);
         }
         TEMP = tiledeskSettings['themeColor'];
@@ -1510,6 +1516,11 @@ export class GlobalSettingsService {
             globals.hideHeaderCloseButton = stringToBoolean(TEMP);
         }
 
+        TEMP = getParameterByName(windowContext, 'tiledesk_hideHeaderConversation');
+        if (TEMP) {
+            globals.hideHeaderConversation = stringToBoolean(TEMP);
+        }
+
         TEMP = getParameterByName(windowContext, 'tiledesk_themeColor');
         if (TEMP) {
             const themecolor = stringToBoolean(TEMP);

package/src/app/sass/_variables.scss

@@ -28,6 +28,8 @@
 
     --bkg-color-info-message: rgba(24, 119, 242, 0.1);
 
+    --chat-header-height: 52px;
+    
     --chat-footer-height: 64px;
     --chat-footer-logo-height: 30px;
     --chat-footer-border-radius: 16px;

package/src/app/utils/globals.ts

@@ -135,7 +135,6 @@ export class Globals {
   userEmail: string;
   widgetTitle: string;
   fullscreenMode: boolean;
-  hideHeaderCloseButton: boolean;
   themeColor: string;
   themeColorOpacity: number;
   themeForegroundColor: string;
@@ -161,6 +160,8 @@ export class Globals {
   baloonShape: string;
   isLogEnabled: boolean;
   openExternalLinkButton: boolean;
+  hideHeaderConversation: boolean
+  hideHeaderCloseButton: boolean;
   hideHeaderConversationOptionsMenu: boolean;
   hideCloseConversationOptionMenu: boolean;
   hideSettings: boolean;
@@ -291,9 +292,6 @@ export class Globals {
      * average response time of his team (if 'dynamicWaitTimeReply' is 
      * false the WAITING_TIME_NOT_FOUND will always be displayed) 
      * is set to true for backward compatibility with old projects */
-    this.hideHeaderCloseButton = false;
-    /** Hide the close button in the widget header. Permitted values: true,
-    false. The default value is false. */
     this.fullscreenMode = false;
     /** if it is true, the chat window is open in fullscreen mode. Permitted
     values: true, false. Default value : false */
@@ -336,6 +334,12 @@ export class Globals {
     this.isLogEnabled = false;
     // this.parameters['isLogEnabled'] = false;
     this.openExternalLinkButton = true;
+    /** Hide the header conversation Permitted values: true,
+    false. The default value is false. */
+    this.hideHeaderConversation= false;
+    /** Hide the close button in the widget header. Permitted values: true,
+    false. The default value is false. */
+    this.hideHeaderCloseButton = false;
     /** enable to hide/show upper-right header conversation options menu */
     this.hideHeaderConversationOptionsMenu = false;
     /** enable to close a conversation from upper-right header menu  */
@@ -534,7 +538,7 @@ export class Globals {
       'fullscreenMode': this.fullscreenMode,
       'filterByRequester': this.filterByRequester,
       'hideHeaderConversationOptionsMenu': this.hideHeaderConversationOptionsMenu, 'hideHeaderCloseButton': this.hideHeaderCloseButton,
-      'hideCloseConversationOptionMenu': this.hideCloseConversationOptionMenu,
+      'hideCloseConversationOptionMenu': this.hideCloseConversationOptionMenu, 'hideHeaderConversation': this.hideHeaderConversation,
       'hideSettings': this.hideSettings,
       'isLogEnabled': this.isLogEnabled,
       'isOpen': this.isOpen, 'isShown': this.isShown,

package/src/assets/twp/index-dev.html

@@ -1249,6 +1249,13 @@
             window.Tiledesk('restart')
         }
         
+        function onClickHideHeaderConversation(){
+            let status = document.querySelector('input[name="hideHeaderConversation"]:checked').value
+            window.tiledeskSettings['hideHeaderConversation'] = stringToBoolean(status)
+            console.log('onClickHideHeaderConversation: status-->',window.tiledeskSettings);
+            window.Tiledesk('restart')
+        }
+
         function onClickHideHeaderCloseButton(){
             let status = document.querySelector('input[name="hideHeaderCloseButton"]:checked').value
             window.tiledeskSettings['hideHeaderCloseButton'] = stringToBoolean(status)
@@ -2245,6 +2252,16 @@
                         
 
                         <div><h3 style="line-height: 0.3;">MANAGE <em><strong>CONVERSATION DETAIL</strong></em></h3></div>
+                        <div class="row">
+                            <div class="col-md-5 formElement"><span><em><strong>hideHeaderConversation</strong></em></span></div>
+                            <div class="col-md-5">
+                                <input class="form-check-input" type="radio" name="hideHeaderConversation" value="true"><label>True</label>
+                                <input class="form-check-input" type="radio" name="hideHeaderConversation" value="false" checked><label>False</label>
+                            </div>
+                            <div class="col-md-2">
+                                <button class="btn btn-light" onclick="onClickHideHeaderConversation()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
+                            </div>
+                        </div>
                         <div class="row">
                             <div class="col-md-5 formElement"><span><em><strong>hideHeaderCloseButton</strong></em></span></div>
                             <div class="col-md-5">