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

package/CHANGELOG.md

@@ -6,7 +6,15 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
-# 5.1.0-rc18
+# 5.1.0-rc21
+- **bug-fixed**: shadow is visible while decrease widget size
+
+# 5.1.0-rc20
+- **added**: fontFamilySource settings variable
+- **added**: --font-family-bubble-message as variable to manage custom font
+- **removed**: fontSize and fontFamily as input property in bubble-message component
+
+# 5.1.0-rc19
 - **added**: ability to maximize, minimize and fullscreen the widget window
 - **added**: variable for font-family attribute css value
 

package/package.json

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

package/src/app/app.component.scss

@@ -273,7 +273,7 @@ chat-root {
         position: absolute;
         width: 100%;
         height: 100%;
-        font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
+        font-family: var(--font-family-bubble-message);
         font-size: 10px;
         text-align: left;
         background-color: transparent;

package/src/app/app.component.ts

@@ -2118,6 +2118,11 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
         this.el.nativeElement.style.setProperty('--button-in-msg-background-color', this.g.bubbleSentBackground)
         this.el.nativeElement.style.setProperty('--button-in-msg-font-size', this.g.buttonFontSize)
+        this.el.nativeElement.style.setProperty('--font-size-bubble-message', this.g.fontSize)
+        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)
+        
+
     }
 
 

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

@@ -1,8 +1,6 @@
 // $f21ico-schedule: image-url('f21ico-schedule.svg', false, false);
 // $f21ico-done: image-url('../assets/images/f21ico-done.svg', false, false);
 // $f21ico-done_all: image-url('../assets/images/f21ico-done_all.svg', false, false);
-// @import 'src/app/sass/variables';
-// @import '../../../sass/normalize.css';
 
 :host {
     --themeColor: var(--bck-msg-sent);
@@ -60,7 +58,7 @@
             font-weight: 500;
             line-height: 22px;
 
-            font-family: var(--font-family);
+            font-family: var(--font-family-powered-by);
             letter-spacing: -0.24px;
             -webkit-font-smoothing: antialiased;
 

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

@@ -1018,6 +1018,12 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   /** CALLED BY: conv-header component */
   onCloseWidgetFN() {
     //this.g.setParameter('activeConversation', null, false);
+    /** remove Min/Max/fullscreen css classes */
+    var tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv') 
+    tiledeskDiv.classList.remove('increaseSize')
+    tiledeskDiv.classList.remove('decreaseSize')
+    tiledeskDiv.classList.remove('fullscreen')
+
     this.onCloseWidget.emit();
   }
   /** CALLED BY: conv-header component */

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

@@ -9,7 +9,6 @@
   <chat-audio  class="test" *ngIf="audioBlob && audioUrl"
     [audioBlob] = "audioBlob"
     [color]="'var(--chat-footer-color)'"
-    [fontSize]="stylesMap.get('fontSize')"
     [stylesMap]="stylesMap">
   </chat-audio>
     

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

@@ -34,8 +34,6 @@
                               [ngClass]="{'button-in-msg' : message?.metadata && message?.metadata?.button}"
                               [message]="message"
                               [fontColor]="stylesMap.get('bubbleSentTextColor')"
-                              [fontSize]="stylesMap.get('fontSize')"
-                              [fontFamily]="stylesMap.get('fontFamily')"
                               [stylesMap]="stylesMap"
                               (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
                               (onAfterMessageRender)="onAfterMessageRenderFN($event)"
@@ -70,8 +68,6 @@
                               [isSameSender]="isSameSender(message?.sender, i)"
                               [message]="message"
                               [fontColor]="stylesMap.get('bubbleReceivedTextColor')"
-                              [fontSize]="stylesMap.get('fontSize')"
-                              [fontFamily]="stylesMap.get('fontFamily')"
                               [stylesMap]="stylesMap"
                               (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
                               (onAfterMessageRender)="onAfterMessageRenderFN($event)"

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

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 
 #scroll-me {
     scroll-behavior: smooth;

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

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 
 .textarea-container{
     // padding: 8px 34px;
@@ -323,7 +322,7 @@ textarea:active{
             font-weight: 500;
             line-height: 22px;
 
-            font-family: var(--font-family);
+            font-family: var(--font-family-powered-by);
             letter-spacing: 0.24px;
             -webkit-font-smoothing: antialiased;
             padding: 4px 12px;

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

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 
  /* SET SCROLLBAR */
 // ============= CSS c21-header ================= // 

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

@@ -58,8 +58,8 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
   private API_URL: string;
   private logger: LoggerService = LoggerInstance.getInstance()
   constructor(
-    public g: Globals,
-    public appConfigService: AppConfigService,) {
+    public appConfigService: AppConfigService
+  ) {
       this.API_URL = this.appConfigService.getConfig().apiUrl;
   }
 

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

@@ -1,6 +1,3 @@
-// @import 'src/app/sass/variables';
-
-
 :host .c21-content ::ng-deep > chat-image  {
 
     div { 

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

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

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

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

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

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 
 :host {
 	--foregroundColor: #0000;

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

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 
 :host {
 	--foregroundColor: #0000;

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

@@ -1,5 +1,3 @@
-// @import '../../../sass/variables';
-// @import '../../../sass/normalize.css';
 
 #chat21-prechat-form {
         background-color: #ffffff;

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

@@ -1,8 +1,3 @@
-// @import 'src/app/sass/variables';
-// @import '../../../sass/normalize.css';
-
-
-
 #chat21-home-component {
     position: absolute;
     width: 100%;
@@ -306,7 +301,7 @@
                 font-weight: 500;
                 line-height: 22px;
 
-                font-family: var(--font-family);
+                font-family: var(--font-family-powered-by);
                 letter-spacing: 0.24px;
                 -webkit-font-smoothing: antialiased;
     

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

@@ -1,6 +1,3 @@
-// @import 'src/app/sass/variables';
-// @import '../../../sass/normalize.css';
-
 #c21-app-list-conversations{
     position: relative;
     display: block;

package/src/app/component/last-message/last-message.component.html

@@ -36,8 +36,6 @@
           [message]="message"
           [isSameSender]="isSameSender(message?.sender, i)"
           [fontColor]="stylesMap.get('bubbleReceivedTextColor')"
-          [fontSize]="stylesMap.get('fontSize')"
-          [fontFamily]="stylesMap.get('fontFamily')"
           [stylesMap]="stylesMap"
           (onElementRendered)="onElementRenderedFN($event)">
         </chat-bubble-message>

package/src/app/component/last-message/last-message.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host  .c21-avatar-image ::ng-deep > chat-avatar-image {
 
     .c21-icon-avatar { 

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

@@ -1,6 +1,3 @@
-// @import 'src/app/sass/variables';
-// @import '../../../sass/normalize.css';
-
 #c21-app-list-all-conversations {
     position: relative;
     display: block;

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

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host .c21-msg ::ng-deep > a > img {
     max-width: 24% !important;
     vertical-align: middle;

package/src/app/component/menu-options/menu-options.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 #c21-menu-options{
     
     .modal-menu-options {

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

@@ -17,7 +17,7 @@
             </svg>
             <!-- <i class="material-icons">pause</i> -->
         </button>
-        <div class="duration" [style.color]="color" [style.font-size]="fontSize" >
+        <div class="duration" [style.color]="color">
             <span *ngIf="!isPlaying">{{ audioDuration ? formatTime(audioDuration) : '00:00' }}</span>
             <span *ngIf="isPlaying">{{ formatTime(currentTime) }}</span>
         </div>

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

@@ -80,6 +80,7 @@ button {
     }
     .duration {
         padding: 0 3px;
+        font-size: var(--font-size-bubble-message);
     }
 }
 

package/src/app/component/message/audio/audio.component.ts

@@ -17,7 +17,6 @@ export class AudioComponent implements AfterViewInit {
   @Input() audioBlob: Blob | null = null;
   @Input() metadata: any | null = null;
   @Input() color: string;
-  @Input() fontSize: string;
   @Input() stylesMap: Map<string, string>;
 
   audioUrl: SafeUrl | null = null;

package/src/app/component/message/bubble-message/bubble-message.component.html

@@ -25,7 +25,7 @@
 
       <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender"
         [style.color]="fullnameColor"
-        [ngStyle]="{'margin': (isImage(message) || isFrame(message))? '10px 16px 8px 16px': '10px 8px 0px 8px'}" class="message_sender_fullname">
+        [ngStyle]="{'margin': (isImage(message) || isFrame(message))? '12px 16px 8px 16px': '12px 16px 0px 16px'}" class="message_sender_fullname">
         {{message?.sender_fullname}}
       </div>
       <!-- message type:: image -->
@@ -61,7 +61,6 @@
       <chat-audio  *ngIf="isAudio(message)"
         [metadata]="message.metadata"
         [color]="fontColor"
-        [fontSize]="fontSize"
         [stylesMap]="stylesMap">
       </chat-audio>
 
@@ -82,8 +81,6 @@
         <chat-text *ngIf="message?.type !=='html'"
           [text]="message?.text"
           [color]="fontColor"
-          [fontSize]="fontSize"
-          [fontFamily]="fontFamily"
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
           (onAfterMessageRender)="onAfterMessageRenderFN($event)">
         </chat-text>

package/src/app/component/message/bubble-message/bubble-message.component.scss

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 /* ====== SET MESSAGES ====== */
 
 .messages {

package/src/app/component/message/bubble-message/bubble-message.component.ts

@@ -18,8 +18,6 @@ export class BubbleMessageComponent implements OnInit {
   @Input() message: MessageModel;
   @Input() isSameSender: boolean;
   @Input() fontColor: string;
-  @Input() fontSize: string;
-  @Input() fontFamily: string;
   @Input() stylesMap: Map<string, string>;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();

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

@@ -1,5 +1,3 @@
-@import 'src/app/sass/variables';
-
 :host {
     --backgroundColor: #{var(--blue)};
     --textColor: #{var(--bck-msg-sent)};
@@ -7,7 +5,7 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
-    --font-family: #{var(--font-family)};
+    --fontFamily: #{var(--button-in-msg-font-family)};
 }
 
 .button-in-msg {
@@ -21,7 +19,7 @@
     margin: 3px;
     background: var(--backgroundColor);
     overflow: hidden;
-    font-family: var(--font-family);
+    font-family: var(--fontFamily);
     font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;

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

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host {
     --backgroundColor: #{var(--blue)};
     --textColor: #{var(--bck-msg-sent)};
@@ -7,7 +5,7 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
-    --font-family: #{var(--font-family)};
+    --font-family: #{var(--button-in-msg-font-family)};
 }
 
 .button-in-msg {

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

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host {
     --backgroundColor: #{var(--blue)};
     --textColor: #{var(--bck-msg-sent)};
@@ -7,7 +5,7 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
-    --font-family: #{var(--font-family)};
+    --font-family: #{var(--button-in-msg-font-family)};
 }
 
 

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

@@ -1,5 +1,3 @@
-@import 'src/app/sass/variables';
-
 :host {
     --backgroundColor: #{var(--blue)};
     --textColor: #{var(--bck-msg-sent)};
@@ -7,7 +5,7 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
-    --font-family: #{var(--font-family)};
+    --fontFamily: #{var(--font-family)};
 
     --cardWidth: 220px;
 }
@@ -204,7 +202,7 @@
         transition: all .3s;
 
         background: var(--backgroundColor);
-        font-family: var(--font-family);
+        font-family: var(--fontFamily);
         font-size: var(--buttonFontSize);
         -o-text-overflow: ellipsis;
         text-overflow: ellipsis;

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

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host{
     // --borderRadius: #{$border-radius-bubble-message};
     --borderRadius: 8px;

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

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :root {
     --themeColor: #{var(--blue)};
     --foregroundColor: #{var(--col-msg-sent)};

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

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host{
     // --borderRadius: #{$border-radius-bubble-message};
     --borderRadius: 8px;

package/src/app/component/message/info-message/info-message.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 .info-container{
     display: flex;
     align-content: center;

package/src/app/component/message/like-unlike/like-unlike.component.scss

@@ -1,5 +1,3 @@
-// @import 'src/app/sass/variables';
-
 :host{
     // --borderRadius: #{$border-radius-bubble-message};
     --borderRadius: 25px;

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

@@ -1,4 +1,3 @@
 <p  #messageEl class="message_innerhtml marked" 
     [innerHTML]="printMessage(text, messageEl, this) | htmlEntitiesEncode | marked" 
-    [style.color]="color"
-    [style.font-size]="fontSize"></p>
+    [style.color]="color"></p>

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

@@ -1,10 +1,8 @@
-// @import 'src/app/sass/variables';
-
 .message_innerhtml {
     margin: 0px;
     // padding: 0px 14px;
     &.marked{
-        padding:8px;
+        padding: 12px 16px;
         margin-block-start: 0em!important;
         margin-block-end: 0em!important;
     }
@@ -15,7 +13,7 @@
 }
 
 p {
-    font-size: 1.4em;
+    font-size: var(--font-size-bubble-message);
     margin: 0;
     padding: 14px;
     line-height: 1.4em;

package/src/app/component/message/text/text.component.ts

@@ -10,8 +10,6 @@ export class TextComponent implements OnInit {
   @Input() text: string;
   @Input() htmlEnabled: boolean = false;
   @Input() color: string;
-  @Input() fontSize: string;
-  @Input() fontFamily: string;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
 

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

@@ -1,7 +1,3 @@
-// @import 'src/app/sass/variables';
-// @import '../../../sass/normalize.css';
-
-
 #chat21-selection-department {
 
     --backgroundColor: #{var(--light-white)};

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

@@ -1,7 +1,5 @@
 // @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
 // @import url(https://use.fontawesome.com/releases/v5.5.0/css/all.css);
-// @import 'src/app/sass/variables';
-
 #chat21-star-rating-widget {
   background-color: #ffffff;
   width: 100%;

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

@@ -331,6 +331,8 @@ export class GlobalSettingsService {
         this.globals.setColorWithGradient();
         /** set css iframe from parameters */
         this.setCssIframe();
+        /** set main style */
+        this.setStyle();
 
         this.logger.debug('[GLOBAL-SET] ***** END SET PARAMETERS *****');
         this.obsSettingsService.next(true);
@@ -376,6 +378,29 @@ export class GlobalSettingsService {
             divTiledeskiframe.classList.add('fullscreen')
         }
     }
+
+    setStyle(){
+
+        /** load custom FONT */
+        if(this.globals.fontFamily && this.globals.fontFamilySource){
+            this.loadFont(this.globals.fontFamily, this.globals.fontFamilySource)
+        }
+    }
+    loadFont(family: string, href: string,) {
+        const mainFont = family.split(",")[0].replace(/['"]/g, "").trim(); // es. "Montserrat"
+
+        if (document.querySelector(`link[data-font='${mainFont}']`)) {
+            return;
+        }
+
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.setAttribute('data-font', mainFont); // marker pulito
+        document.head.appendChild(link);
+
+        document.documentElement.style.setProperty('--font-family', family);
+    }
     /**
      * A: setVariablesFromService
      */
@@ -930,7 +955,12 @@ export class GlobalSettingsService {
         TEMP = tiledeskSettings['fontFamily'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fontFamily:: ', TEMP]);
         if (TEMP !== undefined) {
-            globals.fontFamily = TEMP;
+            globals.fontFamily = TEMP + ',' + globals.fontFamily;
+        }
+        TEMP = tiledeskSettings['fontFamilySource'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fontFamily:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.fontFamilySource = TEMP;
         }
         TEMP = tiledeskSettings['buttonFontSize'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > buttonFontSize:: ', TEMP]);
@@ -1261,7 +1291,11 @@ export class GlobalSettingsService {
         }
         TEMP = el.nativeElement.getAttribute('fontFamily');
         if (TEMP !== null) {
-            this.globals.fontFamily = TEMP;
+            this.globals.fontFamily = TEMP + ',' + this.globals.fontFamily;
+        }
+        TEMP = el.nativeElement.getAttribute('fontFamilySource');
+        if (TEMP !== null) {
+            this.globals.fontFamilySource = TEMP;
         }
         TEMP = el.nativeElement.getAttribute('buttonFontSize');
         if (TEMP !== null) {

package/src/app/sass/_variables.scss

@@ -20,6 +20,7 @@
 
     --border-radius-bubble-message: 20px;
     --button-in-msg-font-size: 15px;
+    --button-in-msg-font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
     --button-in-msg-max-width: 280px;
 
     --max-width-images: 230px; //change also MAX_WIDTH_IMAGES in constants.ts
@@ -41,8 +42,13 @@
 
 
 
-    --font-family: Mulish, sans-serif;
+    --font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif; //Mulish, sans-serif;
+    --font-family-bubble-message: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
     --font-family-callout: 'Helvetica Neue', 'Apple Color Emoji', Helvetica, Arial, sans-serif; 
+    --font-family-powered-by: Mulish, sans-serif;
+
+    --font-size-bubble-message: 1.4em
+
 }
 
 $trasp-black:rgba(0,0,0,0.8);

package/src/app/utils/globals.ts

@@ -221,6 +221,8 @@ export class Globals {
 
   allowedOnSpecificUrl: boolean // *******  new ********
   allowedOnSpecificUrlList: Array<string> // *******  new ********
+
+  fontFamilySource: string; // *******  new ********
   constructor(
   ) { }
 
@@ -357,7 +359,7 @@ export class Globals {
     /** set the text color of bubble received message */
     this.fontSize = '1.4em'
     /** set the text size of bubble messages */
-    this.fontFamily = "'Roboto','Google Sans', Helvetica, Arial, sans-serif'"
+    this.fontFamily = "'Roboto','Google Sans', Helvetica, Arial, sans-serif"
     /** set the text family of bubble messages */
     this.buttonFontSize = '15px'
     /** set the text size of attachment-buttons */

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

@@ -1361,9 +1361,6 @@
             window.Tiledesk('restart')
         }
 
-
-
-
         function onClickFontSize(){
             let text = document.getElementById('fontSize').value
             text === ""? text= '1.4em': text
@@ -1372,6 +1369,17 @@
             window.Tiledesk('restart')
         }
 
+        function onClickFontFamily(){
+            let text = document.getElementById('fontFamily').value
+            window.tiledeskSettings['fontFamily'] = text
+
+            let source = document.getElementById('fontFamilySource').value
+            // text === ""? text= '1.4em': text
+            window.tiledeskSettings['fontFamilySource'] = source
+
+            console.log('onClickFontFamily:',window.tiledeskSettings);
+            window.Tiledesk('restart')
+        }
 
         function onClickButtonFontSize(){
             let text = document.getElementById('buttonFontSize').value
@@ -1383,16 +1391,6 @@
 
        
 
-        
-
-       
-
-        
-
-        
-
-        
-
 
         function onClickTestAll(){
             inputs = document.getElementsByTagName('input');
@@ -2455,6 +2453,16 @@
                                 <button class="btn btn-light" onclick="onClickFontSize()">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>fontFamily</strong></em></span></div>
+                            <div class="col-md-5 formElement">
+                                <input class="form-control col-sm-2" type="text" id="fontFamily" name="fontFamily" placeholder="Family">
+                                <input class="form-control col-sm-2" type="text" id="fontFamilySource" name="fontFamilySource" placeholder="Source">
+                            </div>
+                            <div class="col-md-2">
+                                <button class="btn btn-light" onclick="onClickFontFamily()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
+                            </div>
+                        </div>
         
 
                         <div><h3 style="line-height: 0.3;">MANAGE <em><strong>BUTTON STYLES</strong></em></h3></div>

package/src/chat21-core/utils/user-typing/user-typing.component.scss

@@ -1,4 +1,3 @@
-// @import 'src/app/sass/variables';
 :root {
     --bubbleReceivedBackgroundColor: var(--blue);
     --foregroundColor: var(--bck-msg-sent);

package/src/iframe-style.css

@@ -34,27 +34,10 @@
     
 }
 
-#tiledeskdiv.decreaseSize {
-    /* transition: width 1s, height 1s; */
-    transition: all 1s ease-out;
-    width: var(--iframeMinWidth);
-    height: var(--iframeMinHeight);
-    /* animation: right-animate 1s ease infinite alternate; */
-
-}
-
-#tiledeskdiv.increaseSize {
-    /* transition: width 1s, height 1s; */
-    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;
+    /* transition: all 0.5s ease-in !important; */
     right: 0px;
     left: 0px;
     top: 0px;
@@ -110,30 +93,30 @@
 #tiledesk-container.open #tiledeskiframe {
     display: block;
     /*width: 376px;*/
-    /* -webkit-animation: fade-in-shadow 0.4s ease-in 0.0s both;
-    animation: fade-in-shadow 0.4s ease-in 0.0s both; */
-    /* border-radius: 16px; */
-    /* box-shadow: rgba(0, 18, 46, 0.16) 0px 8px 36px 0px; */
-    /* margin: 10px; */
 }
 #tiledesk-container.open #tiledeskdiv.shadow {
     transition: box-shadow 0.8s ease-in;
     box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 36px 0px; /*NEW GAB*/
 }
-/* @-webkit-keyframes fade-in-shadow {
-    0% { box-shadow: rgba(0, 0, 0, 0.0) 0 0 0px; }
-    100% { box-shadow: rgba(0, 0, 0, 0.1) 0 0 6px; }
-}
-@keyframes sk-bouncedelay {
-    0% { box-shadow: rgba(0, 0, 0, 0.0) 0 0 0px; }
-    100% { box-shadow: rgba(0, 0, 0, 0.1) 0 0 6px; }
-} */
+
 
 #tiledesk-container.closed #tiledeskiframe {
     display: block;
     box-shadow: none;
 }
 
+#tiledesk-container.open #tiledeskdiv.decreaseSize {
+    transition: all 0.5s ease-in;
+    width: var(--iframeMinWidth);
+    height: var(--iframeMinHeight);
+}
+
+#tiledesk-container.open #tiledeskdiv.increaseSize {
+    /* transition: width 1s, height 1s; */
+    transition: all 0.5s ease-in;
+    width: var(--iframeMaxWidth);
+    height: var(--iframeMaxHeight);
+}
 
 #tiledeskiframe .full-screen-mode {
     width: 100%;