@chat21/chat21-web-widget 5.1.0-rc17 → 5.1.0-rc19

package/CHANGELOG.md

@@ -6,6 +6,19 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.0-rc18
+- **added**: ability to maximize, minimize and fullscreen the widget window
+- **added**: variable for font-family attribute css value
+
+# 5.0.102
+- **bug-fixed**: cannot add message if array is empty
+
+# 5.0.101
+- **bug-fixed**: removed private note msgs
+
+# 5.1.0-rc18
+- **bug-fixed**: allowedOnSpecificUrl 
+
 # 5.1.0-rc17
 - **added**: allowedOnSpecificUrl and allowedOnSpecificUrlList to manage list of pattern url to allow to load the widget
 

package/package.json

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

package/src/app/app.component.scss

@@ -43,7 +43,6 @@ input, select:focus, textarea {
 
 :host {
     --button-in-msg-background-color:  --black;
-    --button-in-msg-font-size: 15px;
 }
 
 
@@ -134,39 +133,6 @@ textarea::placeholder {
     font-weight: 300;
   }
 
-  .msg_container{
-    .button-in-msg {
-        color: white!important;
-        background:  var(--button-in-msg-background-color) !important;
-
-        position: relative;
-        max-width: 300px;
-        min-width: inherit;
-        padding: 8px 16px;
-        cursor: auto;
-        border: 1px solid rgb(255, 255, 255);
-        border-radius: 20px!important;
-        margin: 3px;
-        overflow: hidden;
-        font-family: 'Muli', sans-serif;
-        font-size: 15px;
-        -o-text-overflow: ellipsis;
-        text-overflow: ellipsis;
-        white-space: normal;
-        letter-spacing: -0.24px;
-        -webkit-font-smoothing: antialiased;
-        .message_innerhtml{
-            // padding: 0px 14px!important;
-        }
-        p{
-            font-size: var(--button-in-msg-font-size)!important;
-            font-family: 'Muli', sans-serif!important;
-            font-weight: normal!important;
-        }
-    }
-    
-}
-
 
 // TOOLTIP: start
 .tooltip-container {
@@ -507,59 +473,7 @@ chat-root {
                 }
             }
         }
-         /* LOADING */
-        /*http://tobiasahlin.com/spinkit/*/
-        #chat21-spinner {
-            display: none;
-            width: 70px;
-            min-height: 20px;
-            margin: 20px auto 0;
-            text-align: center;
-        }
-        #chat21-spinner.active {
-            display: block;
-        }
-        #chat21-spinner > div {
-            width: 12px;
-            height: 12px;
-            background-color: var(--blue);
-            border-radius: 100%;
-            display: inline-block;
-            -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-            animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-        }
-        #chat21-spinner .chat21-bounce1 {
-            -webkit-animation-delay: -0.32s;
-            animation-delay: -0.32s;
-        }
-        #chat21-spinner .chat21-bounce2 {
-            -webkit-animation-delay: -0.16s;
-            animation-delay: -0.16s;
-        }
-        #chat21-spinner span {
-            display: block;
-            margin: 0.5em 0 0 0;
-            color: var(--black);
-            /* text-transform: uppercase; */
-            font-family: 'Roboto', sans-serif;
-            -webkit-animation: pulse 2000ms linear infinite;
-            -moz-animation: pulse 2000ms linear infinite;
-            animation: pulse 2000ms linear infinite;
-            text-align: center;
-        }
-        @-webkit-keyframes sk-bouncedelay {
-            0%, 80%, 100% { -webkit-transform: scale(0) }
-            40% { -webkit-transform: scale(1.0) }
-        }
-        @keyframes sk-bouncedelay {
-            0%, 80%, 100% { 
-            -webkit-transform: scale(0);
-            transform: scale(0);
-            } 40% { 
-            -webkit-transform: scale(1.0);
-            transform: scale(1.0);
-            }
-        }
+        
         // ========= END: GENERIC CSS ========= //
    
         /* CSS BOX CONTAINER */

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

@@ -18,6 +18,7 @@
         [hideHeaderConversationOptionsMenu]="g?.hideHeaderConversationOptionsMenu"
         [hideSignOutOptionMenu]="(!g?.singleConversation || !g?.showLogoutOption)"
         [hideChatDetailOptionMenu]="(!g?.isDevMode)"
+        [fullscreenMode]="g?.fullscreenMode"
         [stylesMap]="stylesMap"
         [translationMap]="translationMapHeader"
         [widgetTitle]="g?.project?.widgetTitle"
@@ -135,8 +136,7 @@
             (onAfterSendMessage)="onAfterSendMessageFN($event)"
             (onChangeTextArea)="onChangeTextArea($event)"
             (onAttachmentFileButtonClicked)="onAttachmentFileButtonClicked($event)"
-            (onNewConversationButtonClicked)="onNewConversationButtonClickedFN($event)"
-            (onBackButton)="onBackButton($event)">
+            (onNewConversationButtonClicked)="onNewConversationButtonClickedFN($event)">
         </chat-conversation-footer>
 
     </div>

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

@@ -60,7 +60,7 @@
             font-weight: 500;
             line-height: 22px;
 
-            font-family: Mulish, sans-serif;
+            font-family: var(--font-family);
             letter-spacing: -0.24px;
             -webkit-font-smoothing: antialiased;
 
@@ -97,10 +97,6 @@
     background: white;
     min-height: 40px;
 
-    &.maximize-width{
-        padding: 8px 0px;
-    }
-
     &.hideFooterReply{
         padding: 0px;
     }

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

@@ -221,6 +221,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'CLOSE',
       'MAXIMIZE',
       'MINIMIZE',
+      'FULLSCREEN',
       'CLOSE_CHAT',
       'RESTART',
       'LOGOUT',
@@ -1066,12 +1067,24 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     // this.hideTextAreaContent = true
   }
   /** CALLED BY: conv-header component */
-  onWidgetHeightChange(mode){
+  onWidgetSizeChange(mode){
     var tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv') 
     if(mode==='max'){
-      tiledeskDiv.style.maxHeight = 'unset'
+      tiledeskDiv.classList.add('increaseSize')
+      tiledeskDiv.classList.remove('decreaseSize')
+      tiledeskDiv.classList.remove('fullscreen')
+      this.g.fullscreenMode = false
     }else if(mode==='min'){
-      tiledeskDiv.style.maxHeight = '620px'
+      tiledeskDiv.classList.add('decreaseSize')
+      tiledeskDiv.classList.remove('increaseSize')
+      tiledeskDiv.classList.remove('fullscreen')
+      this.g.fullscreenMode = false
+    }else if(mode=== 'fullscreen'){
+      tiledeskDiv.classList.add('fullscreen')
+      tiledeskDiv.classList.remove('increaseSize')
+      tiledeskDiv.classList.remove('decreaseSize')
+      this.g.fullscreenMode = true
+
     }
     this.isMenuShow = false;
   }
@@ -1108,10 +1121,13 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
         this.onRestartChat()
         break;
       case HEADER_MENU_OPTION.MAXIMIZE:
-        this.onWidgetHeightChange('max')
+        this.onWidgetSizeChange('max')
         break;
       case HEADER_MENU_OPTION.MINIMIZE:
-        this.onWidgetHeightChange('min')
+        this.onWidgetSizeChange('min')
+        break;
+      case HEADER_MENU_OPTION.FULLSCREEN:
+        this.onWidgetSizeChange('fullscreen')
         break;
     }
   }
@@ -1239,19 +1255,6 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     this.logger.debug('[CONV-COMP] floating onNewConversationButtonClicked')
     this.onNewConversationButtonClicked.emit()
   }
-  /** CALLED BY: conv-footer floating-button component */
-  onBackButton(event: boolean){
-    this.hideTextAreaContent = event;
-    try{
-      const tiledeskDiv = document.getElementById('chat21-footer')
-      tiledeskDiv.classList.remove('maximize-width')
-      // tiledeskDiv.style.width = '376px'
-      // tiledeskDiv.style.maxHeight = '620px'
-    }catch(e){
-      this.logger.error('[CONV-COMP] onBackButton > Error :' + e);
-    }
-
-  }
   // =========== END: event emitter function ====== //
 
 

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

@@ -36,26 +36,6 @@
     // box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.4);
     position: fixed;
     .c21-body-container {
-        .c21-body-header {
-            .chat21-header-modal-select {
-                font-family: 'Google Sans', sans-serif !important;
-                padding: 0px;
-                background-color: #b9b9b921;
-                margin: 8px;
-                line-height: 1.2em;
-                color: #616161;
-                font-size: 15px;
-                text-align: center;
-                word-wrap: break-word;
-                border-radius: 8px;
-            }
-            .chat21-header-modal-select-more-of-one-dept {
-                position: relative;
-                height: auto;
-                padding: 10px;
-                margin: 30px 0 0 0;
-            }
-        } // end .chat21-sheet-header
     
         .c21-body-content  {
             /* no conflict
@@ -284,21 +264,57 @@
     }// end c21-body-container
 }// end c21-body
 
-        
-
-// ============= END CSS c21-body ================= //
-
+/* LOADING */
+/*http://tobiasahlin.com/spinkit/*/
+#chat21-spinner {
+    display: none;
+    width: 70px;
+    min-height: 20px;
+    margin: 20px auto 0;
+    text-align: center;
+}
+#chat21-spinner.active {
+    display: block;
+}
+#chat21-spinner > div {
+    width: 12px;
+    height: 12px;
+    background-color: var(--blue);
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+#chat21-spinner .chat21-bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+}
+#chat21-spinner .chat21-bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+}
+#chat21-spinner span {
+    display: block;
+    margin: 0.5em 0 0 0;
+    color: var(--black);
+    /* text-transform: uppercase; */
+    -webkit-animation: pulse 2000ms linear infinite;
+    -moz-animation: pulse 2000ms linear infinite;
+    animation: pulse 2000ms linear infinite;
+    text-align: center;
+}
 @-webkit-keyframes sk-bouncedelay {
     0%, 80%, 100% { -webkit-transform: scale(0) }
     40% { -webkit-transform: scale(1.0) }
 }
-
 @keyframes sk-bouncedelay {
     0%, 80%, 100% { 
-        -webkit-transform: scale(0);
-        transform: scale(0);
+    -webkit-transform: scale(0);
+    transform: scale(0);
     } 40% { 
-        -webkit-transform: scale(1.0);
-        transform: scale(1.0);
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
     }
-}
+}
+
+// ============= END CSS c21-body ================= //

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

@@ -323,7 +323,7 @@ textarea:active{
             font-weight: 500;
             line-height: 22px;
 
-            font-family: Mulish, sans-serif;
+            font-family: var(--font-family);
             letter-spacing: 0.24px;
             -webkit-font-smoothing: antialiased;
             padding: 4px 12px;
@@ -373,7 +373,7 @@ textarea:active{
         font-size: 1.2em;
         font-weight: 500;
         line-height: 22px;
-        font-family: Mulish, sans-serif;
+        font-family: var(--font-family);
         letter-spacing: 0.24px;
         -webkit-font-smoothing: antialiased;
         padding: 4px 12px;

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

@@ -50,7 +50,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Output() onChangeTextArea = new EventEmitter<any>();
   @Output() onAttachmentFileButtonClicked = new EventEmitter<any>();
   @Output() onNewConversationButtonClicked = new EventEmitter();
-  @Output() onBackButton = new EventEmitter()
 
   @ViewChild('chat21_file') public chat21_file: ElementRef;
   // @ViewChild('emojii_container', {read: ViewContainerRef}) selector;
@@ -655,10 +654,6 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   //   this.restoreTextArea()
   // }
 
-  onBackButtonFN(){
-    this.onBackButton.emit(false)
-  }
-
   setFocusOnId(id) {
     if(!this.isMobile){
       setTimeout(function () {

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

@@ -123,23 +123,34 @@
     </div> -->
     
     <!-- ICON MAXIMIZE -->
-    <!-- <div class="c21-header-button c21-right" *ngIf="heightStatus==='min'" (click)="maximizeMinimize('max')">
-        <svg role="img" aria-labelledby="altIconTitle" [class="icon-menu" xmlns="http://www.w3.org/2000/svg" 
-            width="17" height="17" viewBox="0 0 62 62">
-            <path d="M61,2H33a1,1,0,0,0-1,1V9a1,1,0,0,0,1,1H48.344L2.293,56.051a1,1,0,0,0,0,1.414l4.243,4.242a1,1,0,0,0,1.414,0L54,15.656V31a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V3A1,1,0,0,0,61,2Z"></path>
+    <div class="c21-header-button c21-right" *ngIf="heightStatus==='min' && !fullscreenMode" (click)="onChangeSize('max')">
+        <svg  role="img" aria-labelledby="altIconTitle" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+            width="17" height="17" viewBox="0 0 17 17">
+            <path d="M6.49001 8.30999L3.69 11.11V9.40999C3.69 8.93999 3.31 8.55999 2.84 8.55999C2.37 8.55999 1.99001 8.93999 1.99001 9.40999V14.01H6.59C7.06 14.01 7.44 13.63 7.44 13.16C7.44 12.69 7.06 12.31 6.59 12.31H4.89L7.69 9.50999L6.49001 8.30999ZM9.41 1.98999C8.94 1.98999 8.56001 2.36999 8.56001 2.83999C8.56001 3.30999 8.94 3.68999 9.41 3.68999H11.11L8.31001 6.48999L9.51 7.68999L12.31 4.88999V6.58999C12.31 7.05999 12.69 7.43999 13.16 7.43999C13.63 7.43999 14.01 7.05999 14.01 6.58999V1.98999H9.41Z" fill="currentColor"></path>
             <title id="altIconTitle">{{ translationMap?.get('MAXIMIZE') }}</title>
         </svg>
         <span class="label-menu-item">{{ translationMap?.get('MAXIMIZE') }}</span>
-    </div> -->
+    </div>
     <!-- ICON MINIMIZE -->
-    <!-- <div class="c21-header-button c21-right" *ngIf="heightStatus==='max'" (click)="maximizeMinimize('min')">
-        <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" transform="rotate(180)" xmlns="http://www.w3.org/2000/svg" 
-            width="17" height="17" viewBox="0 0 62 62">
-            <path d="M61,2H33a1,1,0,0,0-1,1V9a1,1,0,0,0,1,1H48.344L2.293,56.051a1,1,0,0,0,0,1.414l4.243,4.242a1,1,0,0,0,1.414,0L54,15.656V31a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V3A1,1,0,0,0,61,2Z"></path>
+    <div class="c21-header-button c21-right" *ngIf="heightStatus==='max' || heightStatus==='full' || fullscreenMode" (click)="onChangeSize('min')">
+        <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+            width="17" height="17" viewBox="0 0 17 17">
+            <path d="M13.59 5.31h-1.7l3.3-3.3-1.2-1.2-3.3 3.3v-1.7a.85.85 0 1 0-1.7 0v4.6h4.6a.85.85 0 1 0 0-1.7M1.57 9.84c0 .47.38.85.85.85h1.7l-3.3 3.3 1.2 1.2 3.3-3.3v1.7a.85.85 0 1 0 1.7 0v-4.6h-4.6a.85.85 0 0 0-.85.85" fill="currentColor"></path>
             <title id="altIconTitle">{{ translationMap?.get('MINIMIZE') }}</title>
         </svg>
         <span class="label-menu-item">{{ translationMap?.get('MINIMIZE') }}</span>
-    </div> -->
+    </div>
+
+    <!-- FULLSCREEN -->
+    <div class="c21-header-button c21-right" *ngIf="heightStatus!=='full' && !fullscreenMode" (click)="onChangeSize('full')">
+        <svg  role="img" aria-labelledby="altIconTitle" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
+            width="17" height="17" viewBox="0 0 17 17">
+            <path fill="currentColor" d="M6.5,8.3l-2.8,2.8v-1.7c0-.5-.4-.9-.9-.9s-.8.4-.8.9v4.6h4.6c.5,0,.8-.4.8-.9s-.4-.8-.8-.8h-1.7l2.8-2.8-1.2-1.2ZM9.4,2c-.5,0-.8.4-.8.8s.4.9.8.9h1.7l-2.8,2.8,1.2,1.2,2.8-2.8v1.7c0,.5.4.8.8.8s.9-.4.9-.8V2h-4.6Z"/>
+            <path fill="currentColor" d="M8.3,9.5l2.8,2.8h-1.7c-.5,0-.9.4-.9.9s.4.8.9.8h4.6v-4.6c0-.5-.4-.8-.9-.8s-.8.4-.8.8v1.7l-2.8-2.8-1.2,1.2ZM2,6.5c0,.5.4.8.8.8s.9-.4.9-.8v-1.7l2.8,2.8,1.2-1.2-2.8-2.8h1.7c.5,0,.8-.4.8-.8s-.4-.9-.8-.9H2v4.6Z"/>
+            <title id="altIconTitle">{{ translationMap?.get('FULLSCREEN') }}</title>
+        </svg>
+        <span class="label-menu-item">{{ translationMap?.get('FULLSCREEN') }}</span>
+    </div>
 
     <!-- ICON LOGOUT -->
     <div class="c21-header-button c21-right"  *ngIf="!hideSignOutOptionMenu" (click)="signOut()">

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

@@ -22,6 +22,7 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   @Input() nameUserTypingNow: string;
   @Input() typingLocation: string;
   @Input() isTrascriptDownloadEnabled: boolean;
+  @Input() fullscreenMode: boolean;
   @Input() hideCloseConversationOptionMenu: boolean;
   @Input() hideHeaderCloseButton: boolean;
   @Input() hideHeaderBackButton: boolean;
@@ -105,10 +106,11 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   /**
    * @param status : string 'max' || 'min'
    */
-  maximizeMinimize(status){
+  onChangeSize(status){
     this.heightStatus = status
     if(status === 'min') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MINIMIZE)
     if(status === 'max') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MAXIMIZE)
+    if(status === 'full') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.FULLSCREEN)
     this.onMenuOptionShow.emit(false)
   }
   toggleSound() {

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

@@ -182,7 +182,7 @@
     width: 100%;
     height: auto;
     vertical-align: middle;
-    font-family: 'Helvetica Neue', 'Apple Color Emoji', Helvetica, Arial, sans-serif; 
+    font-family: var(--font-family-callout);
     font-weight: normal;
     word-wrap: break-word;
     margin: 0px;

package/src/app/component/home/home.component.scss

@@ -89,7 +89,6 @@
                 }
 
                 .c21-text {
-                    font-family: 'Google Sans';
                     .c21-text-welcome {
                         overflow: hidden;
                         line-height: 1.2em;
@@ -130,7 +129,6 @@
                     }
                 }
                 .c21-text {
-                    font-family: 'Roboto';
                     margin: 0 0 0 15px;
 
                     .c21-text-welcome {
@@ -308,7 +306,7 @@
                 font-weight: 500;
                 line-height: 22px;
 
-                font-family: Mulish, sans-serif;
+                font-family: var(--font-family);
                 letter-spacing: 0.24px;
                 -webkit-font-smoothing: antialiased;
     

package/src/app/component/message/buttons/action-button/action-button.component.scss

@@ -7,6 +7,7 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --font-family: #{var(--font-family)};
 }
 
 .button-in-msg {
@@ -20,7 +21,7 @@
     margin: 3px;
     background: var(--backgroundColor);
     overflow: hidden;
-    font-family: 'Muli', sans-serif;
+    font-family: var(--font-family);
     font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;

package/src/app/component/message/buttons/link-button/link-button.component.scss

@@ -7,6 +7,7 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --font-family: #{var(--font-family)};
 }
 
 .button-in-msg {
@@ -20,7 +21,7 @@
     margin: 3px;
     background: var(--backgroundColor);
     overflow: hidden;
-    font-family: 'Muli', sans-serif;
+    font-family: var(--font-family);
     font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;

package/src/app/component/message/buttons/text-button/text-button.component.scss

@@ -7,6 +7,7 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --font-family: #{var(--font-family)};
 }
 
 
@@ -22,7 +23,7 @@
     margin: 3px;
     background: var(--backgroundColor);
     overflow: hidden;
-    font-family: 'Muli', sans-serif;
+    font-family: var(--font-family);
     font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;

package/src/app/component/message/carousel/carousel.component.scss

@@ -7,6 +7,7 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --font-family: #{var(--font-family)};
 
     --cardWidth: 220px;
 }
@@ -203,7 +204,7 @@
         transition: all .3s;
 
         background: var(--backgroundColor);
-        font-family: 'Muli', sans-serif;
+        font-family: var(--font-family);
         font-size: var(--buttonFontSize);
         -o-text-overflow: ellipsis;
         text-overflow: ellipsis;

package/src/app/component/message/html/html.component.scss

@@ -20,7 +20,7 @@
         margin: 3px;
         background: transparent;
         overflow: hidden;
-        font-family: 'Muli', sans-serif !important;
+        font-family: var(--font-family) !important;
         font-size: var(--buttonFontSize) !important;
         -o-text-overflow: ellipsis;
         text-overflow: ellipsis;

package/src/app/component/star-rating-widget/star-rating-widget.component.scss

@@ -82,11 +82,6 @@
     .c21-body-content  {
       padding: 10px 0px;
       /* star-rating */
-      .default-title {
-        font-size: 2em;
-        font-family:'Roboto';
-        color:var(--black);
-      }
       .default-text {
         font-size: 1.4em;
         font-family:'Roboto';

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

@@ -365,14 +365,15 @@ export class GlobalSettingsService {
         }
         // console.log('this.globals.fullscreenMode' + this.globals.fullscreenMode);
         if (this.globals.fullscreenMode === true) {
-            divTiledeskiframe.style.left = 0;
-            divTiledeskiframe.style.right = 0;
-            divTiledeskiframe.style.top = 0;
-            divTiledeskiframe.style.bottom = 0;
-            divTiledeskiframe.style.width = '100%';
-            divTiledeskiframe.style.height = '100%';
-            divTiledeskiframe.style.maxHeight = 'none';
-            divTiledeskiframe.style.maxWidth = 'none';
+            // divTiledeskiframe.style.left = 0;
+            // divTiledeskiframe.style.right = 0;
+            // divTiledeskiframe.style.top = 0;
+            // divTiledeskiframe.style.bottom = 0;
+            // divTiledeskiframe.style.width = '100%';
+            // divTiledeskiframe.style.height = '100%';
+            // divTiledeskiframe.style.maxHeight = 'none';
+            // divTiledeskiframe.style.maxWidth = 'none';
+            divTiledeskiframe.classList.add('fullscreen')
         }
     }
     /**
@@ -1977,8 +1978,13 @@ export class GlobalSettingsService {
     }
 
     manageLoadingDomains(): boolean {
+        const { allowedOnSpecificUrl, allowedOnSpecificUrlList } = this.globals;
+        
+        if(!allowedOnSpecificUrl){
+            return true
+        }
 
-        if(this.globals.allowedOnSpecificUrl && (!this.globals.allowedOnSpecificUrlList || this.globals.allowedOnSpecificUrlList.length === 0) ){
+        if (!Array.isArray(allowedOnSpecificUrlList) || allowedOnSpecificUrlList.length === 0) {
             console.log('allowedOnSpecificUrl is true and allowedOnSpecificUrlList is empty or not set');
             return true
         }
@@ -1992,7 +1998,7 @@ export class GlobalSettingsService {
         }
         
         const currentUrl = this.globals.windowContext.location.href;
-        const shouldShow = this.globals.allowedOnSpecificUrlList.some(pattern => {
+        const shouldShow = allowedOnSpecificUrlList.some(pattern => {
             const regex = wildcardToRegex(pattern);
             return regex.test(currentUrl);
         });

package/src/app/sass/_variables.scss

@@ -38,6 +38,11 @@
 
     --content-background-color: #fff;
     --content-text-color: var(--black);
+
+
+
+    --font-family: Mulish, sans-serif;
+    --font-family-callout: 'Helvetica Neue', 'Apple Color Emoji', Helvetica, Arial, sans-serif; 
 }
 
 $trasp-black:rgba(0,0,0,0.8);

package/src/app/utils/constants.ts

@@ -73,6 +73,7 @@ export const HEADER_MENU_OPTION = {
     DETAIL      :   'detail',
     RESTART     :   'restart',
     MAXIMIZE    :   'maximize',
-    MINIMIZE    :   'minimize'
+    MINIMIZE    :   'minimize',
+    FULLSCREEN  :   'fullscreen'
 }
 

package/src/assets/i18n/en.json

@@ -53,8 +53,9 @@
     "WAITING_TIME_NOT_FOUND": "The team will reply as soon as possible",
     "CLOSED": "CLOSED",
     "CLOSE_CHAT": "Close chat",
-    "MINIMIZE":"Minimize",
-    "MAXIMIZE":"Maximize",
+    "MINIMIZE":"Minimize window",
+    "MAXIMIZE":"Expand window",
+    "FULLSCREEN":"Fullscreen",
     "CONFIRM_CLOSE_CHAT":"Are you sure you want to close this chat?",
     
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"you",

package/src/assets/i18n/es.json

@@ -53,8 +53,9 @@
     "WAITING_TIME_NOT_FOUND": "El equipo responderá lo antes posible",
     "CLOSED": "CERRADA",
     "CLOSE_CHAT": "Cerrar chat",
-    "MINIMIZE":"Minimizar",
-    "MAXIMIZE":"Maximizar",
+    "MINIMIZE":" Minimizar ventana",
+    "MAXIMIZE":"Expandir ventana",
+    "FULLSCREEN":"Pantalla completa",
     "CONFIRM_CLOSE_CHAT":"¿Estás seguro de que quieres cerrar este chat?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tú",

package/src/assets/i18n/fr.json

@@ -53,8 +53,9 @@
     "WAITING_TIME_NOT_FOUND": "Nous vous répondrons dans les plus brefs délais",
     "CLOSED": "Fermé",
     "CLOSE_CHAT": "Fermer la discussion",
-    "MINIMIZE":"Minimiser",
-    "MAXIMIZE":"Maximiser",
+    "MINIMIZE":"Réduire la fenêtre",
+    "MAXIMIZE":"Agrandir la fenêtre",
+    "FULLSCREEN":"Plein écran",
     "CONFIRM_CLOSE_CHAT":"Etes-vous sûr de vouloir fermer cette discussion?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tu",

package/src/assets/i18n/it.json

@@ -53,8 +53,9 @@
     "WAITING_TIME_NOT_FOUND": "Vi risponderemo appena possibile",
     "CLOSED": "Chiusa",
     "CLOSE_CHAT": "Chiudi chat",
-    "MINIMIZE":"Minimizza",
-    "MAXIMIZE":"Massimizza",
+    "MINIMIZE":"Comprimi finestra",
+    "MAXIMIZE":"Espandi finestra",
+    "FULLSCREEN":"Fullscreen",
     "CONFIRM_CLOSE_CHAT":"Sei sicuro di voler chiudere questa chat?",
 
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tu",

package/src/iframe-style.css

@@ -1,5 +1,10 @@
 :root{
     --messagePreviewHeight: 100px;
+    --iframeMinWidth: 400px; /*376px*/;
+    --iframeMinHeight: 704px; /*696px;*/
+    --iframeMaxWidth: 688px;
+    --iframeMaxHeight: 786px;
+
 }
 
 #tiledesk-container {
@@ -17,11 +22,11 @@
     max-width: 420px;
     min-width: 416px;
     max-height: 640px; */
-    width: 376px;
-    height: calc(100% - 40px);
-    max-width: 696px;  /*376px;*/
-    min-width: 376px;
-    max-height: 620px;
+    width: var(--iframeMinWidth);
+    height: var(--iframeMinHeight);
+    /* min-width: var(--iframeMinWidth); 
+    max-width: var(--iframeMaxWidth);  376px;
+    max-height: 620px; */
     right: 0px;
     bottom: 0px;
     display: block;
@@ -32,21 +37,33 @@
 #tiledeskdiv.decreaseSize {
     /* transition: width 1s, height 1s; */
     transition: all 1s ease-out;
-    width: 376px;
-    max-height: 620px;
+    width: var(--iframeMinWidth);
+    height: var(--iframeMinHeight);
     /* animation: right-animate 1s ease infinite alternate; */
 
 }
 
 #tiledeskdiv.increaseSize {
     /* transition: width 1s, height 1s; */
-    transition: all 1s ease-in;
-    width: 696px;
-    max-height: 712px;
+    transition: all 3s ease-in;
+    width: var(--iframeMaxWidth);
+    height: var(--iframeMaxHeight);
     /* animation: right-animate 1s ease infinite alternate; */
 
 }
 
+#tiledeskdiv.fullscreen {
+    /* transition: width 1s, height 1s; */
+    transition: all 3s ease-in;
+    right: 0px;
+    left: 0px;
+    top: 0px;
+    bottom: 0px;
+    width: 100%;
+    height: 100%;  
+}
+ 
+
 @keyframes right-animate {
     0% {
         transform: translateX(140px);