@chat21/chat21-web-widget 5.1.0-rc19 → 5.1.0-rc20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -1
- package/package.json +1 -1
- package/src/app/app.component.scss +1 -1
- package/src/app/app.component.ts +3 -0
- package/src/app/component/conversation-detail/conversation/conversation.component.scss +0 -2
- package/src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.html +0 -1
- package/src/app/component/conversation-detail/conversation-content/conversation-content.component.html +0 -4
- package/src/app/component/conversation-detail/conversation-content/conversation-content.component.scss +0 -2
- package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.scss +0 -1
- package/src/app/component/conversation-detail/conversation-header/conversation-header.component.scss +0 -1
- package/src/app/component/conversation-detail/conversation-preview/conversation-preview.component.scss +0 -3
- package/src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.scss +0 -2
- package/src/app/component/form/form-builder/form-builder.component.scss +0 -1
- package/src/app/component/form/inputs/form-text/form-text.component.scss +0 -1
- package/src/app/component/form/inputs/form-textarea/form-textarea.component.scss +0 -1
- package/src/app/component/form/prechat-form/prechat-form.component.scss +0 -2
- package/src/app/component/home/home.component.scss +0 -5
- package/src/app/component/home-conversations/home-conversations.component.scss +0 -3
- package/src/app/component/last-message/last-message.component.html +0 -2
- package/src/app/component/last-message/last-message.component.scss +0 -2
- package/src/app/component/list-all-conversations/list-all-conversations.component.scss +0 -3
- package/src/app/component/list-conversations/list-conversations.component.scss +0 -2
- package/src/app/component/menu-options/menu-options.component.scss +0 -2
- package/src/app/component/message/audio/audio.component.html +1 -1
- package/src/app/component/message/audio/audio.component.scss +1 -0
- package/src/app/component/message/audio/audio.component.ts +0 -1
- package/src/app/component/message/bubble-message/bubble-message.component.html +1 -4
- package/src/app/component/message/bubble-message/bubble-message.component.scss +0 -1
- package/src/app/component/message/bubble-message/bubble-message.component.ts +0 -2
- package/src/app/component/message/buttons/action-button/action-button.component.scss +2 -4
- package/src/app/component/message/buttons/link-button/link-button.component.scss +0 -2
- package/src/app/component/message/buttons/text-button/text-button.component.scss +0 -2
- package/src/app/component/message/carousel/carousel.component.scss +2 -4
- package/src/app/component/message/frame/frame.component.scss +0 -2
- package/src/app/component/message/html/html.component.scss +0 -2
- package/src/app/component/message/image/image.component.scss +0 -2
- package/src/app/component/message/info-message/info-message.component.scss +0 -2
- package/src/app/component/message/like-unlike/like-unlike.component.scss +0 -2
- package/src/app/component/message/text/text.component.html +1 -2
- package/src/app/component/message/text/text.component.scss +2 -4
- package/src/app/component/message/text/text.component.ts +0 -2
- package/src/app/component/selection-department/selection-department.component.scss +0 -4
- package/src/app/component/star-rating-widget/star-rating-widget.component.scss +0 -2
- package/src/app/providers/global-settings.service.ts +36 -2
- package/src/app/sass/_variables.scss +4 -0
- package/src/app/utils/globals.ts +3 -1
- package/src/chat21-core/utils/user-typing/user-typing.component.scss +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -6,7 +6,12 @@
|
|
|
6
6
|
### **Copyrigth**:
|
|
7
7
|
*Tiledesk SRL*
|
|
8
8
|
|
|
9
|
-
# 5.1.0-
|
|
9
|
+
# 5.1.0-rc20
|
|
10
|
+
- **added**: fontFamilySource settings variable
|
|
11
|
+
- **added**: --font-family-bubble-message as variable to manage custom font
|
|
12
|
+
- **removed**: fontSize and fontFamily as input property in bubble-message component
|
|
13
|
+
|
|
14
|
+
# 5.1.0-rc19
|
|
10
15
|
- **added**: ability to maximize, minimize and fullscreen the widget window
|
|
11
16
|
- **added**: variable for font-family attribute css value
|
|
12
17
|
|
package/package.json
CHANGED
|
@@ -273,7 +273,7 @@ chat-root {
|
|
|
273
273
|
position: absolute;
|
|
274
274
|
width: 100%;
|
|
275
275
|
height: 100%;
|
|
276
|
-
font-family:
|
|
276
|
+
font-family: var(--font-family-bubble-message);
|
|
277
277
|
font-size: 10px;
|
|
278
278
|
text-align: left;
|
|
279
279
|
background-color: transparent;
|
package/src/app/app.component.ts
CHANGED
|
@@ -2118,6 +2118,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
2118
2118
|
|
|
2119
2119
|
this.el.nativeElement.style.setProperty('--button-in-msg-background-color', this.g.bubbleSentBackground)
|
|
2120
2120
|
this.el.nativeElement.style.setProperty('--button-in-msg-font-size', this.g.buttonFontSize)
|
|
2121
|
+
this.el.nativeElement.style.setProperty('--font-size-bubble-message', this.g.fontSize)
|
|
2122
|
+
this.el.nativeElement.style.setProperty('--font-family-bubble-message', this.g.fontFamily)
|
|
2123
|
+
|
|
2121
2124
|
}
|
|
2122
2125
|
|
|
2123
2126
|
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
// $f21ico-schedule: image-url('f21ico-schedule.svg', false, false);
|
|
2
2
|
// $f21ico-done: image-url('../assets/images/f21ico-done.svg', false, false);
|
|
3
3
|
// $f21ico-done_all: image-url('../assets/images/f21ico-done_all.svg', false, false);
|
|
4
|
-
// @import 'src/app/sass/variables';
|
|
5
|
-
// @import '../../../sass/normalize.css';
|
|
6
4
|
|
|
7
5
|
:host {
|
|
8
6
|
--themeColor: var(--bck-msg-sent);
|
|
@@ -34,8 +34,6 @@
|
|
|
34
34
|
[ngClass]="{'button-in-msg' : message?.metadata && message?.metadata?.button}"
|
|
35
35
|
[message]="message"
|
|
36
36
|
[fontColor]="stylesMap.get('bubbleSentTextColor')"
|
|
37
|
-
[fontSize]="stylesMap.get('fontSize')"
|
|
38
|
-
[fontFamily]="stylesMap.get('fontFamily')"
|
|
39
37
|
[stylesMap]="stylesMap"
|
|
40
38
|
(onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
|
|
41
39
|
(onAfterMessageRender)="onAfterMessageRenderFN($event)"
|
|
@@ -70,8 +68,6 @@
|
|
|
70
68
|
[isSameSender]="isSameSender(message?.sender, i)"
|
|
71
69
|
[message]="message"
|
|
72
70
|
[fontColor]="stylesMap.get('bubbleReceivedTextColor')"
|
|
73
|
-
[fontSize]="stylesMap.get('fontSize')"
|
|
74
|
-
[fontFamily]="stylesMap.get('fontFamily')"
|
|
75
71
|
[stylesMap]="stylesMap"
|
|
76
72
|
(onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
|
|
77
73
|
(onAfterMessageRender)="onAfterMessageRenderFN($event)"
|
|
@@ -36,8 +36,6 @@
|
|
|
36
36
|
[message]="message"
|
|
37
37
|
[isSameSender]="isSameSender(message?.sender, i)"
|
|
38
38
|
[fontColor]="stylesMap.get('bubbleReceivedTextColor')"
|
|
39
|
-
[fontSize]="stylesMap.get('fontSize')"
|
|
40
|
-
[fontFamily]="stylesMap.get('fontFamily')"
|
|
41
39
|
[stylesMap]="stylesMap"
|
|
42
40
|
(onElementRendered)="onElementRenderedFN($event)">
|
|
43
41
|
</chat-bubble-message>
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
</svg>
|
|
18
18
|
<!-- <i class="material-icons">pause</i> -->
|
|
19
19
|
</button>
|
|
20
|
-
<div class="duration" [style.color]="color"
|
|
20
|
+
<div class="duration" [style.color]="color">
|
|
21
21
|
<span *ngIf="!isPlaying">{{ audioDuration ? formatTime(audioDuration) : '00:00' }}</span>
|
|
22
22
|
<span *ngIf="isPlaying">{{ formatTime(currentTime) }}</span>
|
|
23
23
|
</div>
|
|
@@ -17,7 +17,6 @@ export class AudioComponent implements AfterViewInit {
|
|
|
17
17
|
@Input() audioBlob: Blob | null = null;
|
|
18
18
|
@Input() metadata: any | null = null;
|
|
19
19
|
@Input() color: string;
|
|
20
|
-
@Input() fontSize: string;
|
|
21
20
|
@Input() stylesMap: Map<string, string>;
|
|
22
21
|
|
|
23
22
|
audioUrl: SafeUrl | null = null;
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
<div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender"
|
|
27
27
|
[style.color]="fullnameColor"
|
|
28
|
-
[ngStyle]="{'margin': (isImage(message) || isFrame(message))? '
|
|
28
|
+
[ngStyle]="{'margin': (isImage(message) || isFrame(message))? '12px 16px 8px 16px': '12px 16px 0px 16px'}" class="message_sender_fullname">
|
|
29
29
|
{{message?.sender_fullname}}
|
|
30
30
|
</div>
|
|
31
31
|
<!-- message type:: image -->
|
|
@@ -61,7 +61,6 @@
|
|
|
61
61
|
<chat-audio *ngIf="isAudio(message)"
|
|
62
62
|
[metadata]="message.metadata"
|
|
63
63
|
[color]="fontColor"
|
|
64
|
-
[fontSize]="fontSize"
|
|
65
64
|
[stylesMap]="stylesMap">
|
|
66
65
|
</chat-audio>
|
|
67
66
|
|
|
@@ -82,8 +81,6 @@
|
|
|
82
81
|
<chat-text *ngIf="message?.type !=='html'"
|
|
83
82
|
[text]="message?.text"
|
|
84
83
|
[color]="fontColor"
|
|
85
|
-
[fontSize]="fontSize"
|
|
86
|
-
[fontFamily]="fontFamily"
|
|
87
84
|
(onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
|
|
88
85
|
(onAfterMessageRender)="onAfterMessageRenderFN($event)">
|
|
89
86
|
</chat-text>
|
|
@@ -18,8 +18,6 @@ export class BubbleMessageComponent implements OnInit {
|
|
|
18
18
|
@Input() message: MessageModel;
|
|
19
19
|
@Input() isSameSender: boolean;
|
|
20
20
|
@Input() fontColor: string;
|
|
21
|
-
@Input() fontSize: string;
|
|
22
|
-
@Input() fontFamily: string;
|
|
23
21
|
@Input() stylesMap: Map<string, string>;
|
|
24
22
|
@Output() onBeforeMessageRender = new EventEmitter();
|
|
25
23
|
@Output() onAfterMessageRender = new EventEmitter();
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
@import 'src/app/sass/variables';
|
|
2
|
-
|
|
3
1
|
:host {
|
|
4
2
|
--backgroundColor: #{var(--blue)};
|
|
5
3
|
--textColor: #{var(--bck-msg-sent)};
|
|
@@ -7,7 +5,7 @@
|
|
|
7
5
|
--hoverTextColor: #{var(--blue)};
|
|
8
6
|
--buttonFontSize: #{var(--button-in-msg-font-size)};
|
|
9
7
|
--max-width: #{var(--button-in-msg-max-width)};
|
|
10
|
-
--
|
|
8
|
+
--fontFamily: #{var(--font-family)};
|
|
11
9
|
}
|
|
12
10
|
|
|
13
11
|
.button-in-msg {
|
|
@@ -21,7 +19,7 @@
|
|
|
21
19
|
margin: 3px;
|
|
22
20
|
background: var(--backgroundColor);
|
|
23
21
|
overflow: hidden;
|
|
24
|
-
font-family: var(--
|
|
22
|
+
font-family: var(--fontFamily);
|
|
25
23
|
font-size: var(--buttonFontSize);
|
|
26
24
|
-o-text-overflow: ellipsis;
|
|
27
25
|
text-overflow: ellipsis;
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
@import 'src/app/sass/variables';
|
|
2
|
-
|
|
3
1
|
:host {
|
|
4
2
|
--backgroundColor: #{var(--blue)};
|
|
5
3
|
--textColor: #{var(--bck-msg-sent)};
|
|
@@ -7,7 +5,7 @@
|
|
|
7
5
|
--hoverTextColor: #{var(--blue)};
|
|
8
6
|
--buttonFontSize: #{var(--button-in-msg-font-size)};
|
|
9
7
|
--max-width: #{var(--button-in-msg-max-width)};
|
|
10
|
-
--
|
|
8
|
+
--fontFamily: #{var(--font-family)};
|
|
11
9
|
|
|
12
10
|
--cardWidth: 220px;
|
|
13
11
|
}
|
|
@@ -204,7 +202,7 @@
|
|
|
204
202
|
transition: all .3s;
|
|
205
203
|
|
|
206
204
|
background: var(--backgroundColor);
|
|
207
|
-
font-family: var(--
|
|
205
|
+
font-family: var(--fontFamily);
|
|
208
206
|
font-size: var(--buttonFontSize);
|
|
209
207
|
-o-text-overflow: ellipsis;
|
|
210
208
|
text-overflow: ellipsis;
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
// @import 'src/app/sass/variables';
|
|
2
|
-
|
|
3
1
|
.message_innerhtml {
|
|
4
2
|
margin: 0px;
|
|
5
3
|
// padding: 0px 14px;
|
|
6
4
|
&.marked{
|
|
7
|
-
padding:
|
|
5
|
+
padding: 12px 16px;
|
|
8
6
|
margin-block-start: 0em!important;
|
|
9
7
|
margin-block-end: 0em!important;
|
|
10
8
|
}
|
|
@@ -15,7 +13,7 @@
|
|
|
15
13
|
}
|
|
16
14
|
|
|
17
15
|
p {
|
|
18
|
-
font-size:
|
|
16
|
+
font-size: var(--font-size-bubble-message);
|
|
19
17
|
margin: 0;
|
|
20
18
|
padding: 14px;
|
|
21
19
|
line-height: 1.4em;
|
|
@@ -10,8 +10,6 @@ export class TextComponent implements OnInit {
|
|
|
10
10
|
@Input() text: string;
|
|
11
11
|
@Input() htmlEnabled: boolean = false;
|
|
12
12
|
@Input() color: string;
|
|
13
|
-
@Input() fontSize: string;
|
|
14
|
-
@Input() fontFamily: string;
|
|
15
13
|
@Output() onBeforeMessageRender = new EventEmitter();
|
|
16
14
|
@Output() onAfterMessageRender = new EventEmitter();
|
|
17
15
|
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
// @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
|
|
2
2
|
// @import url(https://use.fontawesome.com/releases/v5.5.0/css/all.css);
|
|
3
|
-
// @import 'src/app/sass/variables';
|
|
4
|
-
|
|
5
3
|
#chat21-star-rating-widget {
|
|
6
4
|
background-color: #ffffff;
|
|
7
5
|
width: 100%;
|
|
@@ -331,6 +331,8 @@ export class GlobalSettingsService {
|
|
|
331
331
|
this.globals.setColorWithGradient();
|
|
332
332
|
/** set css iframe from parameters */
|
|
333
333
|
this.setCssIframe();
|
|
334
|
+
/** set main style */
|
|
335
|
+
this.setStyle();
|
|
334
336
|
|
|
335
337
|
this.logger.debug('[GLOBAL-SET] ***** END SET PARAMETERS *****');
|
|
336
338
|
this.obsSettingsService.next(true);
|
|
@@ -376,6 +378,29 @@ export class GlobalSettingsService {
|
|
|
376
378
|
divTiledeskiframe.classList.add('fullscreen')
|
|
377
379
|
}
|
|
378
380
|
}
|
|
381
|
+
|
|
382
|
+
setStyle(){
|
|
383
|
+
|
|
384
|
+
/** load custom FONT */
|
|
385
|
+
if(this.globals.fontFamily && this.globals.fontFamilySource){
|
|
386
|
+
this.loadFont(this.globals.fontFamily, this.globals.fontFamilySource)
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
loadFont(family: string, href: string,) {
|
|
390
|
+
// controlla se già esiste
|
|
391
|
+
if (document.querySelector(`link[data-font='${family}']`)) {
|
|
392
|
+
return;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
const link = document.createElement('link');
|
|
396
|
+
link.rel = 'stylesheet';
|
|
397
|
+
link.href = href;
|
|
398
|
+
link.setAttribute('data-font', family); // marker per non duplicare
|
|
399
|
+
document.head.appendChild(link);
|
|
400
|
+
|
|
401
|
+
// aggiorna la variabile CSS
|
|
402
|
+
document.documentElement.style.setProperty('--font-family', `'${family}', sans-serif`);
|
|
403
|
+
}
|
|
379
404
|
/**
|
|
380
405
|
* A: setVariablesFromService
|
|
381
406
|
*/
|
|
@@ -930,7 +955,12 @@ export class GlobalSettingsService {
|
|
|
930
955
|
TEMP = tiledeskSettings['fontFamily'];
|
|
931
956
|
// this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fontFamily:: ', TEMP]);
|
|
932
957
|
if (TEMP !== undefined) {
|
|
933
|
-
globals.fontFamily = TEMP;
|
|
958
|
+
globals.fontFamily = TEMP + ',' + globals.fontFamily;
|
|
959
|
+
}
|
|
960
|
+
TEMP = tiledeskSettings['fontFamilySource'];
|
|
961
|
+
// this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fontFamily:: ', TEMP]);
|
|
962
|
+
if (TEMP !== undefined) {
|
|
963
|
+
globals.fontFamilySource = TEMP;
|
|
934
964
|
}
|
|
935
965
|
TEMP = tiledeskSettings['buttonFontSize'];
|
|
936
966
|
// this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > buttonFontSize:: ', TEMP]);
|
|
@@ -1261,7 +1291,11 @@ export class GlobalSettingsService {
|
|
|
1261
1291
|
}
|
|
1262
1292
|
TEMP = el.nativeElement.getAttribute('fontFamily');
|
|
1263
1293
|
if (TEMP !== null) {
|
|
1264
|
-
this.globals.fontFamily = TEMP;
|
|
1294
|
+
this.globals.fontFamily = TEMP + ',' + this.globals.fontFamily;
|
|
1295
|
+
}
|
|
1296
|
+
TEMP = el.nativeElement.getAttribute('fontFamilySource');
|
|
1297
|
+
if (TEMP !== null) {
|
|
1298
|
+
this.globals.fontFamilySource = TEMP;
|
|
1265
1299
|
}
|
|
1266
1300
|
TEMP = el.nativeElement.getAttribute('buttonFontSize');
|
|
1267
1301
|
if (TEMP !== null) {
|
|
@@ -42,7 +42,11 @@
|
|
|
42
42
|
|
|
43
43
|
|
|
44
44
|
--font-family: Mulish, sans-serif;
|
|
45
|
+
--font-family-bubble-message: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
|
|
45
46
|
--font-family-callout: 'Helvetica Neue', 'Apple Color Emoji', Helvetica, Arial, sans-serif;
|
|
47
|
+
|
|
48
|
+
--font-size-bubble-message: 1.4em
|
|
49
|
+
|
|
46
50
|
}
|
|
47
51
|
|
|
48
52
|
$trasp-black:rgba(0,0,0,0.8);
|
package/src/app/utils/globals.ts
CHANGED
|
@@ -221,6 +221,8 @@ export class Globals {
|
|
|
221
221
|
|
|
222
222
|
allowedOnSpecificUrl: boolean // ******* new ********
|
|
223
223
|
allowedOnSpecificUrlList: Array<string> // ******* new ********
|
|
224
|
+
|
|
225
|
+
fontFamilySource: string; // ******* new ********
|
|
224
226
|
constructor(
|
|
225
227
|
) { }
|
|
226
228
|
|
|
@@ -357,7 +359,7 @@ export class Globals {
|
|
|
357
359
|
/** set the text color of bubble received message */
|
|
358
360
|
this.fontSize = '1.4em'
|
|
359
361
|
/** set the text size of bubble messages */
|
|
360
|
-
this.fontFamily = "'Roboto','Google Sans', Helvetica, Arial, sans-serif
|
|
362
|
+
this.fontFamily = "'Roboto','Google Sans', Helvetica, Arial, sans-serif"
|
|
361
363
|
/** set the text family of bubble messages */
|
|
362
364
|
this.buttonFontSize = '15px'
|
|
363
365
|
/** set the text size of attachment-buttons */
|