@chat21/chat21-web-widget 5.1.8-ar → 5.1.9-ar

package/CHANGELOG.md

@@ -6,6 +6,9 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.9-ar
+- **bug-fixed**: set default widget size
+
 # 5.1.8-ar
 - **changed**: update emoji detection logic in conversation-footer and utils
 - **bug-fixed**: 'DOMAIN_NOT_ALLOWED' in textarea footer component
@@ -23,6 +26,9 @@
 # 5.1.7-rc6
 - **added**: Added MAX_ATTACHMENT_ERROR error message when uploading a file larger than 10 MB
 
+# this branch
+- **bug-fixed**: set the color of the buttons with visibility control to the font color (setButtonColors function)
+
 # 5.1.7-rc5
 - **bug-fixed**: bug fixed BUTTON STYLES
 

package/package.json

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

package/src/app/app.component.ts

@@ -401,9 +401,11 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.triggerLoadParamsEvent(); // first trigger
         //this.setAvailableAgentsStatus();
 
-
         /** NETWORK STATUS */
-        this.listenToNetworkStatus()
+        this.listenToNetworkStatus();
+
+        /** SET WIDGET SIZE */
+        this.onWidgetSizeChange(this.g.size);
 
     }
 
@@ -727,7 +729,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         // visualizzo l'iframe!!!
         this.triggerOnViewInit();
         this.g.setParentBodyStyleMobile(this.g.isOpen, this.g.isMobile);
-        this.g.setElementStyle(this.g.isOpen)
+        this.g.setElementStyle(this.g.isOpen);
         // this.triggerOnAuthStateChanged(true)
         // mostro il widget
         // setTimeout(() => {

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

@@ -1,4 +1,5 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { getColorBck } from 'src/chat21-core/utils/utils-user';
 
 @Component({
   selector: 'chat-action-button-attachment',
@@ -26,9 +27,10 @@ export class ActionButtonComponent implements OnInit {
     //decomment if element should have same color of themeColor and fregroundColor
     if(this.fontSize) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--buttonFontSize', this.fontSize);
     if(this.backgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--buttonBackgroundColor', this.backgroundColor);
-    if(this.textColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--textColor', this.textColor);
+    if(this.textColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--buttonTextColor', this.textColor);
     if(this.hoverBackgroundColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverBackgroundColor', this.hoverBackgroundColor);
     if(this.hoverTextColor) this.elementRef.nativeElement.querySelector('.action').style.setProperty('--hoverTextColor', this.hoverTextColor);
+    
   }
 
   onMouseOver(event){

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

@@ -10,7 +10,7 @@ import { TemplateBindingParseResult } from '@angular/compiler';
 import { AppStorageService } from '../../chat21-core/providers/abstract/app-storage.service';
 import { LoggerService } from '../../chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from '../../chat21-core/providers/logger/loggerInstance';
-import { invertColor, isAllowedUrlInText, isJsonArray } from '../../chat21-core/utils/utils';
+import { ensureAccessibleTextColor, invertColor, isAllowedUrlInText, isJsonArray, normalizeColorToHex } from '../../chat21-core/utils/utils';
 import { AppConfigService } from './app-config.service';
 
 
@@ -322,10 +322,14 @@ export class GlobalSettingsService {
         if (response !== null) {
             this.setVariablesFromService(this.globals, response);
         }
+        /** set button colors */
+        this.setButtonColors();
+
         this.setVariableFromStorage(this.globals);
         this.setVariablesFromSettings(this.globals);
         this.setVariablesFromAttributeHtml(this.globals, this.el);
         this.setVariablesFromUrlParameters(this.globals);
+        
         this.setDepartmentFromExternal();
         /** set color with gradient from theme's colors */
         this.globals.setColorWithGradient();
@@ -333,11 +337,19 @@ export class GlobalSettingsService {
         this.setCssIframe();
         /** set main style */
         this.setStyle();
-
-        this.logger.debug('[GLOBAL-SET] ***** END SET PARAMETERS *****');
         this.obsSettingsService.next(true);
     }
 
+    private setButtonColors() {
+        this.logger.debug('[GLOBAL-SET] ***** END SET PARAMETERS *****', this.globals);
+        const bubbleSentBackground = this.globals?.bubbleSentBackground;
+        const buttonBackgroundColor = this.globals?.buttonBackgroundColor;
+
+            this.globals.buttonTextColor = ensureAccessibleTextColor(buttonBackgroundColor, bubbleSentBackground);    
+            this.globals.buttonHoverTextColor = ensureAccessibleTextColor(bubbleSentBackground, buttonBackgroundColor);    
+        
+    }
+
     /**
      *
      */
@@ -1936,7 +1948,7 @@ export class GlobalSettingsService {
         if (this.globals.departmentID) {
             this.globals.departments.forEach(department => {
                 if (department._id === this.globals.departmentID) {
-                    this.logger.debug('[GLOBAL-SET] setDepartmentFromExternal > EXTERNAL DEPARTMENT ::::' + department._id);
+                    console.log('[GLOBAL-SET] setDepartmentFromExternal > EXTERNAL DEPARTMENT ::::' + department._id);
                     this.globals.setParameter('departmentDefault', department);
                     this.setDepartment(department);
                     isValidID = true;
@@ -1964,7 +1976,7 @@ export class GlobalSettingsService {
      * save attributes in this.appStorageService
     */
     setDepartment(department) {
-        this.logger.debug('[GLOBAL-SET] setDepartment: ', JSON.stringify(department));
+        this.logger.log('[GLOBAL-SET] setDepartment: ', JSON.stringify(department));
         this.globals.setParameter('departmentSelected', department);
         // let attributes = this.globals.attributes;
         let attributes: any = JSON.parse(this.appStorageService.getItem('attributes'));

package/src/chat21-core/utils/utils.ts

@@ -389,6 +389,115 @@ export function convertColorToRGBA(color, opacity) {
   return result;
 }
 
+export function normalizeColorToHex(input?: string): string | null {
+  if (!input) {
+    return null;
+  }
+  let color = input.trim();
+  if (color.toLowerCase().includes('gradient')) {
+    const match = color.match(/(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\))/);
+    if (!match) {
+      return null;
+    }
+    color = match[0];
+  }
+  if (color.startsWith('#')) {
+    const hex = color.slice(1);
+    if (hex.length === 3) {
+      return (
+        '#' +
+        hex
+          .split('')
+          .map((char) => char + char)
+          .join('')
+          .toLowerCase()
+      );
+    }
+    if (hex.length === 4) {
+      return (
+        '#' +
+        hex
+          .slice(0, 3)
+          .split('')
+          .map((char) => char + char)
+          .join('')
+          .toLowerCase()
+      );
+    }
+    if (hex.length === 6 || hex.length === 8) {
+      return '#' + hex.slice(0, 6).toLowerCase();
+    }
+    return null;
+  }
+  const rgbaMatch = color.match(/rgba?\s*\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/i);
+  if (rgbaMatch) {
+    const [, r, g, b] = rgbaMatch;
+    const toHex = (value: number) => {
+      const clamped = Math.max(0, Math.min(255, Math.round(value)));
+      return clamped.toString(16).padStart(2, '0');
+    };
+    return `#${toHex(parseFloat(r))}${toHex(parseFloat(g))}${toHex(parseFloat(b))}`;
+  }
+  return null;
+}
+
+export function ensureAccessibleTextColor(backgroundColor?: string, fontColor?: string, minContrast = 4.5): string | null {
+  const bgHex = normalizeColorToHex(backgroundColor);
+  if (!bgHex) {
+    return normalizeColorToHex(fontColor);
+  }
+
+  const fontHex = normalizeColorToHex(fontColor);
+  if (fontHex && getContrastRatio(bgHex, fontHex) >= minContrast) {
+    return fontHex;
+  }
+
+  const blackContrast = getContrastRatio(bgHex, '#000000');
+  const whiteContrast = getContrastRatio(bgHex, '#ffffff');
+  return blackContrast >= whiteContrast ? '#000000' : '#ffffff';
+}
+
+function getContrastRatio(backgroundHex: string, foregroundHex: string): number {
+  const bg = hexToRgb(backgroundHex);
+  const fg = hexToRgb(foregroundHex);
+  if (!bg || !fg) {
+    return 1;
+  }
+  const l1 = relativeLuminance(bg);
+  const l2 = relativeLuminance(fg);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+function relativeLuminance({ r, g, b }: { r: number; g: number; b: number }): number {
+  const srgb = [r, g, b].map((value) => {
+    const channel = value / 255;
+    return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2];
+}
+
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  let value = hex.replace('#', '');
+  if (value.length === 3) {
+    value = value
+      .split('')
+      .map((char) => char + char)
+      .join('');
+  }
+  if (value.length !== 6) {
+    return null;
+  }
+  const r = parseInt(value.slice(0, 2), 16);
+  const g = parseInt(value.slice(2, 4), 16);
+  const b = parseInt(value.slice(4, 6), 16);
+  if ([r, g, b].some((channel) => Number.isNaN(channel))) {
+    return null;
+  }
+  return { r, g, b };
+}
+
 
 // export function setLanguage(windowContext, translatorService) {
 //   if (translatorService.getBrowserLanguage(windowContext)) {