@telia-ace/widget-conversation-flamingo 1.1.70-rc.17 → 1.1.70-rc.19

package/index.js

@@ -305,6 +305,7 @@
     @media screen and (max-width: 800px) {
       :host(.floating) {
         inset: 0 0 95px 0;
+        height: 100vh;
       }
     }
     @media screen and (min-width: 801px) {
@@ -325,6 +326,10 @@
     :host(.floating) .widget-container {
       box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
       border-radius: 0.7rem;
+
+      @media screen and (max-width: 800px) {
+        border-radius: 0;
+      }
     }
 
     * {
@@ -363,6 +368,7 @@
     :host(.hidden) {
       opacity: 0;
       animation: slideDown 0.3s linear;
+      pointer-events: none;
     }
   `;_a([w({attribute:!1}),xa({context:Sa})],cn.prototype,"application",2);var Ca=Object.defineProperty,Aa=Object.getOwnPropertyDescriptor,hn=(s,e,t,n)=>{for(var i=n>1?void 0:n?Aa(e,t):e,r=s.length-1,o;r>=0;r--)(o=s[r])&&(i=(n?o(e,t,i):o(i))||i);return n&&i&&Ca(e,t,i),i};class ze extends k{constructor(){super(),this.status="deactivated",this.addEventListener("environment-created",this.onEnvironmentCreated)}async connectedCallback(){super.connectedCallback(),await this.getGlobalEnvironment()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("environment-created",this.onEnvironmentCreated)}async onEnvironmentCreated(e){this.widget=e.detail.widget,await this.activate(),this.requestUpdate()}async activate(){this.widget&&(await this.widget.activate(),this.status="activated")}async getGlobalEnvironment(){const e=globalThis.widgets;e&&(this.widget=e.applications.find(t=>t.name===this.name),await this.activate())}render(){if(!this.widget||this.status!=="activated")return g;if(this.widget.renderStrategy===ln.Trigger){const e=new re;return e.application=this.widget,e}return this.widget.render()}}ze.styles=[A`
       :host {
@@ -866,8 +872,10 @@ Please report this to https://github.com/markedjs/marked.`,e){const i="<p>An err
         --input-text-color: var(--conversation-input-text-color, inherit);
         --conversation-input-bg: var(--conversation-input-bg-color, #fff);
 
-        --toast-bg: #eb5185;
-        --toast-text-color: white;
+        --toast-bg: #caeaff;
+        --toast-border: 1px solid #0078cb;
+
+        --toast-text-color: #000;
 
         --error-text-color: #eb5185;
 
@@ -951,6 +959,7 @@ Please report this to https://github.com/markedjs/marked.`,e){const i="<p>An err
       .conversation.conversation--has-toast .conversation-content {
         border-top-right-radius: 0;
         border-top-left-radius: 0;
+        padding-top: var(--spacing-md);
       }
       .conversation.disabled .conversation-bottom {
         --conversation-input-bg: rgba(255, 255, 255, 0.4);
@@ -997,6 +1006,9 @@ Please report this to https://github.com/markedjs/marked.`,e){const i="<p>An err
       }
       .conversation__toast {
         background-color: var(--toast-bg);
+        border: var(--toast-border);
+        border-radius: var(--border-radius-sm);
+        margin: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
         color: var(--toast-text-color);
         padding: var(--spacing-md);
         position: sticky;

package/index.mjs

@@ -3641,6 +3641,7 @@ ln.styles = A`
     @media screen and (max-width: 800px) {
       :host(.floating) {
         inset: 0 0 95px 0;
+        height: 100vh;
       }
     }
     @media screen and (min-width: 801px) {
@@ -3661,6 +3662,10 @@ ln.styles = A`
     :host(.floating) .widget-container {
       box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
       border-radius: 0.7rem;
+
+      @media screen and (max-width: 800px) {
+        border-radius: 0;
+      }
     }
 
     * {
@@ -3699,6 +3704,7 @@ ln.styles = A`
     :host(.hidden) {
       opacity: 0;
       animation: slideDown 0.3s linear;
+      pointer-events: none;
     }
   `;
 wa([
@@ -6366,8 +6372,10 @@ R.styles = [
         --input-text-color: var(--conversation-input-text-color, inherit);
         --conversation-input-bg: var(--conversation-input-bg-color, #fff);
 
-        --toast-bg: #eb5185;
-        --toast-text-color: white;
+        --toast-bg: #caeaff;
+        --toast-border: 1px solid #0078cb;
+
+        --toast-text-color: #000;
 
         --error-text-color: #eb5185;
 
@@ -6451,6 +6459,7 @@ R.styles = [
       .conversation.conversation--has-toast .conversation-content {
         border-top-right-radius: 0;
         border-top-left-radius: 0;
+        padding-top: var(--spacing-md);
       }
       .conversation.disabled .conversation-bottom {
         --conversation-input-bg: rgba(255, 255, 255, 0.4);
@@ -6497,6 +6506,9 @@ R.styles = [
       }
       .conversation__toast {
         background-color: var(--toast-bg);
+        border: var(--toast-border);
+        border-radius: var(--border-radius-sm);
+        margin: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
         color: var(--toast-text-color);
         padding: var(--spacing-md);
         position: sticky;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-conversation-flamingo",
-  "version": "1.1.70-rc.17",
+  "version": "1.1.70-rc.19",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
@@ -9,7 +9,7 @@
     "@lit-labs/motion": "^1.0.4",
     "@teliads/icons": "^8.4.0",
     "@teliads/components": "^22.1.1",
-    "@telia-ace/widget-core-flamingo": "1.1.70-rc.17",
+    "@telia-ace/widget-core-flamingo": "1.1.70-rc.19",
     "lit-html": "^3.0.2",
     "rxjs": "^7.8.1",
     "marked": "^12.0.2"