@weldsuite/helpdesk-widget-sdk 1.0.3 → 1.0.5

package/dist/angular.esm.js

@@ -620,7 +620,7 @@ class IframeManager {
         container.setAttribute('data-state', 'closed');
         // Apply different styles for mobile vs desktop
         if (this.deviceInfo.isMobile) {
-            // Mobile: full-screen
+            // Mobile: full-screen with dynamic viewport height to handle URL bar
             container.style.cssText = `
         position: fixed;
         top: 0;
@@ -628,6 +628,7 @@ class IframeManager {
         right: 0;
         bottom: 0;
         width: 100vw;
+        height: 100dvh;
         height: 100vh;
         z-index: 2147483001;
         pointer-events: none;
@@ -636,9 +637,13 @@ class IframeManager {
         overflow: hidden;
         background: transparent;
       `;
+            // Use visualViewport API for accurate height on mobile browsers
+            if (window.visualViewport) {
+                container.style.height = `${window.visualViewport.height}px`;
+            }
         }
         else {
-            // Desktop: positioned widget
+            // Desktop: positioned widget - apply border and shadow to container
             container.style.cssText = `
         position: fixed;
         bottom: ${widget.position.bottom};
@@ -651,7 +656,9 @@ class IframeManager {
         display: none;
         border-radius: 16px;
         overflow: hidden;
-        background: transparent;
+        background: #ffffff;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
       `;
         }
         // Create iframe
@@ -751,6 +758,11 @@ class IframeManager {
         window.addEventListener('resize', this.handleResize.bind(this));
         // Orientation change
         window.addEventListener('orientationchange', this.handleOrientationChange.bind(this));
+        // Visual viewport resize (handles mobile URL bar and keyboard)
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener('resize', this.handleVisualViewportResize.bind(this));
+            window.visualViewport.addEventListener('scroll', this.handleVisualViewportResize.bind(this));
+        }
         this.logger.debug('Event listeners setup');
     }
     /**
@@ -767,6 +779,21 @@ class IframeManager {
         this.deviceInfo = detectDevice();
         this.logger.debug('Orientation changed', { orientation: this.deviceInfo.orientation });
     }
+    /**
+     * Handle visual viewport resize (mobile URL bar, keyboard)
+     */
+    handleVisualViewportResize() {
+        if (!this.deviceInfo.isMobile || !window.visualViewport)
+            return;
+        const widget = this.iframes.get(IframeType.WIDGET);
+        if (widget && widget.visible) {
+            const vh = window.visualViewport.height;
+            const offsetTop = window.visualViewport.offsetTop;
+            widget.container.style.height = `${vh}px`;
+            widget.container.style.top = `${offsetTop}px`;
+            this.logger.debug('Visual viewport resized', { height: vh, offsetTop });
+        }
+    }
     /**
      * Get iframe by type
      */
@@ -824,6 +851,18 @@ class IframeManager {
         if (this.deviceInfo.isMobile && type === IframeType.WIDGET && this.config.mobile.scrollLock) {
             document.body.classList.add('weld-mobile-open');
         }
+        // Hide launcher on mobile when widget is open (full-screen mode)
+        if (this.deviceInfo.isMobile && type === IframeType.WIDGET) {
+            const launcher = this.iframes.get(IframeType.LAUNCHER);
+            if (launcher) {
+                launcher.container.style.display = 'none';
+            }
+            // Apply accurate viewport height using visualViewport API
+            if (window.visualViewport) {
+                iframe.container.style.height = `${window.visualViewport.height}px`;
+                iframe.container.style.top = `${window.visualViewport.offsetTop}px`;
+            }
+        }
         console.log(`[Weld SDK] Iframe ${type} shown`, { newDisplay: iframe.container.style.display });
     }
     /**
@@ -844,6 +883,13 @@ class IframeManager {
         if (this.deviceInfo.isMobile && type === IframeType.WIDGET) {
             document.body.classList.remove('weld-mobile-open');
         }
+        // Show launcher again on mobile when widget is closed
+        if (this.deviceInfo.isMobile && type === IframeType.WIDGET) {
+            const launcher = this.iframes.get(IframeType.LAUNCHER);
+            if (launcher) {
+                launcher.container.style.display = 'block';
+            }
+        }
         console.log(`[Weld SDK] Iframe ${type} hidden`, { newDisplay: iframe.container.style.display });
     }
     /**
@@ -2031,7 +2077,7 @@ class StateCoordinator {
     }
 }
 
-var version = "1.0.3";
+var version = "1.0.5";
 var packageJson = {
 	version: version};