@openkey/sdk 0.12.1-beta.0 → 0.12.1

package/dist/index.mjs

@@ -368,6 +368,7 @@ var IframeModal = class {
   currentLayoutId = 0;
   displayedHeight = 0;
   hasDisplayedLayout = false;
+  revealTimer;
   constructor(opts) {
     this.host = opts.host;
     this.onClose = opts.onClose;
@@ -401,7 +402,9 @@ var IframeModal = class {
     this.card = document.createElement("div");
     this.card.className = "ok-card";
     if (opts.hideUntilLayout) {
-      this.card.style.visibility = "hidden";
+      this.card.inert = true;
+      this.card.style.opacity = "0";
+      this.card.style.pointerEvents = "none";
       this.card.style.animation = "none";
     }
     if (isMobile) {
@@ -418,7 +421,10 @@ var IframeModal = class {
     this.iframe.src = opts.url;
     this.iframe.setAttribute("allow", "clipboard-write *; publickey-credentials-get *; publickey-credentials-create *");
     this.iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox");
-    if (opts.hideUntilLayout) this.iframe.style.visibility = "hidden";
+    if (opts.hideUntilLayout) {
+      this.iframe.style.opacity = "0";
+      this.iframe.style.pointerEvents = "none";
+    }
     this.card.appendChild(this.iframe);
     backdrop.appendChild(this.card);
     this.shadow.appendChild(style);
@@ -444,8 +450,7 @@ var IframeModal = class {
           if (this.phaseV2) this.displayedHeight = h;
         }
         if (this.phaseV2) {
-          this.iframe.style.visibility = "visible";
-          this.card.style.visibility = "visible";
+          this.revealFrame();
           this.postMessage({
             type: "openkey:layout-applied",
             requestId: this.expectedRequestId,
@@ -471,14 +476,25 @@ var IframeModal = class {
   activatePhase(requestId, protocolVersion) {
     this.setExpectedCorrelation(requestId, protocolVersion);
     this.phaseV2 = true;
+    this.revealTimer = setTimeout(() => this.revealFrame(), 5e3);
   }
   isVersionedPhase() {
     return this.phaseV2;
   }
-  revealLegacy() {
+  revealFrame() {
+    clearTimeout(this.revealTimer);
+    this.revealTimer = void 0;
+    this.card.inert = false;
+    this.iframe.style.opacity = "1";
+    this.iframe.style.pointerEvents = "auto";
+    this.card.style.opacity = "1";
+    this.card.style.pointerEvents = "auto";
     this.iframe.style.visibility = "visible";
     this.card.style.visibility = "visible";
   }
+  revealLegacy() {
+    this.revealFrame();
+  }
   hasDisplayedCurrentPhase() {
     return this.hasDisplayedLayout;
   }
@@ -501,6 +517,7 @@ var IframeModal = class {
     this.expectedProtocolVersion = protocolVersion;
   }
   destroy() {
+    clearTimeout(this.revealTimer);
     window.removeEventListener("message", this.messageHandler);
     this.root.remove();
   }