@chat21/chat21-web-widget 5.0.56-rc.1 → 5.0.56-rc.3

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

@@ -36,13 +36,6 @@ export class FormTextareaComponent implements OnInit {
     if(this.stylesMap && this.stylesMap.get('foregroundColor')) this.elementRef.nativeElement.style.setProperty('--foregroundColor', this.stylesMap.get('foregroundColor'));
   }
 
-  // ngOnChanges(changes: SimpleChange){
-  //   if(this.hasSubmitted){
-  //     this.input.nativeElement.classList.add('is-focused')
-  //     this.setFormStyle()
-  //   }
-  // }
-
   onFocusOut(){
     this.input.nativeElement.classList.remove('is-focused')
   }
@@ -73,9 +66,6 @@ export class FormTextareaComponent implements OnInit {
     }
   }
 
-
-
-
   setFormStyle(){
     if(this.form.controls[this.controlName].hasError('pattern') || 
       this.form.controls[this.controlName].hasError('required') || 

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

@@ -16,7 +16,6 @@ onFocus="document.querySelector('[start-focus-chat21-prechat-form]').focus()">
                             <svg role="img" aria-labelledby="altIconTitle" [ngStyle]="{'fill': g.themeForegroundColor }" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
                                 <path fill="none" d="M0 0h24v24H0V0z"/>
                                 <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
-                                <!-- <title id="altIconTitle">{{BUTTON_CLOSE_CHAT}}</title> -->
                             </svg>
                         </button>
                     </div>
@@ -26,7 +25,6 @@ onFocus="document.querySelector('[start-focus-chat21-prechat-form]').focus()">
                 <div class="c21-header-content">
                     <!-- TITLE HEADER -->
                     <div class="c21-title" [ngStyle]="{'color': g.themeForegroundColor}">
-                        <!-- <span>{{g.LABEL_SELECT_TOPIC}}</span> -->
                     </div>
                 </div>
 

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

@@ -1,4 +1,4 @@
-@import '../../../sass/variables';
+// @import '../../../sass/variables';
 // @import '../../../sass/normalize.css';
 
 #chat21-prechat-form {
@@ -82,7 +82,7 @@
                         margin: 10px 10px 0px 10px;
                     }
                     .text-danger {
-                        color: $danger;
+                        color: var(--danger);
                         font-size: 1em;
                         min-height: 20px;
                         background-color: #ffffff;

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

@@ -1,5 +1,5 @@
-import { Component, OnInit, Output, EventEmitter, ElementRef, AfterViewInit, ViewChild, Input } from '@angular/core';
-import { FormBuilder, Validators, ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { Globals } from 'src/app/utils/globals';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 

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

@@ -1,4 +1,4 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 // @import '../../../sass/normalize.css';
 
 
@@ -184,10 +184,10 @@
                         border-radius: 16px; //3px;
                         font-size: 1.4em;
                         line-height: 1.4;
-                        color: $black;
+                        color: var(--black);
                         overflow: hidden;
-                        -webkit-box-shadow: 0 4px 15px 0 $trasp-light-black, 0 1px 2px 0 $trasp-light-black;
-                        // box-shadow: 0 4px 15px 0 $trasp-light-black, 0 1px 2px 0 $trasp-light-black;
+                        -webkit-box-shadow: 0 4px 15px 0 var(--trasp-light-black), 0 1px 2px 0 var(--trasp-light-black);
+                        box-shadow: 0 4px 15px 0 var(--trasp-light-black), 0 1px 2px 0 var(--trasp-light-black);
                         z-index: 20;
                         text-align: left;
 
@@ -262,7 +262,7 @@
             padding: 0;
             // margin: 5px 0;
             position: absolute;
-            color: $gray;
+            color: var(--gray);
             top: 0;
             left: 20px; //60px;
             // right: 60px;
@@ -273,7 +273,7 @@
                 text-decoration: none;
                 cursor: pointer;
                 display: inline-block;
-                color: $gray;
+                color: var(--gray);
                 font-size: 1.1em;
                 font-weight: 500;
                 line-height: 22px;
@@ -304,7 +304,7 @@
         .build_version {
             display: none;
             font-size: 1em;
-            color: $gray;
+            color: var(--gray);
             position: absolute;
             bottom: 0px;
             right: 40px; //10px;

package/src/app/component/home/home.component.ts

@@ -1,4 +1,4 @@
-import { ElementRef, ViewChild, Component, OnInit, Input, Output, EventEmitter, ViewEncapsulation, SimpleChanges, AfterViewInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 import { ConversationModel } from '../../../chat21-core/models/conversation';
 import { LoggerService } from '../../../chat21-core/providers/abstract/logger.service';
@@ -6,9 +6,6 @@ import { LoggerInstance } from '../../../chat21-core/providers/logger/loggerInst
 import { convertColorToRGBA } from '../../../chat21-core/utils/utils';
 import { Globals } from '../../utils/globals';
 
-
-
-
 @Component({
   selector: 'chat-home',
   templateUrl: './home.component.html',

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

@@ -1,4 +1,4 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 // @import '../../../sass/normalize.css';
 
 #c21-app-list-conversations{
@@ -10,7 +10,7 @@
 
 
     .c21-header{
-        color: $dark-gray;
+        color: var(--dark-gray);
         height: auto;
         position: relative;
         min-height: 40px; //50px;
@@ -33,12 +33,12 @@
             // padding: 17px 24px 11px 5px;
             padding: 0px 5px;
             float: right;
-            fill: $blue;
+            fill: var(--blue);
             button {
                 width: 40px;
                 height: 40px;
                 svg {
-                    fill: $icon-fill-color;
+                    fill: var(--icon-fill-color);
                 }
             }
             button:hover {
@@ -147,7 +147,7 @@
                     text-align: left;
                     .c21-last-time {
                         font-size: 0.8em;
-                        color: $gray;
+                        color: var(--gray);
                         float: right;
                         display: block;
                         padding: 0;
@@ -231,7 +231,7 @@
         height: auto;
         position: relative;
         // padding: 10px 0 10px 0;
-        border-top: 0px solid $light-gray;
+        border-top: 0px solid var(--light-gray);
         display: flex; //inline-block;
         align-items: center;
         justify-content: center;
@@ -276,7 +276,7 @@
         font-size: 1.2em;
         line-height: 10px;
         border-radius: 50%;
-        background-color: $blue;
+        background-color: var(--blue);
         color: white;
         font-weight: bold;
         padding: 0px;

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

@@ -1,26 +1,24 @@
 
-import { Component, OnInit, Input, Output, EventEmitter, OnDestroy} from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 
-import { Subscription } from 'rxjs'
+import { Subscription } from 'rxjs';
 
 
 import { Globals } from '../../utils/globals';
-import { setColorFromString, avatarPlaceholder, convertMessage } from '../../utils/utils';
+import { avatarPlaceholder, convertMessage, setColorFromString } from '../../utils/utils';
 
 
 // models
-import { ConversationModel } from '../../../chat21-core/models/conversation';
-// import * as moment from 'moment/moment';
-// import 'moment-duration-format';
-import {HumanizeDurationLanguage, HumanizeDuration} from 'humanize-duration-ts';
+import { HumanizeDuration, HumanizeDurationLanguage } from 'humanize-duration-ts';
+import { TranslatorService } from 'src/app/providers/translator.service';
+import { WaitingService } from 'src/app/providers/waiting.service';
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { TranslatorService } from 'src/app/providers/translator.service';
-import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 import { ChatManager } from 'src/chat21-core/providers/chat-manager';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { UserAgent } from 'src/models/userAgent';
-import { WaitingService } from 'src/app/providers/waiting.service';
+import { ConversationModel } from '../../../chat21-core/models/conversation';
 
 
 @Component({
@@ -120,7 +118,6 @@ export class HomeConversationsComponent implements OnInit, OnDestroy {
     this.logger.debug('initialize: ListConversationsComponent');
     this.initTranslations();
 
-    //this.senderId = this.g.senderId;
     this.tenant = this.g.tenant;
     this.LABEL_START_NW_CONV = this.g.LABEL_START_NW_CONV; // IN THE TEMPLATE REPLACED LABEL_START_NW_CONV WITH g.LABEL_START_NW_CONV
     this.listConversations = [];

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

@@ -1,4 +1,4 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 
 :host  .c21-avatar-image ::ng-deep > chat-avatar-image {
 
@@ -61,7 +61,7 @@
 
 
 .messages {
-    border-radius: $border-radius-bubble-message;
+    border-radius: var(--border-radius-bubble-message);
     padding: 0;
     word-wrap: break-word;
 
@@ -284,7 +284,7 @@
 }
 
 /* ==================== MOBILE VERSION ==================== */ 
-@media (max-width: 451px) {
+// @media (max-width: 451px) {
     // #messagePreview {
     //     .boxButtons {
     //         display: block;
@@ -298,4 +298,4 @@
     //         animation: none;
     //     }
     // }
-}
+// }

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

@@ -1,20 +1,17 @@
+import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { MessageModel } from './../../../chat21-core/models/message';
-import { UserModel } from './../../../chat21-core/models/user';
 import { EventsService } from './../../providers/events.service';
-import { Component, OnInit, Output, OnDestroy, AfterViewInit, EventEmitter, Input, SimpleChanges } from '@angular/core';
-import { Subscription } from 'rxjs';
 // services
 import { Globals } from 'src/app/utils/globals';
 
 // utils
-import { popupUrl, isPopupUrl, strip_tags } from '../../utils/utils';
 
 import { MIN_WIDTH_IMAGES } from 'src/app/utils/constants';
 import { ConversationModel } from 'src/chat21-core/models/conversation';
-import { conversationToMessage, isEmojii, isImage } from 'src/chat21-core/utils/utils-message';
-import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { conversationToMessage, isEmojii } from 'src/chat21-core/utils/utils-message';
 
 
 @Component({

package/src/app/component/launcher-button/launcher-button.component.ts

@@ -1,9 +1,9 @@
-import { Component, OnInit, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
 import { Globals } from '../../utils/globals';
 
-import { trigger, state, style, animate, transition } from '@angular/animations';
-import { AppStorageService } from '../../../chat21-core/providers/abstract/app-storage.service';
+import { animate, style, transition, trigger } from '@angular/animations';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
+import { AppStorageService } from '../../../chat21-core/providers/abstract/app-storage.service';
 // vedi: https://angular.io/guide/animations
 
 @Component({

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

@@ -1,4 +1,4 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 // @import '../../../sass/normalize.css';
 
 #c21-app-list-all-conversations {
@@ -190,7 +190,7 @@
             cursor: pointer;
             -webkit-appearance: initial;
             border: none;
-            border-bottom: 1px solid $light-gray;
+            border-bottom: 1px solid var(--light-gray);
             background-color: #ffffff;
             text-align: left;
             

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

@@ -1,11 +1,11 @@
-import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit, IterableDiffers } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, IterableDiffers, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 // services
+import { LoggerInstance } from 'src//chat21-core/providers/logger/loggerInstance';
 import { Globals } from 'src/app/utils/globals';
-import { convertMessage, compareValues } from 'src/app/utils/utils';
+import { compareValues, convertMessage } from 'src/app/utils/utils';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-import { LoggerInstance } from 'src//chat21-core/providers/logger/loggerInstance';
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 
 // models

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

@@ -9,7 +9,7 @@
           </div>
         </div>
         <div class="c21-right-conv">
-          <div class="c21-last-time">{{conversation?.timestamp | amTimeAgo}}</div>
+          <div class="c21-last-time">{{conversation?.timestamp | dateAgo}}</div>
           <div class="truncate c21-name">{{conversation?.sender_fullname }}</div>
           
           <!-- --- IMAGE PREVIEW ICON ---- -->

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

@@ -1,4 +1,4 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 
 :host .c21-msg ::ng-deep > a > img {
     max-width: 24% !important;
@@ -92,7 +92,7 @@
                 text-align: left;
                 .c21-last-time {
                     font-size: 0.8em;
-                    color: $gray;
+                    color: var(--gray);
                     float: right;
                     display: block;
                     padding: 0;
@@ -176,7 +176,7 @@
         font-size: 1.2em;
         line-height: 10px;
         border-radius: 50%;
-        background-color: $blue;
+        background-color: var(--blue);
         color: white;
         font-weight: bold;
         padding: 0px;

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

@@ -1,12 +1,9 @@
-import { TranslatorService } from './../../providers/translator.service';
-import { TranslateService } from '@ngx-translate/core';
-import { Component, EventEmitter, Input, IterableChangeRecord, IterableChanges, IterableDiffers, KeyValueDiffers, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, IterableDiffers, OnInit, Output, SimpleChanges } from '@angular/core';
 import { ConversationModel } from '../../../chat21-core/models/conversation';
-import { setColorFromString, avatarPlaceholder, convertMessage} from '../../utils/utils';
-import { ImageRepoService } from '../../../chat21-core/providers/abstract/image-repo.service';
 import { LoggerService } from '../../../chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from '../../../chat21-core/providers/logger/loggerInstance';
-import * as moment from 'moment';
+import { avatarPlaceholder, convertMessage, setColorFromString } from '../../utils/utils';
+
 @Component({
   selector: 'chat-list-conversations',
   templateUrl: './list-conversations.component.html',

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

@@ -14,9 +14,7 @@
   </div>
   <div *ngIf="g.isOpenMenuOptions" class="modal-menu-options">
     <div class="">
-    
-      <div *ngIf="g.signInWithCustomToken && g.userFullname" class="label-menu-welcome">{{g.userFullname}}</div>  
-
+  
       <div class="c21-button" (click)="toggleSound()">
         <svg *ngIf="!g.soundEnabled" aria-labelledby="altIconTitle" class="icon-menu" xmlns="http://www.w3.org/2000/svg"
             width="20" height="20" viewBox="0 0 24 24">
@@ -43,11 +41,6 @@
         <span *ngIf="g.isLogged && g.showLogoutOption" class="label-menu-item"> {{g.LOGOUT}}</span>
       </div>
       <div class="c21-button build_version_menu">
-        <!-- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" class="icon-menu">
-          <path d="M0 0h24v24H0z" fill="none"/>
-          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-          <title id="altIconTitle">{{g.LOGOUT}}</title>
-        </svg> -->
         <span class="label-menu-item"> {{g.BUILD_VERSION}}</span>
       </div>
 

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

@@ -1,4 +1,4 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 
 #c21-menu-options{
     
@@ -41,7 +41,7 @@
         right: 0px;
     }
     .button-menu-options svg {
-        fill: $icon-fill-color;
+        fill: var(--icon-fill-color);
         display: none;
     }
 
@@ -75,7 +75,7 @@
 }
 
 .build_version_menu {
-    color: $gray;
+    color: var(--gray);
     justify-content: center;
     font-size: 1em;
 }
@@ -125,7 +125,7 @@
     margin: 0 10px 0px 10px;
 }
 .icon-menu {
-    fill: $icon-fill-color;
+    fill: var(--icon-fill-color);
 }
 
 #c21-options-menu .label-menu-item {

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Globals } from 'src/app/utils/globals';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 

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

@@ -46,8 +46,7 @@
       <!-- <div *ngIf="message.type == 'text'"> -->     
 
         
-      <div *ngIf="message?.text" tooltip="{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})"> 
-
+      <div *ngIf="message?.text" tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})">
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
         <chat-text *ngIf="message?.type !=='html'"

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

@@ -1,8 +1,8 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 /* ====== SET MESSAGES ====== */
 
 .messages {
-    border-radius: $border-radius-bubble-message;
+    border-radius: var(--border-radius-bubble-message);
     padding: 0;
     word-wrap: break-word;
     // padding: 14px;
@@ -29,7 +29,7 @@
     }
     
     img {
-        border-radius: $border-radius-bubble-message;
+        border-radius: var(--border-radius-bubble-message);
         padding: 3px;
         margin-bottom: 0px;
         max-width: calc(100% - 6px);

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

@@ -1,5 +1,3 @@
-import * as moment from 'moment';
-
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 

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

@@ -3,10 +3,9 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { MessageModel } from 'src/chat21-core/models/message';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
+import { MAX_WIDTH_IMAGES, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 import { isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
-import { MAX_WIDTH_IMAGES, MIN_WIDTH_IMAGES} from 'src/chat21-core/utils/constants';
 import { getColorBck } from 'src/chat21-core/utils/utils-user';
 
 @Component({
@@ -142,18 +141,6 @@ export class BubbleMessageComponent implements OnInit {
     this.onElementRendered.emit({element: event.element, status: event.status})
   }
 
-
-  // printMessage(message, messageEl, component) {
-  //   const messageOBJ = { message: message, sanitizer: this.sanitizer, messageEl: messageEl, component: component}
-  //   this.onBeforeMessageRender.emit(messageOBJ)
-  //   const messageText = message.text;
-  //   this.onAfterMessageRender.emit(messageOBJ)
-  //   // this.triggerBeforeMessageRender(message, messageEl, component);
-  //   // const messageText = message.text;
-  //   // this.triggerAfterMessageRender(message, messageEl, component);
-  //   return messageText;
-  // }
-
   // ========= END:: event emitter function ============//
 
 

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

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

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

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

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

@@ -1,12 +1,12 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 
 :host {
-    --backgroundColor: #{$blue};
-    --textColor: #{$bck-msg-sent};
-    --hoverBackgroundColor: #{$bck-msg-sent};
-    --hoverTextColor: #{$blue};
-    --buttonFontSize: #{$button-in-msg-font-size};
-    --max-width: #{$button-in-msg-max-width};
+    --backgroundColor: #{var(--blue)};
+    --textColor: #{var(--bck-msg-sent)};
+    --hoverBackgroundColor: #{var(--bck-msg-sent)};
+    --hoverTextColor: #{var(--blue)};
+    --buttonFontSize: #{var(--button-in-msg-font-size)};
+    --max-width: #{var(--button-in-msg-max-width)};
 }
 
 
@@ -43,7 +43,7 @@
         transform: scale(1.05);
         .icon-button-action {
             svg {
-                fill: $black;
+                fill: var(--black);
             }
         }
     }

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

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

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

@@ -1,5 +1,5 @@
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
 @Component({
   selector: 'chat-frame',

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

@@ -1,9 +1,9 @@
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 
 :root {
-    --themeColor: #{$blue};
-    --foregroundColor: #{$col-msg-sent};
-    --buttonFontSize: #{$button-in-msg-font-size};
+    --themeColor: #{var(--blue)};
+    --foregroundColor: #{var(--col-msg-sent)};
+    --buttonFontSize: #{var(--button-in-msg-font-size)};
 }
 
 

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

@@ -1,5 +1,4 @@
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { Component, ElementRef, Input, OnInit, SimpleChange, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, SimpleChanges, ViewChild } from '@angular/core';
 
 @Component({
   selector: 'chat-html',

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

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