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

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,4 +1,4 @@
1
- import { C as wt } from "./index-7e47220d.mjs";
1
+ import { C as wt } from "./index-20137b10.mjs";
2
2
  /**
3
3
  * @license
4
4
  * Copyright 2019 Google LLC
@@ -1482,7 +1482,7 @@ class U extends v {
1482
1482
  const i = (c = this.application) == null ? void 0 : c.triggerIcon;
1483
1483
  if (!i)
1484
1484
  return u;
1485
- const n = async (d) => await import("./index-fd935705.mjs").then(
1485
+ const n = async (d) => await import("./index-9e3fb603.mjs").then(
1486
1486
  (p) => p[d]
1487
1487
  ), { type: r, content: o } = i;
1488
1488
  switch (r) {
@@ -1722,13 +1722,21 @@ class qt extends v {
1722
1722
  t.parent = this, this.nodes.push(t);
1723
1723
  }
1724
1724
  applyBranding() {
1725
- if (this.wrapperRef.value) {
1726
- const t = this.application.settings;
1727
- t != null && t.branding && Ve(t.branding, this.wrapperRef.value);
1728
- }
1725
+ if (!this.wrapperRef.value)
1726
+ return;
1727
+ const t = this.application.settings;
1728
+ t != null && t.branding && Ve(t.branding, this.wrapperRef.value);
1729
+ }
1730
+ applyStyles() {
1731
+ if (!this.wrapperRef.value)
1732
+ return;
1733
+ const t = this.application.styles(), s = this.wrapperRef.value;
1734
+ Object.entries(t).forEach(([i, n]) => {
1735
+ s.style.setProperty(`--${i}`, n);
1736
+ });
1729
1737
  }
1730
1738
  firstUpdated(t) {
1731
- this.applyBranding();
1739
+ this.applyBranding(), this.applyStyles();
1732
1740
  }
1733
1741
  render() {
1734
1742
  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 = [
2256
2264
  display: inline-block;
2257
2265
  margin-top: var(--spacing-md);
2258
2266
  max-width: 100%;
2259
- border: 1px solid var(--gray-color);
2267
+ border: 1px solid rgba(255, 255, 255, 0.22);
2260
2268
  border-radius: var(--border-radius);
2261
2269
  background-color: var(--bubble-bg-color);
2262
2270
  color: var(--bubble-text-color);
2263
2271
  }
2264
2272
 
2265
2273
  .conversation-user-message {
2266
- --bubble-bg-color: var(--conversation-user-bg-color);
2267
- --bubble-text-color: var(--conversation-user-text-color);
2274
+ --bubble-bg-color: var(--user-bg-color);
2275
+ --bubble-text-color: var(--user-text-color);
2268
2276
  margin-left: 10%;
2269
2277
  width: 90%;
2270
2278
  display: flex;
@@ -2274,7 +2282,7 @@ pt.styles = [
2274
2282
 
2275
2283
  .conversation-agent-message {
2276
2284
  --bubble-bg-color: var(--conversation-agent-bg-color);
2277
- --bubble-text-color: var(--conversation-agent-text-color);
2285
+ --bubble-text-color: var(--agent-text-color);
2278
2286
  display: grid;
2279
2287
  margin-right: 10%;
2280
2288
  width: 90%;
@@ -2317,7 +2325,7 @@ pt.styles = [
2317
2325
  margin: 0;
2318
2326
  line-height: 1.5em;
2319
2327
  grid-area: info;
2320
- color: var(--text-color);
2328
+ color: var(--message-info-color, var(--text-color));
2321
2329
  font-size: 0.8rem;
2322
2330
  font-weight: 300;
2323
2331
  }
@@ -2563,11 +2571,33 @@ z.styles = [
2563
2571
  /* --send-icon-color: var(--gray-dark-color, #a6a6a6); */
2564
2572
  --send-icon-opacity: 0.4;
2565
2573
  --send-icon-color: var(--text-color);
2566
- --conversation-bg: #fafafa;
2567
- --conversation-agent-bg-color: var(--secondary-background);
2568
- --conversation-agent-text-color: var(--text-on-secondary-background);
2569
- --conversation-user-bg-color: var(--primary-background);
2570
- --conversation-user-text-color: var(--text-on-primary-background);
2574
+ --conversation-bg: var(--conversation-bg-color, #fafafa);
2575
+ --conversation-agent-bg-color: var(
2576
+ var(--conversation-agent-bg-color),
2577
+ var(--secondary-background)
2578
+ );
2579
+ --agent-text-color: var(
2580
+ --conversation-agent-text-color,
2581
+ var(--text-on-secondary-background)
2582
+ );
2583
+ --user-bg-color: var(
2584
+ --conversation-user-bg-color,
2585
+ var(--primary-background)
2586
+ );
2587
+ --user-text-color: var(
2588
+ --conversation-user-text-color,
2589
+ var(--text-on-primary-background)
2590
+ );
2591
+
2592
+ --content-border: var(--conversation-content-border, none);
2593
+ --input-border: var(--conversation-input-border, none);
2594
+ --input-text-color: var(--conversation-input-text-color, inherit);
2595
+ --conversation-input-bg: var(--conversation-input-bg-color, #fff);
2596
+
2597
+ --message-info-color: var(
2598
+ --conversation-message-info-color,
2599
+ var(--text-color)
2600
+ );
2571
2601
 
2572
2602
  scrollbar-width: thin; /* Firefox */
2573
2603
  scrollbar-color: #7f7f7f transparent; /* Firefox */
@@ -2603,11 +2633,12 @@ z.styles = [
2603
2633
  overflow-y: auto;
2604
2634
  overflow-x: hidden;
2605
2635
  border-radius: var(--border-radius-sm);
2636
+ border: var(--content-border);
2606
2637
  }
2607
2638
  .conversation-bottom {
2608
- border-top: 1px solid var(--gray-color);
2639
+ border: var(--input-border);
2609
2640
  border-radius: var(--border-radius-sm);
2610
- background-color: #fff;
2641
+ background-color: var(--conversation-input-bg);
2611
2642
  min-height: 50px;
2612
2643
  max-height: 150px;
2613
2644
  display: flex;
@@ -2637,6 +2668,8 @@ z.styles = [
2637
2668
  flex: 1;
2638
2669
  height: 2.5rem;
2639
2670
  outline: none;
2671
+ background-color: transparent;
2672
+ color: var(--input-text-color);
2640
2673
  }
2641
2674
  `
2642
2675
  ];
@@ -1125,7 +1125,7 @@ class M {
1125
1125
  }
1126
1126
  }
1127
1127
  const ie = async (e) => {
1128
- e.registerComponent("conversation", import("./conversation-e8c75ee6.mjs").then((r) => r.c)), await M.getInstance(e.container);
1128
+ e.registerComponent("conversation", import("./conversation-58dc8b79.mjs").then((r) => r.c)), await M.getInstance(e.container);
1129
1129
  };
1130
1130
  var j = /* @__PURE__ */ ((e) => (e.User = "user", e.Agent = "agent", e.System = "system", e))(j || {});
1131
1131
  class G {