@weldsuite/helpdesk-widget-sdk 1.0.7 → 1.0.9

package/dist/angular.esm.js

@@ -651,7 +651,7 @@ class IframeManager {
             }
         }
         else {
-            // Desktop: positioned widget with border and shadow
+            // Desktop: positioned widget with border, shadow and animation
             container.style.cssText = `
         position: fixed;
         bottom: ${widget.position.bottom};
@@ -662,11 +662,15 @@ class IframeManager {
         z-index: 2147483001;
         pointer-events: none;
         display: none;
-        border-radius: 16px;
+        border-radius: 24px;
         overflow: hidden;
         background: #ffffff;
-        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
+        box-shadow: rgba(9, 14, 21, 0.16) 0px 5px 40px 0px;
         border: 1px solid rgba(0, 0, 0, 0.1);
+        opacity: 0;
+        transform: scale(0.95) translateY(10px);
+        transform-origin: bottom right;
+        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       `;
         }
         // Create iframe
@@ -680,7 +684,7 @@ class IframeManager {
       border: none;
       background: transparent;
       display: block;
-      border-radius: ${this.deviceInfo.isMobile ? '0' : '16px'};
+      border-radius: ${this.deviceInfo.isMobile ? '0' : '24px'};
     `;
         iframe.setAttribute('allow', 'clipboard-write; camera; microphone');
         iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups allow-downloads');
@@ -856,6 +860,14 @@ class IframeManager {
         iframe.container.setAttribute('data-state', type === IframeType.BACKDROP ? 'visible' : 'open');
         iframe.container.style.pointerEvents = 'auto';
         iframe.container.style.display = 'block';
+        // Trigger open animation for widget on desktop
+        if (type === IframeType.WIDGET && !this.deviceInfo.isMobile) {
+            // Force reflow to ensure transition works
+            iframe.container.offsetHeight;
+            // Animate to visible state
+            iframe.container.style.opacity = '1';
+            iframe.container.style.transform = 'scale(1) translateY(0)';
+        }
         // Handle mobile scroll lock
         if (this.deviceInfo.isMobile && type === IframeType.WIDGET && this.config.mobile.scrollLock) {
             document.body.classList.add('weld-mobile-open');
@@ -887,7 +899,21 @@ class IframeManager {
         iframe.visible = false;
         iframe.container.setAttribute('data-state', type === IframeType.BACKDROP ? 'hidden' : 'closed');
         iframe.container.style.pointerEvents = 'none';
-        iframe.container.style.display = 'none';
+        // Animate close for widget on desktop, then hide after animation
+        if (type === IframeType.WIDGET && !this.deviceInfo.isMobile) {
+            // Animate to hidden state
+            iframe.container.style.opacity = '0';
+            iframe.container.style.transform = 'scale(0.95) translateY(10px)';
+            // Hide after transition completes
+            setTimeout(() => {
+                if (!iframe.visible) {
+                    iframe.container.style.display = 'none';
+                }
+            }, 200);
+        }
+        else {
+            iframe.container.style.display = 'none';
+        }
         // Remove mobile scroll lock
         if (this.deviceInfo.isMobile && type === IframeType.WIDGET) {
             document.body.classList.remove('weld-mobile-open');
@@ -2217,7 +2243,7 @@ class StateCoordinator {
     }
 }
 
-var version = "1.0.7";
+var version = "1.0.9";
 var packageJson = {
 	version: version};