@chat21/chat21-ionic 3.0.107-rc.3 → 3.0.107-rc.7

package/src/app/pages/unassigned-conversations/unassigned-conversations.page.ts

@@ -5,6 +5,8 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { DomSanitizer } from '@angular/platform-browser'
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
+import { EventsService } from 'src/app/services/events-service';
 
 
 @Component({
@@ -34,6 +36,8 @@ export class UnassignedConversationsPage implements OnInit {
     private navService: NavProxyService,
     private sanitizer: DomSanitizer,
     private translateService: CustomTranslateService,
+    private appStorageService: AppStorageService,
+    private events : EventsService
   ) { }
 
   ngOnInit() {
@@ -46,6 +50,7 @@ export class UnassignedConversationsPage implements OnInit {
     this.buildIFRAME();
     this.listenToPostMsg();
     this.hideHotjarFeedbackBtn();
+    this.events.subscribe('style', (data)=>this.loadStyle(data))
   }
 
   ngOnDestroy(){
@@ -89,7 +94,8 @@ export class UnassignedConversationsPage implements OnInit {
     if (iframeWin) {
       iframeWin.addEventListener("load", function () {
         self.logger.log("[UNASSIGNED-CONVS-PAGE] GET - Finish");
-
+        self.onLoad(iframeWin)
+        
         const isIFrame = (input: HTMLElement | null): input is HTMLIFrameElement =>
           input !== null && input.tagName === 'IFRAME';
 
@@ -98,17 +104,58 @@ export class UnassignedConversationsPage implements OnInit {
           iframeWin.contentWindow.postMessage(msg, '*');
         }
 
+        
 
         let spinnerElem = <HTMLElement>document.querySelector('.loader-spinner-wpr')
 
         self.logger.log('[APP-STORE-INSTALL] GET iframeDoc readyState spinnerElem', spinnerElem)
         spinnerElem.classList.add("hide-stretchspinner")
 
+
+
       });
     }
 
   }
 
+  onLoad(iframe){
+    let styleData = this.appStorageService.getItem('style')
+    console.log('[UNASSIGNED-CONVS-PAGE] styleeeeee', styleData)
+    if(styleData && styleData !== 'undefined'){
+      this.loadStyle(JSON.parse(styleData))
+    }
+  }
+  async loadStyle(data){
+    var iframeWin = <HTMLIFrameElement>document.getElementById("unassigned-convs-iframe")
+    if(!data.parameter){
+      let className = iframeWin.contentDocument.body.className.replace(new RegExp(/style-\S*/gm), '')
+      iframeWin.contentDocument.body.className = className
+      iframeWin.contentWindow.document.body.classList.remove('light')
+      iframeWin.contentWindow.document.body.classList.remove('dark')
+      iframeWin.contentWindow.document.body.classList.remove('custom')
+      let link = iframeWin.contentWindow.document.getElementById('themeCustom');
+      if(link){
+        link.remove();
+      }
+      return;
+    } 
+
+    // Create link
+    let link = iframeWin.contentWindow.document.createElement('link');
+    link.id= 'themeCustom'
+    link.href = data.parameter;
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.media='all';
+    
+    console.log('linkkkk', link, iframeWin.contentWindow.document)
+    let head = iframeWin.contentWindow.document.getElementsByTagName('head')[0];
+    head.appendChild(link);
+    iframeWin.contentWindow.document.body.classList.add(data.type) //ADD class to body element as theme type ('light', 'dark', 'custom')
+    return;
+  }
+
+
   listenToPostMsg() {
     window.addEventListener("message", (event) => {
       // console.log("[UNASSIGNED-CONVS-PAGE] message event ", event);

package/src/assets/customStyle.css

@@ -0,0 +1,39 @@
+body.custom{
+    background-color: red;
+    --list-bkg-color: red;
+}
+
+body.light{
+    background-color: green;
+    --list-bkg-color: green;
+}
+
+body.style-1{
+    background-color: blue;
+    --list-bkg-color: blue;
+}
+
+body.light .navbar{
+    background-color: red;
+}
+
+body.light ion-button  .button-native {
+    background-color: red;
+}
+
+body.light ion-button {
+    background-color: red;
+}
+
+body.style-1 ion-button .button-native {
+    background-color: red;
+}
+
+/* body.dark :host(.button-native) {
+    border: 1px solid red;
+} */
+
+
+body.style-1 ion-col div.buttons-left {
+    background-color: blue;
+}

package/src/assets/test.html

@@ -10,14 +10,48 @@
 <body style="height: 100%;">
   <div id="titolo">CHAT IONIC TEST PAGE</div>
 
+  <div class="event-wrp" id="onThemeColor">
+    <span class="badge">EVENT</span>
+    <label>themeColor LIGHT</label>
+    <label class="switch">
+      <input type="checkbox" name="themeColor" onclick="onCLickThemeColor(this)">
+      <span class="slider round"></span>
+    </label>
+  </div>
+
+  <iframe id="myIFrame" frameBorder="0" width="100%" style="display: flex; height: 95vh" onload="onLoad()"
+  src="http://localhost:8080/#/conversation-detail?tiledesk_supportMode=false&jwt=JWT eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1ZmQzNGU0MjQ5NjEwZTAwMzQ5ODUwNzgiLCJlbWFpbCI6ImdhYnJpZWxlLnBhbmljb0Bmcm9udGllcmUyMS5pdCIsImZpcnN0bmFtZSI6IkdhYnJpZWxlMiIsImxhc3RuYW1lIjoiUGFuaWNvIC1wcmUiLCJlbWFpbHZlcmlmaWVkIjp0cnVlLCJpYXQiOjE2OTgzMzYyMTMsImF1ZCI6Imh0dHBzOi8vdGlsZWRlc2suY29tIiwiaXNzIjoiaHR0cHM6Ly90aWxlZGVzay5jb20iLCJzdWIiOiJ1c2VyIiwianRpIjoiNjAzZGY3NDQtZWY0OS00Mjg2LWJlMWQtYWM5OGYyYTNkMTJiIn0.bof5QPQP262yCQfpeSjqyoYPkSCttg5NQFkcV8d634xzeq7wJBdhtiO7IJY6hS81a1YyXrAsxlK7RiNS-UZdYiTXR81UXurQd1fnE9jtaggB82tyNL8vmiZEOs6xh4TqO3-kkBzRxQIp74bY53fk_mu5RmNbAjIgUWEufaNDiv8"></iframe>
+  
   <script>        
     window.addEventListener('message', event => {
         console.log('[CHAT-IONIC] test page event::', event)
-    })
-  </script>
+    });
+
+    function onLoad(){
+      // var cssLink = document.createElement("style");
+      // cssLink.src = "./assets/style.css"; 
+      // // cssLink.rel = "stylesheet"; 
+      // cssLink.type = "text/css"; 
+      // console.log('framessss', frames['myIFrame'])
+      // frames['myIFrame'].contentWindow.document.body.appendChild(cssLink);
+
+      // let msg= { action: "style", type: 'light', parameter: 'http://localhost:8080/assets/customStyle.css'}
+      // frames['myIFrame'].contentWindow.postMessage(msg, '*');
+    }
 
-  <iframe id="myIFrame" frameBorder="0" width="100%" style="display: flex; height: 95vh"
-    src="http://localhost:8080/#/conversation-detail?jwt=JWT eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1ZmQzNGU0MjQ5NjEwZTAwMzQ5ODUwNzgiLCJlbWFpbCI6ImdhYnJpZWxlLnBhbmljb0Bmcm9udGllcmUyMS5pdCIsImZpcnN0bmFtZSI6IkdhYnJpZWxlMiIsImxhc3RuYW1lIjoiUGFuaWNvIC1wcmUiLCJlbWFpbHZlcmlmaWVkIjp0cnVlLCJpYXQiOjE2OTgzMzYyMTMsImF1ZCI6Imh0dHBzOi8vdGlsZWRlc2suY29tIiwiaXNzIjoiaHR0cHM6Ly90aWxlZGVzay5jb20iLCJzdWIiOiJ1c2VyIiwianRpIjoiNjAzZGY3NDQtZWY0OS00Mjg2LWJlMWQtYWM5OGYyYTNkMTJiIn0.bof5QPQP262yCQfpeSjqyoYPkSCttg5NQFkcV8d634xzeq7wJBdhtiO7IJY6hS81a1YyXrAsxlK7RiNS-UZdYiTXR81UXurQd1fnE9jtaggB82tyNL8vmiZEOs6xh4TqO3-kkBzRxQIp74bY53fk_mu5RmNbAjIgUWEufaNDiv8"></iframe>
+
+    function onCLickThemeColor(event){
+      console.log('onCLickThemeColor: status-->',event.checked);
+      if(event.checked){
+        let msg= { action: "style", type: 'style-1', parameter: 'http://localhost:8080/assets/customStyle.css'}
+        frames['myIFrame'].contentWindow.postMessage(msg, '*');
+      }else{
+        let msg= { action: "style", parameter: ''}
+        frames['myIFrame'].contentWindow.postMessage(msg, '*');
+      }
+    }
+
+  </script>
 </body>
 
 </html>

package/src/chat21-core/providers/firebase/firebase-conversations-handler.ts

@@ -272,6 +272,7 @@ export class FirebaseConversationsHandler extends ConversationsHandlerService {
     archiveConversation(conversationId: string) {
         const that = this
         this.setClosingConversation(conversationId, true);
+        this.setConversationRead(conversationId)
         const index = searchIndexInArrayForUid(this.conversations, conversationId);
         // if (index > -1) {
         //     this.conversations.splice(index, 1);

package/src/chat21-core/providers/mqtt/mqtt-conversations-handler.ts

@@ -374,7 +374,8 @@ export class MQTTConversationsHandler extends ConversationsHandlerService {
         this.isConversationClosingMap.delete(conversationId);
     }
 
-    archiveConversation(conversationId: string) { 
+    archiveConversation(conversationId: string) {
+        this.setConversationRead(conversationId)
         this.chat21Service.chatClient.archiveConversation(conversationId);
     }
 

package/src/chat21-core/providers/native/native-upload-service.ts

@@ -112,7 +112,7 @@ export class NativeUploadService extends UploadService {
 
         //USE IMAGE API
         const that = this;
-        const url = this.URL_TILEDESK_IMAGES + '/users' + '?path=' + path
+        const url = this.URL_TILEDESK_IMAGES + '/users' + '?path=' + path.split('path=')[1]
         return new Promise((resolve, reject) => {
             that.http.delete(url, requestOptions).subscribe(data => {
                 // const downloadURL = this.URL_TILEDESK_IMAGES + '?path=' + data['filename'];

package/src/chat21-core/providers/tiledesk/tiledesk-auth.service.ts

@@ -5,6 +5,7 @@ import { UserModel } from 'src/chat21-core/models/user';
 import { avatarPlaceholder, getColorBck } from 'src/chat21-core/utils/utils-user';
 import { AppStorageService } from '../abstract/app-storage.service';
 import { LoggerInstance } from '../logger/loggerInstance';
+import { BehaviorSubject } from 'rxjs';
 // import { BehaviorSubject } from 'rxjs';
 // import { EventsService } from 'src/app/services/events-service';
 
@@ -26,6 +27,8 @@ export class TiledeskAuthService {
   private currentUser: UserModel;
   private logger: LoggerService = LoggerInstance.getInstance()
 
+  private BS_IsONLINE: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false)
+
   constructor(
     public http: HttpClient,
     public appStorage: AppStorageService,
@@ -63,8 +66,8 @@ export class TiledeskAuthService {
         if (data['success'] && data['token']) {
           that.tiledeskToken = data['token'];
           that.createCompleteUser(data['user']);
-          // that.appStorage.setItem('tiledeskToken', that.tiledeskToken);
           this.checkAndSetInStorageTiledeskToken(that.tiledeskToken)
+          this.BS_IsONLINE.next(true)
           resolve(that.tiledeskToken)
         }
       }, (error) => {
@@ -93,8 +96,8 @@ export class TiledeskAuthService {
         if (data['success'] && data['token']) {
           that.tiledeskToken = data['token'];
           that.createCompleteUser(data['user']);
-          // that.appStorage.setItem('tiledeskToken', that.tiledeskToken);
           this.checkAndSetInStorageTiledeskToken(that.tiledeskToken)
+          this.BS_IsONLINE.next(true)
           resolve(that.tiledeskToken)
         }
       }, (error) => {
@@ -119,9 +122,9 @@ export class TiledeskAuthService {
         if (data['success'] && data['token']) {
           that.tiledeskToken = data['token'];
           that.createCompleteUser(data['user']);
-          // that.appStorage.setItem('tiledeskToken', that.tiledeskToken); // salvarlo esternamente nell'app.component
           this.checkAndSetInStorageTiledeskToken(that.tiledeskToken)
-          resolve(this.currentUser)
+          this.BS_IsONLINE.next(true)
+          resolve(data)
         }
       }, (error) => {
         reject(error)
@@ -133,6 +136,8 @@ export class TiledeskAuthService {
     this.logger.log('[TILEDESK-AUTH] - LOGOUT')
     this.appStorage.removeItem('tiledeskToken')
     this.appStorage.removeItem('currentUser')
+    localStorage.removeItem('tiledesk_token')
+    this.BS_IsONLINE.next(false)
     this.setCurrentUser(null);
     // this.isOnline$.next(false) 
     const stored_project = localStorage.getItem('last_project')
@@ -180,21 +185,28 @@ export class TiledeskAuthService {
 
   private checkAndSetInStorageTiledeskToken(tiledeskToken) {
     this.logger.log('[TILEDESK-AUTH] - checkAndSetInStorageTiledeskToken tiledeskToken from request', tiledeskToken)
-    const storedTiledeskToken = this.appStorage.getItem('tiledeskToken');
+    const storedTiledeskToken = localStorage.getItem('tiledesk_token');
     this.logger.log('[TILEDESK-AUTH] - checkAndSetInStorageTiledeskToken storedTiledeskToken ', storedTiledeskToken)
     if (!storedTiledeskToken) {
       this.logger.log('[TILEDESK-AUTH] - checkAndSetInStorageTiledeskToken TOKEN DOES NOT EXIST - RUN SET ')
-      this.appStorage.setItem('tiledeskToken', tiledeskToken);
+      localStorage.setItem('tiledesk_token', tiledeskToken)
     } else if (storedTiledeskToken && storedTiledeskToken !== tiledeskToken) {
       this.logger.log('[TILEDESK-AUTH] - checkAndSetInStorageTiledeskToken STORED-TOKEN EXIST BUT IS != FROM TOKEN - RUN SET ')
-      this.appStorage.setItem('tiledeskToken', tiledeskToken);
+      localStorage.setItem('tiledesk_token', tiledeskToken)
     } else if (storedTiledeskToken && storedTiledeskToken === tiledeskToken) {
       this.logger.log('[TILEDESK-AUTH] - checkAndSetInStorageTiledeskToken STORED-TOKEN EXIST AND IS = TO TOKEN ')
     }
-
-    localStorage.setItem('tiledesk_token', tiledeskToken)
+    this.appStorage.setItem('tiledeskToken', tiledeskToken)
   }
 
+  isLoggedIn(): Promise<boolean>{
+    return new Promise<boolean>((resolve, reject)=> {
+      this.BS_IsONLINE.subscribe((status)=> {
+        if(status)
+          resolve(true)
+      })
+    })
+  }
 
   getCurrentUser(): UserModel {
     return this.currentUser;

package/src/global.scss

@@ -98,16 +98,7 @@ app-conversations-list {
     text-overflow: ellipsis !important;
 }
 
-.truncate-conv-msg {
-    width: 100% !important;
-    white-space: nowrap !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    color: #999999;
-    font-size: 13px;
-}
-
-// START GESTIONE SIDEBAR ESTERNA CON IFRAME //
+// START GESTIONE SIDEBAR ESTERNA CON IFRAME: start //
 #tld-sidebar {
     position: absolute;
     top: 0;
@@ -155,6 +146,9 @@ app-conversations-list {
     height: 100%;
     width: 100%;
 }
+// START GESTIONE SIDEBAR ESTERNA CON IFRAME: end //
+
+
 app-root {
     position: absolute;
     top: 0;
@@ -177,7 +171,7 @@ app-root {
 app-message-text-area {
     width: 100%;
     z-index: 99999; // nk
-    background: #fff; // nk
+    background: var(--conversation-detail-background); // nk
 }
 
 app-conversation-info {
@@ -300,15 +294,16 @@ select:-webkit-autofill:focus {
     z-index: 1;
 }
 
-// Sidebar
+// SIDEBAR: start
 .sidebar {
+    background-color: var(--sidebar-background-color);
+    color: var(--sidebar-color);
+
     transition-property: top, bottom, width;
     transition-duration: 0.2s, 0.2s, 0.35s;
     transition-timing-function: linear, linear, ease;
     -webkit-overflow-scrolling: touch;
-}
 
-.sidebar {
     position: fixed;
     top: 0;
     bottom: 0;
@@ -328,12 +323,10 @@ select:-webkit-autofill:focus {
     overflow: auto;
     width: 60px;
     z-index: 4;
-}
-.sidebar-wrapper {
+
     transition-property: top, bottom, width;
     transition-duration: 0.2s, 0.2s, 0.35s;
     transition-timing-function: linear, linear, ease;
-    background-color: #2d323e !important;
 }
 
 .small-sidebar__logo {
@@ -344,12 +337,6 @@ select:-webkit-autofill:focus {
     margin-top: 5px;
 }
 
-.small-sidebar-tiledesk-nav-user {
-    height: 35px;
-    min-height: 35px;
-    max-height: 35px;
-}
-
 .user {
     position: relative;
     // display: flex;
@@ -360,21 +347,6 @@ select:-webkit-autofill:focus {
     // min-height: 130px;
     // max-height: 130px;
 }
-.tiledesk-nav-user {
-    background-color: #1e2129 !important;
-    color: #fff !important;
-}
-
-.small-sidebar-userfullname {
-    display: none;
-}
-
-
-
-.tiledesk-nav-avatar {
-    background-color: #2d323e !important;
-    color: #fff !important;
-}
 
 .sidebar-avatar-container {
     text-align: center;
@@ -442,27 +414,19 @@ select:-webkit-autofill:focus {
 }
 
 @media (max-width: 991px) {
-    .nav-container {
+    .sidebar-wrapper {
         position: relative;
     }
 }
 
-.sidebar .nav {
-    margin-top: 0px;
-}
-
-.nav-container {
-    height: 100%;
-}
-
 .nav {
     padding-left: 0;
+    margin-top: 0px;
     margin-bottom: 0;
     list-style: none;
     display: flex;
+    align-items: center;
     flex-direction: column;
-    height: 100%;
-    
 }
 
 .nav:before {
@@ -471,35 +435,14 @@ select:-webkit-autofill:focus {
 }
 
 .nav > li {
-    position: relative;
-    display: block;
+    display: flex;
+    align-items: center;
     height: 40px;
+    width: 60px;
     cursor: pointer;
     margin-top: 5px;
     margin-bottom: 5px;
-}
-
-.nav > li:hover > a > i {
-    // background-color: #eee;
-    color: #a9afbb
-}
-
-.sidebar .nav li > a {
-    // margin: 10px 15px;
-    // border-radius: 3px;
-    transition: all 300ms linear;
-    color: #3c4858;
-}
-
-.sidebar .nav li.item-active > a > i {
-    color: #ffffff;
-}
-
-.item-active {
-    height: 40px;
-    // background-color: #3ea9f5;
-    color: #fff !important;
-    pointer-events: none;
+    justify-content: center;
 }
 
 .is-desktop-menu {
@@ -509,16 +452,6 @@ select:-webkit-autofill:focus {
     margin-top: 0px;
 }
 
-.logo {
-    background-color: #2d323e !important;
-    padding-bottom: 5px;
-    min-height: 60px;
-    width: 60px; // for SMALL SIDEBAR
-
-    a.customAncor{
-        margin: 0px;
-    }
-}
 
 .sidebar .logo:after {
     content: "";
@@ -528,24 +461,14 @@ select:-webkit-autofill:focus {
     height: 1px;
     width: 80%;
     background-color: rgba(180, 180, 180, 0.3);
-
-    
 }
 
 .logo-img-wpr {
     text-transform: none;
-
     min-height: 40px;
     padding-left: 0px !important;
 }
 
-/* *** SMALL SIDEBAR STYLE ***  */
-.small-sidebar-tiledesk-nav-user {
-    height: 40px;
-    min-height: 40px;
-    max-height: 40px;
-}
-
 .small-sidebar-email {
     display: none;
 }
@@ -608,10 +531,10 @@ select:-webkit-autofill:focus {
 // select teammate status in user detail drawer
 .teammate-status-in-drawer {
     &.sidebar{
-        --background-color: #2d323e;
+        --background-color: var(--sidebar-user-detail-select-background);
     }
     &.profile-info{
-        --background-color: #1e2129;
+        --background-color: var(--sidebar-user-profile-select-background);
     }
     &.ng-select {
 
@@ -651,21 +574,21 @@ select:-webkit-autofill:focus {
         .ng-dropdown-panel-items {
             .ng-option {
                 background-color: var(--background-color);
-                color: #fff;
+                color: var(--sidebar-user-detail-select-color);
     
                 &.ng-option-marked {
-                    background-color: rgba(30, 33, 41, 0.3);
-                    color: #fff;
+                    background-color: var(--sidebar-user-detail-select-hover-background);
+                    color: var(--sidebar-user-detail-select-color);
                 }
     
                 &.ng-option-selected {
                     background-color: var(--background-color);
-                    color: #fff;
+                    color: var(--sidebar-user-detail-select-color);
                 }
     
                 &.ng-option-marked.ng-option-selected{
-                    background-color: rgba(30, 33, 41, 0.3);
-                    color: #fff;
+                    background-color: var(--sidebar-user-detail-select-hover-background);
+                    color: var(--sidebar-user-detail-select-color);
                 }
             }
             
@@ -725,34 +648,21 @@ ul.dropdown-menu > li > a {
 /* END - USED WITH SIDWBAR WITH BLACK BACKGROUND */
 
 /* CUSTOM MARGIN BETWEEN THE MENU ITEM*/
-.nav li > a.customAncor {
-    /* margin: 5px 15px !important; */
-
-    margin-top: 5px !important;
-    margin-right: 15px !important;
-    margin-bottom: 5px !important;
-    margin-left: 0px !important;
-    width: 60px;
-    border-radius: 0px;
-}
+// .nav li > a.customAncor {
+//     /* margin: 5px 15px !important; */
+//     margin-top: 5px !important;
+//     margin-right: 15px !important;
+//     margin-bottom: 5px !important;
+//     margin-left: 0px !important;
+//     width: 60px;
+//     border-radius: 0px;
+// }
 
 .sidebar-icons {
     font-size: 20px !important;
     // color: #a9afbb !important;
 }
 
-.sidebar .nav i {
-    // font-size: 20px;
-    // float: left;
-    // margin-right: 15px;
-    // line-height: 30px;
-    width: 60px;
-    text-align: center;
-    // color: #a9afbb;
-    color: #647491;
-    padding-top: 10px;
-}
-
 // ng-select custom class in Create ticket modal
 .ng-select.create-ticket-custom-select {
     margin-top: 5px !important;
@@ -760,6 +670,7 @@ ul.dropdown-menu > li > a {
 
 
 
+
 //MODALS
 //is desktop computers, laptops, and smartphones with a stylus 
 @media (hover: hover) {
@@ -863,40 +774,44 @@ ul.dropdown-menu > li > a {
     font-variant: normal;
     font-weight: 300;
 
-  }
-  .ng-tooltip:after {
+}
+.ng-tooltip:after {
     content: "";
     position: absolute;
     border-style: solid;
-  }
-  .ng-tooltip-top:after {
+}
+.ng-tooltip-top:after {
     top: 100%;
     left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-color: rgb(255, 255, 255) transparent transparent transparent;
-  }
-  .ng-tooltip-bottom:after {
+}
+.ng-tooltip-bottom:after {
     bottom: 100%;
     left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-color: transparent transparent rgb(255, 255, 255) transparent;
-  }
-  .ng-tooltip-left:after {
+}
+.ng-tooltip-left:after {
     top: 50%;
     left: 100%;
     margin-top: -5px;
     border-width: 5px;
     border-color: transparent transparent transparent rgb(255, 255, 255);
-  }
-  .ng-tooltip-right:after {
+}
+.ng-tooltip-right:after {
     top: 50%;
     right: 100%;
     margin-top: -5px;
     border-width: 5px;
     border-color: transparent rgb(255, 255, 255) transparent transparent;
-  }
-  .ng-tooltip-show {
+}
+.ng-tooltip-show {
     opacity: 1;
-  }
+}
+  
+
+
+

package/src/index.html

@@ -10,7 +10,7 @@
   <!-- <base href="./"/>  quando rilascio in prod sostituisco questo base con quello sopra -->
 
   <!-- <meta name="color-scheme" content="light dark" /> disable dark mode: Note in theme/variable.scss is also commented all the code that referts to dark-mode -->
-  <meta name="color-scheme" content="light" />
+  <meta name="color-scheme" content="light"/>
   <meta name="viewport"
     content="width=device-width, height=device-height ,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <meta name="format-detection" content="telephone=no" />