Merge branch 'master' into features/TO-master/generic-bug-fix-3

Author: dariodepa75

CHANGELOG.md

@@ -6,15 +6,17 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
-# changes in the branch 
+# 5.1.13 
 - **bug-fixed**: set default widget size
 - **changed**: Updated the translations of the tooltips in the footer-component
 - **changed**: Refactored the network-offline component and made it generic for displaying errors (now error-alert.component)
+- **bug-fixed**: set the color of the buttons with visibility control to the font color (setButtonColors function)
 
 # 5.1.12
 - **bug-fixed**: check showEmojiFooterButton to enable/disable emojii
 - **bug-fixed**: markdown is fired as an emojii and blocked by isEmojii check fn
 
+
 # 5.1.7-rc5
 - **bug-fixed**: bug fixed BUTTON STYLES
 

package-lock.json

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

package.json

@@ -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){

src/app/component/message/buttons/action-button/action-button.component.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,22 +322,34 @@ 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();
         /** set css iframe from parameters */
         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);    
+        
+    }
+
     /**
      *
      */

src/app/providers/global-settings.service.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)) {