@telia-ace/widget-conversation-flamingo 1.1.22 → 1.1.23-rc.1

package/{conversation-e8c75ee6.mjs → conversation-58dc8b79.mjs}

@@ -1,4 +1,4 @@
-import { C as wt } from "./index-7e47220d.mjs";
+import { C as wt } from "./index-20137b10.mjs";
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -1482,7 +1482,7 @@ class U extends v {
     const i = (c = this.application) == null ? void 0 : c.triggerIcon;
     if (!i)
       return u;
-    const n = async (d) => await import("./index-fd935705.mjs").then(
+    const n = async (d) => await import("./index-9e3fb603.mjs").then(
       (p) => p[d]
     ), { type: r, content: o } = i;
     switch (r) {
@@ -1722,13 +1722,21 @@ class qt extends v {
     t.parent = this, this.nodes.push(t);
   }
   applyBranding() {
-    if (this.wrapperRef.value) {
-      const t = this.application.settings;
-      t != null && t.branding && Ve(t.branding, this.wrapperRef.value);
-    }
+    if (!this.wrapperRef.value)
+      return;
+    const t = this.application.settings;
+    t != null && t.branding && Ve(t.branding, this.wrapperRef.value);
+  }
+  applyStyles() {
+    if (!this.wrapperRef.value)
+      return;
+    const t = this.application.styles(), s = this.wrapperRef.value;
+    Object.entries(t).forEach(([i, n]) => {
+      s.style.setProperty(`--${i}`, n);
+    });
   }
   firstUpdated(t) {
-    this.applyBranding();
+    this.applyBranding(), this.applyStyles();
   }
   render() {
     return this.application.renderStrategy === Gt.Trigger && this.renderRoot.host.classList.add("floating"), $`<div class="widget-container" ${Je(this.wrapperRef)}>
@@ -2256,15 +2264,15 @@ pt.styles = [
         display: inline-block;
         margin-top: var(--spacing-md);
         max-width: 100%;
-        border: 1px solid var(--gray-color);
+        border: 1px solid rgba(255, 255, 255, 0.22);
         border-radius: var(--border-radius);
         background-color: var(--bubble-bg-color);
         color: var(--bubble-text-color);
       }
 
       .conversation-user-message {
-        --bubble-bg-color: var(--conversation-user-bg-color);
-        --bubble-text-color: var(--conversation-user-text-color);
+        --bubble-bg-color: var(--user-bg-color);
+        --bubble-text-color: var(--user-text-color);
         margin-left: 10%;
         width: 90%;
         display: flex;
@@ -2274,7 +2282,7 @@ pt.styles = [
 
       .conversation-agent-message {
         --bubble-bg-color: var(--conversation-agent-bg-color);
-        --bubble-text-color: var(--conversation-agent-text-color);
+        --bubble-text-color: var(--agent-text-color);
         display: grid;
         margin-right: 10%;
         width: 90%;
@@ -2317,7 +2325,7 @@ pt.styles = [
         margin: 0;
         line-height: 1.5em;
         grid-area: info;
-        color: var(--text-color);
+        color: var(--message-info-color, var(--text-color));
         font-size: 0.8rem;
         font-weight: 300;
       }
@@ -2563,11 +2571,33 @@ z.styles = [
         /* --send-icon-color: var(--gray-dark-color, #a6a6a6); */
         --send-icon-opacity: 0.4;
         --send-icon-color: var(--text-color);
-        --conversation-bg: #fafafa;
-        --conversation-agent-bg-color: var(--secondary-background);
-        --conversation-agent-text-color: var(--text-on-secondary-background);
-        --conversation-user-bg-color: var(--primary-background);
-        --conversation-user-text-color: var(--text-on-primary-background);
+        --conversation-bg: var(--conversation-bg-color, #fafafa);
+        --conversation-agent-bg-color: var(
+          var(--conversation-agent-bg-color),
+          var(--secondary-background)
+        );
+        --agent-text-color: var(
+          --conversation-agent-text-color,
+          var(--text-on-secondary-background)
+        );
+        --user-bg-color: var(
+          --conversation-user-bg-color,
+          var(--primary-background)
+        );
+        --user-text-color: var(
+          --conversation-user-text-color,
+          var(--text-on-primary-background)
+        );
+
+        --content-border: var(--conversation-content-border, none);
+        --input-border: var(--conversation-input-border, none);
+        --input-text-color: var(--conversation-input-text-color, inherit);
+        --conversation-input-bg: var(--conversation-input-bg-color, #fff);
+
+        --message-info-color: var(
+          --conversation-message-info-color,
+          var(--text-color)
+        );
 
         scrollbar-width: thin; /* Firefox */
         scrollbar-color: #7f7f7f transparent; /* Firefox */
@@ -2603,11 +2633,12 @@ z.styles = [
         overflow-y: auto;
         overflow-x: hidden;
         border-radius: var(--border-radius-sm);
+        border: var(--content-border);
       }
       .conversation-bottom {
-        border-top: 1px solid var(--gray-color);
+        border: var(--input-border);
         border-radius: var(--border-radius-sm);
-        background-color: #fff;
+        background-color: var(--conversation-input-bg);
         min-height: 50px;
         max-height: 150px;
         display: flex;
@@ -2637,6 +2668,8 @@ z.styles = [
         flex: 1;
         height: 2.5rem;
         outline: none;
+        background-color: transparent;
+        color: var(--input-text-color);
       }
     `
 ];

package/{index-7e47220d.mjs → index-20137b10.mjs}

@@ -1125,7 +1125,7 @@ class M {
   }
 }
 const ie = async (e) => {
-  e.registerComponent("conversation", import("./conversation-e8c75ee6.mjs").then((r) => r.c)), await M.getInstance(e.container);
+  e.registerComponent("conversation", import("./conversation-58dc8b79.mjs").then((r) => r.c)), await M.getInstance(e.container);
 };
 var j = /* @__PURE__ */ ((e) => (e.User = "user", e.Agent = "agent", e.System = "system", e))(j || {});
 class G {