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

package/CHANGELOG.md

@@ -6,6 +6,9 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 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

package/package.json

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

package/src/app/app.component.ts

@@ -2120,6 +2120,8 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         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

@@ -58,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-footer/conversation-footer.component.scss

@@ -322,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.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/home/home.component.scss

@@ -301,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/message/buttons/action-button/action-button.component.scss

@@ -5,7 +5,7 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
-    --fontFamily: #{var(--font-family)};
+    --fontFamily: #{var(--button-in-msg-font-family)};
 }
 
 .button-in-msg {

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

@@ -5,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

@@ -5,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/providers/global-settings.service.ts

@@ -387,20 +387,20 @@ export class GlobalSettingsService {
         }
     }
     loadFont(family: string, href: string,) {
-        // controlla se già esiste
-        if (document.querySelector(`link[data-font='${family}']`)) {
-          return;
+        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', family); // marker per non duplicare
+        link.setAttribute('data-font', mainFont); // marker pulito
         document.head.appendChild(link);
-    
-        // aggiorna la variabile CSS
-        document.documentElement.style.setProperty('--font-family', `'${family}', sans-serif`);
-      }
+
+        document.documentElement.style.setProperty('--font-family', family);
+    }
     /**
      * A: setVariablesFromService
      */

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,9 +42,10 @@
 
 
 
-    --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
 

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/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%;