@civic/auth 0.6.0 → 0.6.1-beta.1

package/dist/vanillajs/iframe/IframeManager.js

@@ -0,0 +1,487 @@
+import { CivicIframeResizer } from "./IframeResizer.js";
+import { createIframeShimmerLoader, createCloseButton, } from "../ui/LoadingComponents.js";
+import { createLogger } from "../utils/logger.js";
+export class IframeManager {
+    // Constants for styling and configuration
+    static MODAL_Z_INDEX = "1050";
+    static MODAL_WIDTH = "20rem"; // 320px
+    static MODAL_BACKDROP_COLOR = "rgba(17, 24, 39, 0.5)";
+    static MODAL_BACKDROP_BLUR = "blur(4px)";
+    static BORDER_RADIUS = "24px";
+    static TRANSITION_DURATION = "250ms";
+    static MODAL_MIN_HEIGHT = "26px";
+    static EMBEDDED_MIN_HEIGHT = "225px";
+    static IFRAME_READY_DELAY = 100; // ms
+    iframe = null;
+    container;
+    resizer = null;
+    displayMode;
+    keydownHandler;
+    clickHandler;
+    iframeId;
+    onClose;
+    shimmerLoader = null;
+    closeButton = null;
+    isIframeLoaded = false;
+    iframeReadyMessageListener;
+    logger;
+    constructor(config) {
+        this.container = config.container;
+        this.displayMode = config.displayMode;
+        this.iframeId = config.iframeId || "civic-auth-iframe";
+        this.onClose = config.onClose;
+        this.logger = createLogger("iframe");
+        this.initializeContainer(config);
+        this.setupKeyboardHandlers();
+    }
+    initializeContainer(config) {
+        if (this.displayMode === "modal") {
+            this.applyModalStyles();
+            return;
+        }
+        // Embedded mode
+        this.container.style.position = "relative";
+        this.container.style.width = config.width || "auto";
+        this.container.style.height = config.height || "auto";
+        this.container.style.backgroundColor = "white";
+        this.container.style.borderRadius = IframeManager.BORDER_RADIUS;
+        this.container.style.overflow = "hidden";
+        this.container.style.transition = "all 0.5s ease-in-out";
+    }
+    /**
+     * Applies modal backdrop styles to create a full-screen overlay
+     * Uses !important to override any existing styles
+     */
+    applyModalStyles() {
+        const modalStyles = {
+            position: "fixed",
+            left: "0",
+            top: "0",
+            width: "100vw",
+            height: "100vh",
+            "z-index": IframeManager.MODAL_Z_INDEX,
+            display: "flex",
+            "align-items": "center",
+            "justify-content": "center",
+            "background-color": IframeManager.MODAL_BACKDROP_COLOR,
+            "backdrop-filter": IframeManager.MODAL_BACKDROP_BLUR,
+            opacity: "1",
+            transition: `opacity ${IframeManager.TRANSITION_DURATION} ease`,
+            // Reset any conflicting styles that might prevent modal from working
+            margin: "0",
+            padding: "0",
+            border: "none",
+            "border-radius": "0",
+            "min-height": "100vh",
+        };
+        Object.entries(modalStyles).forEach(([property, value]) => {
+            this.container.style.setProperty(property, value, "important");
+        });
+    }
+    setupKeyboardHandlers() {
+        if (this.displayMode === "modal") {
+            this.keydownHandler = (event) => {
+                if (event.key === "Escape") {
+                    this.onClose?.();
+                }
+            };
+            window.addEventListener("keydown", this.keydownHandler);
+        }
+    }
+    createIframe(url) {
+        // Clean up any existing iframe content, but preserve container styles for modal mode
+        this.cleanupIframeOnly();
+        // Create new iframe
+        this.iframe = document.createElement("iframe");
+        this.iframe.id = this.iframeId;
+        this.iframe.src = url;
+        // Apply iframe styles
+        this.applyIframeStyles();
+        // Add attributes that prevent scrollbars
+        this.setIframeAttributes();
+        // Add CSS to prevent scrollbars
+        this.addScrollbarHidingStyles();
+        // Set up message listener for iframe ready events (more reliable than onload)
+        this.setupIframeMessageListener();
+        // Set up iframe onload handler
+        this.setupIframeOnloadHandler();
+        if (this.displayMode === "modal") {
+            this.setupModalIframe();
+        }
+        else {
+            this.setupEmbeddedIframe();
+        }
+        // Initialize resizer - this will handle all the message-based resizing
+        this.resizer = new CivicIframeResizer(this.iframe, this.container);
+        return this.iframe;
+    }
+    /**
+     * Applies base styles to the iframe element
+     */
+    applyIframeStyles() {
+        if (!this.iframe)
+            return;
+        const baseStyles = {
+            border: "none",
+            display: "block",
+            pointerEvents: "auto",
+            width: "100%",
+            minWidth: "100%",
+            overflow: "hidden",
+            overflowX: "hidden",
+            overflowY: "hidden",
+            opacity: "0",
+            transition: `opacity ${IframeManager.TRANSITION_DURATION} ease, height ${IframeManager.TRANSITION_DURATION} ease`,
+        };
+        Object.entries(baseStyles).forEach(([property, value]) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Required to handle dynamic CSS property assignment since CSSStyleDeclaration type doesn't fully capture all possible properties
+            this.iframe.style[property] = value;
+        });
+        // Set initial height based on display mode
+        if (this.displayMode === "modal") {
+            this.iframe.style.height = IframeManager.MODAL_MIN_HEIGHT;
+            this.iframe.style.minHeight = IframeManager.MODAL_MIN_HEIGHT;
+        }
+        else {
+            this.iframe.style.height = "auto";
+            this.iframe.style.minHeight = IframeManager.EMBEDDED_MIN_HEIGHT; // Embedded mode minimum
+        }
+    }
+    /**
+     * Sets iframe attributes to prevent scrollbars
+     */
+    setIframeAttributes() {
+        if (!this.iframe)
+            return;
+        this.iframe.setAttribute("scrolling", "no");
+        this.iframe.setAttribute("frameborder", "0");
+        this.iframe.setAttribute("seamless", "seamless");
+        // Add additional CSS to prevent scrollbars
+        this.iframe.style.cssText +=
+            "; -ms-overflow-style: none; scrollbar-width: none;";
+    }
+    /**
+     * Adds CSS styles to hide scrollbars across different browsers
+     */
+    addScrollbarHidingStyles() {
+        const iframeStyle = document.createElement("style");
+        iframeStyle.textContent = `
+      iframe[id="${this.iframeId}"] {
+        -webkit-overflow-scrolling: touch !important;
+      }
+      iframe[id="${this.iframeId}"]::webkit-scrollbar {
+        display: none !important;
+        width: 0 !important;
+        height: 0 !important;
+      }
+    `;
+        document.head.appendChild(iframeStyle);
+    }
+    /**
+     * Sets up the message listener for iframe ready events
+     */
+    setupIframeMessageListener() {
+        this.iframeReadyMessageListener = (event) => {
+            try {
+                // Only handle messages from our iframe
+                if (!this.iframe?.contentWindow ||
+                    event.source !== this.iframe.contentWindow) {
+                    return;
+                }
+                const message = event.data;
+                // Handle ready message from iframe resizer
+                if (message.type === "civic-iframe-ready") {
+                    this.logger.debug("Iframe content is ready - hiding shimmer loader");
+                    this.markIframeAsLoaded();
+                }
+            }
+            catch (error) {
+                this.logger.debug("Error processing iframe ready message:", error);
+            }
+        };
+        window.addEventListener("message", this.iframeReadyMessageListener);
+    }
+    /**
+     * Sets up the iframe onload handler with CSS injection
+     */
+    setupIframeOnloadHandler() {
+        if (!this.iframe)
+            return;
+        this.iframe.onload = () => {
+            // Use a small delay to allow ready message to arrive first
+            setTimeout(() => {
+                if (!this.isIframeLoaded) {
+                    this.logger.debug("Iframe onload fired - hiding shimmer loader (fallback)");
+                    this.markIframeAsLoaded();
+                }
+            }, IframeManager.IFRAME_READY_DELAY);
+            try {
+                const iframeDoc = this.iframe?.contentDocument || this.iframe?.contentWindow?.document;
+                if (iframeDoc && iframeDoc.head) {
+                    const style = iframeDoc.createElement("style");
+                    style.textContent = `
+            html, body {
+              overflow: hidden !important;
+              overflow-x: hidden !important;
+              overflow-y: hidden !important;
+              -ms-overflow-style: none !important;
+              scrollbar-width: none !important;
+              margin: 0 !important;
+              padding: 0 !important;
+            }
+            body::-webkit-scrollbar {
+              display: none !important;
+            }
+            * {
+              box-sizing: border-box !important;
+            }
+          `;
+                    iframeDoc.head.appendChild(style);
+                }
+            }
+            catch (error) {
+                this.logger.debug("Could not inject CSS into iframe (likely cross-origin):", error);
+            }
+        };
+    }
+    /**
+     * Sets up the iframe for modal display mode
+     */
+    setupModalIframe() {
+        if (!this.iframe)
+            return;
+        // Ensure modal is visible (in case it was hidden by cleanup)
+        this.container.style.setProperty("display", "flex", "important");
+        // Create content wrapper for modal
+        const contentWrapper = document.createElement("div");
+        contentWrapper.style.position = "relative";
+        contentWrapper.style.overflow = "hidden";
+        contentWrapper.style.width = IframeManager.MODAL_WIDTH; // 320px like React version
+        contentWrapper.style.borderRadius = IframeManager.BORDER_RADIUS;
+        contentWrapper.style.boxShadow =
+            "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+        // Stop propagation on content wrapper to prevent backdrop clicks
+        contentWrapper.addEventListener("click", (e) => {
+            e.stopPropagation();
+        });
+        // Create inner iframe wrapper to match React structure
+        const iframeWrapper = document.createElement("div");
+        iframeWrapper.style.position = "relative";
+        iframeWrapper.style.borderRadius = IframeManager.BORDER_RADIUS;
+        iframeWrapper.style.overflow = "hidden";
+        iframeWrapper.style.overflowX = "hidden";
+        iframeWrapper.style.overflowY = "hidden";
+        iframeWrapper.style.transition = `all ${IframeManager.TRANSITION_DURATION} ease`;
+        iframeWrapper.style.width = "100%";
+        iframeWrapper.style.height = "auto";
+        iframeWrapper.style.minHeight = IframeManager.MODAL_MIN_HEIGHT; // Start small for modal mode
+        // Add shimmer loader for modal mode
+        this.showShimmerLoader(iframeWrapper, "white");
+        // Add close button for modal mode (initially hidden)
+        if (this.onClose) {
+            this.closeButton = createCloseButton(this.onClose);
+            contentWrapper.appendChild(this.closeButton);
+        }
+        // Add iframe to wrapper, then wrapper to content, then content to container
+        iframeWrapper.appendChild(this.iframe);
+        contentWrapper.appendChild(iframeWrapper);
+        this.container.appendChild(contentWrapper);
+        // Add click-to-close functionality after content is added
+        this.clickHandler = (e) => {
+            if (e.target === this.container) {
+                // Only close if clicking the backdrop, not the iframe content
+                this.onClose?.();
+            }
+        };
+        this.container.addEventListener("click", this.clickHandler);
+    }
+    /**
+     * Sets up the iframe for embedded display mode
+     */
+    setupEmbeddedIframe() {
+        if (!this.iframe)
+            return;
+        // Embedded mode - create wrapper with border radius and overflow hidden
+        const iframeWrapper = document.createElement("div");
+        iframeWrapper.style.position = "relative";
+        iframeWrapper.style.borderRadius = IframeManager.BORDER_RADIUS;
+        iframeWrapper.style.overflow = "hidden";
+        iframeWrapper.style.overflowX = "hidden";
+        iframeWrapper.style.overflowY = "hidden";
+        iframeWrapper.style.transition = "all 0.5s ease-in-out";
+        iframeWrapper.style.width = "100%";
+        iframeWrapper.style.height = "auto";
+        iframeWrapper.style.minHeight = IframeManager.EMBEDDED_MIN_HEIGHT; // Embedded mode minimum
+        // Add shimmer loader for embedded mode with max width
+        this.showShimmerLoader(iframeWrapper, "white", IframeManager.MODAL_WIDTH);
+        // Add iframe to wrapper, then wrapper to container
+        iframeWrapper.appendChild(this.iframe);
+        this.container.appendChild(iframeWrapper);
+    }
+    showShimmerLoader(parentElement, backgroundColor = "white", maxWidth) {
+        if (!this.isIframeLoaded && !this.shimmerLoader) {
+            this.shimmerLoader = createIframeShimmerLoader(backgroundColor, maxWidth);
+            parentElement.appendChild(this.shimmerLoader);
+        }
+    }
+    hideShimmerLoader() {
+        if (this.shimmerLoader && this.shimmerLoader.parentNode) {
+            // Add fade-out transition before removing
+            this.shimmerLoader.style.opacity = "0";
+            this.shimmerLoader.style.transition = `opacity ${IframeManager.TRANSITION_DURATION} ease`;
+            // Remove after transition completes
+            setTimeout(() => {
+                if (this.shimmerLoader && this.shimmerLoader.parentNode) {
+                    this.shimmerLoader.parentNode.removeChild(this.shimmerLoader);
+                    this.shimmerLoader = null;
+                }
+            }, parseInt(IframeManager.TRANSITION_DURATION));
+        }
+    }
+    markIframeAsLoaded() {
+        if (!this.isIframeLoaded) {
+            this.isIframeLoaded = true;
+            this.hideShimmerLoader();
+            this.updateWrapperForLoadedContent();
+        }
+    }
+    updateWrapperForLoadedContent() {
+        // Fade in the iframe
+        if (this.iframe) {
+            this.iframe.style.opacity = "1";
+        }
+        // Show close button for modal mode when content is loaded
+        if (this.displayMode === "modal" && this.closeButton) {
+            this.closeButton.style.opacity = "1";
+        }
+        // Find the iframe wrapper and update its styles for loaded content
+        const iframeWrapper = this.iframe?.parentElement;
+        if (iframeWrapper) {
+            // Remove minimum height constraints to allow natural sizing
+            if (this.displayMode === "modal") {
+                iframeWrapper.style.minHeight = "auto";
+            }
+            else {
+                // For embedded mode, keep some minimum but allow natural growth
+                iframeWrapper.style.minHeight = "auto";
+            }
+            // Add border radius transition for loaded state (matching React implementation)
+            iframeWrapper.style.borderRadius = IframeManager.BORDER_RADIUS;
+        }
+    }
+    hide() {
+        if (this.displayMode === "modal") {
+            // Add fade-out transition for modal backdrop
+            this.container.style.opacity = "0";
+            this.container.style.transition = `opacity ${IframeManager.TRANSITION_DURATION} ease`;
+            // Hide after transition completes
+            setTimeout(() => {
+                this.container.style.display = "none";
+            }, parseInt(IframeManager.TRANSITION_DURATION));
+        }
+        else {
+            // For embedded mode, just hide immediately
+            this.container.style.display = "none";
+        }
+    }
+    cleanupIframeOnly() {
+        if (this.resizer) {
+            this.resizer.cleanup();
+            this.resizer = null;
+        }
+        // Clean up shimmer loader
+        this.hideShimmerLoader();
+        // Clean up close button
+        if (this.closeButton && this.closeButton.parentNode) {
+            this.closeButton.parentNode.removeChild(this.closeButton);
+            this.closeButton = null;
+        }
+        // Clean up message listener
+        if (this.iframeReadyMessageListener) {
+            window.removeEventListener("message", this.iframeReadyMessageListener);
+            this.iframeReadyMessageListener = undefined;
+        }
+        if (this.iframe && this.iframe.parentNode) {
+            this.iframe.parentNode.removeChild(this.iframe);
+            this.iframe = null;
+        }
+        // Reset loading state
+        this.isIframeLoaded = false;
+        // Clear container content but DON'T reset styles for modal mode
+        this.container.innerHTML = "";
+    }
+    cleanup() {
+        if (this.resizer) {
+            this.resizer.cleanup();
+            this.resizer = null;
+        }
+        // Clean up shimmer loader
+        this.hideShimmerLoader();
+        // Clean up close button
+        if (this.closeButton && this.closeButton.parentNode) {
+            this.closeButton.parentNode.removeChild(this.closeButton);
+            this.closeButton = null;
+        }
+        // Clean up message listener
+        if (this.iframeReadyMessageListener) {
+            window.removeEventListener("message", this.iframeReadyMessageListener);
+            this.iframeReadyMessageListener = undefined;
+        }
+        if (this.iframe && this.iframe.parentNode) {
+            this.iframe.parentNode.removeChild(this.iframe);
+            this.iframe = null;
+        }
+        // Reset loading state
+        this.isIframeLoaded = false;
+        // Remove keyboard event listener
+        if (this.keydownHandler) {
+            window.removeEventListener("keydown", this.keydownHandler);
+            this.keydownHandler = undefined;
+        }
+        // Remove click event listener
+        if (this.clickHandler) {
+            this.container.removeEventListener("click", this.clickHandler);
+            this.clickHandler = undefined;
+        }
+        // Clear container content and reset styles
+        this.container.innerHTML = "";
+        if (this.displayMode === "modal") {
+            // Reset all modal-specific styles to ensure clean state
+            this.resetModalStyles();
+        }
+    }
+    /**
+     * Resets all modal-specific styles by removing CSS properties that were set with !important
+     */
+    resetModalStyles() {
+        const modalStyleProperties = [
+            "position",
+            "left",
+            "top",
+            "width",
+            "height",
+            "z-index",
+            "display",
+            "align-items",
+            "justify-content",
+            "background-color",
+            "backdrop-filter",
+            "opacity",
+            "transition",
+            "margin",
+            "padding",
+            "border",
+            "border-radius",
+            "min-height",
+        ];
+        modalStyleProperties.forEach((property) => {
+            this.container.style.removeProperty(property);
+        });
+    }
+    resize() {
+        if (this.resizer) {
+            this.resizer.resize();
+        }
+    }
+}
+//# sourceMappingURL=IframeManager.js.map

package/dist/vanillajs/iframe/IframeManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IframeManager.js","sourceRoot":"","sources":["../../../src/vanillajs/iframe/IframeManager.ts"],"names":[],"mappings":"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","sourcesContent":["import { CivicIframeResizer } from \"./IframeResizer.js\";\nimport {\n  createIframeShimmerLoader,\n  createCloseButton,\n} from \"../ui/LoadingComponents.js\";\nimport { createLogger } from \"../utils/logger.js\";\n\nexport interface IframeConfig {\n  container: HTMLElement;\n  displayMode: \"embedded\" | \"modal\";\n  width?: string;\n  height?: string;\n  iframeId?: string;\n  onClose?: () => void;\n}\n\nexport class IframeManager {\n  // Constants for styling and configuration\n  private static readonly MODAL_Z_INDEX = \"1050\";\n  private static readonly MODAL_WIDTH = \"20rem\"; // 320px\n  private static readonly MODAL_BACKDROP_COLOR = \"rgba(17, 24, 39, 0.5)\";\n  private static readonly MODAL_BACKDROP_BLUR = \"blur(4px)\";\n  private static readonly BORDER_RADIUS = \"24px\";\n  private static readonly TRANSITION_DURATION = \"250ms\";\n  private static readonly MODAL_MIN_HEIGHT = \"26px\";\n  private static readonly EMBEDDED_MIN_HEIGHT = \"225px\";\n  private static readonly IFRAME_READY_DELAY = 100; // ms\n\n  private iframe: HTMLIFrameElement | null = null;\n  private container: HTMLElement;\n  private resizer: CivicIframeResizer | null = null;\n  private displayMode: \"embedded\" | \"modal\";\n  private keydownHandler?: (event: KeyboardEvent) => void;\n  private clickHandler?: (event: MouseEvent) => void;\n  private iframeId: string;\n  private onClose?: () => void;\n  private shimmerLoader: HTMLElement | null = null;\n  private closeButton: HTMLButtonElement | null = null;\n  private isIframeLoaded = false;\n  private iframeReadyMessageListener?: (event: MessageEvent) => void;\n  private logger: ReturnType<typeof createLogger>;\n\n  constructor(config: IframeConfig) {\n    this.container = config.container;\n    this.displayMode = config.displayMode;\n    this.iframeId = config.iframeId || \"civic-auth-iframe\";\n    this.onClose = config.onClose;\n    this.logger = createLogger(\"iframe\");\n    this.initializeContainer(config);\n    this.setupKeyboardHandlers();\n  }\n\n  private initializeContainer(config: IframeConfig): void {\n    if (this.displayMode === \"modal\") {\n      this.applyModalStyles();\n      return;\n    }\n\n    // Embedded mode\n    this.container.style.position = \"relative\";\n    this.container.style.width = config.width || \"auto\";\n    this.container.style.height = config.height || \"auto\";\n    this.container.style.backgroundColor = \"white\";\n    this.container.style.borderRadius = IframeManager.BORDER_RADIUS;\n    this.container.style.overflow = \"hidden\";\n    this.container.style.transition = \"all 0.5s ease-in-out\";\n  }\n\n  /**\n   * Applies modal backdrop styles to create a full-screen overlay\n   * Uses !important to override any existing styles\n   */\n  private applyModalStyles(): void {\n    const modalStyles = {\n      position: \"fixed\",\n      left: \"0\",\n      top: \"0\",\n      width: \"100vw\",\n      height: \"100vh\",\n      \"z-index\": IframeManager.MODAL_Z_INDEX,\n      display: \"flex\",\n      \"align-items\": \"center\",\n      \"justify-content\": \"center\",\n      \"background-color\": IframeManager.MODAL_BACKDROP_COLOR,\n      \"backdrop-filter\": IframeManager.MODAL_BACKDROP_BLUR,\n      opacity: \"1\",\n      transition: `opacity ${IframeManager.TRANSITION_DURATION} ease`,\n      // Reset any conflicting styles that might prevent modal from working\n      margin: \"0\",\n      padding: \"0\",\n      border: \"none\",\n      \"border-radius\": \"0\",\n      \"min-height\": \"100vh\",\n    };\n\n    Object.entries(modalStyles).forEach(([property, value]) => {\n      this.container.style.setProperty(property, value, \"important\");\n    });\n  }\n\n  private setupKeyboardHandlers(): void {\n    if (this.displayMode === \"modal\") {\n      this.keydownHandler = (event: KeyboardEvent) => {\n        if (event.key === \"Escape\") {\n          this.onClose?.();\n        }\n      };\n      window.addEventListener(\"keydown\", this.keydownHandler);\n    }\n  }\n\n  public createIframe(url: string): HTMLIFrameElement {\n    // Clean up any existing iframe content, but preserve container styles for modal mode\n    this.cleanupIframeOnly();\n\n    // Create new iframe\n    this.iframe = document.createElement(\"iframe\");\n    this.iframe.id = this.iframeId;\n    this.iframe.src = url;\n\n    // Apply iframe styles\n    this.applyIframeStyles();\n\n    // Add attributes that prevent scrollbars\n    this.setIframeAttributes();\n\n    // Add CSS to prevent scrollbars\n    this.addScrollbarHidingStyles();\n\n    // Set up message listener for iframe ready events (more reliable than onload)\n    this.setupIframeMessageListener();\n\n    // Set up iframe onload handler\n    this.setupIframeOnloadHandler();\n\n    if (this.displayMode === \"modal\") {\n      this.setupModalIframe();\n    } else {\n      this.setupEmbeddedIframe();\n    }\n\n    // Initialize resizer - this will handle all the message-based resizing\n    this.resizer = new CivicIframeResizer(this.iframe, this.container);\n\n    return this.iframe;\n  }\n\n  /**\n   * Applies base styles to the iframe element\n   */\n  private applyIframeStyles(): void {\n    if (!this.iframe) return;\n\n    const baseStyles = {\n      border: \"none\",\n      display: \"block\",\n      pointerEvents: \"auto\",\n      width: \"100%\",\n      minWidth: \"100%\",\n      overflow: \"hidden\",\n      overflowX: \"hidden\",\n      overflowY: \"hidden\",\n      opacity: \"0\",\n      transition: `opacity ${IframeManager.TRANSITION_DURATION} ease, height ${IframeManager.TRANSITION_DURATION} ease`,\n    };\n\n    Object.entries(baseStyles).forEach(([property, value]) => {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Required to handle dynamic CSS property assignment since CSSStyleDeclaration type doesn't fully capture all possible properties\n      this.iframe!.style[property as any] = value;\n    });\n\n    // Set initial height based on display mode\n    if (this.displayMode === \"modal\") {\n      this.iframe!.style.height = IframeManager.MODAL_MIN_HEIGHT;\n      this.iframe!.style.minHeight = IframeManager.MODAL_MIN_HEIGHT;\n    } else {\n      this.iframe!.style.height = \"auto\";\n      this.iframe!.style.minHeight = IframeManager.EMBEDDED_MIN_HEIGHT; // Embedded mode minimum\n    }\n  }\n\n  /**\n   * Sets iframe attributes to prevent scrollbars\n   */\n  private setIframeAttributes(): void {\n    if (!this.iframe) return;\n\n    this.iframe.setAttribute(\"scrolling\", \"no\");\n    this.iframe.setAttribute(\"frameborder\", \"0\");\n    this.iframe.setAttribute(\"seamless\", \"seamless\");\n\n    // Add additional CSS to prevent scrollbars\n    this.iframe.style.cssText +=\n      \"; -ms-overflow-style: none; scrollbar-width: none;\";\n  }\n\n  /**\n   * Adds CSS styles to hide scrollbars across different browsers\n   */\n  private addScrollbarHidingStyles(): void {\n    const iframeStyle = document.createElement(\"style\");\n    iframeStyle.textContent = `\n      iframe[id=\"${this.iframeId}\"] {\n        -webkit-overflow-scrolling: touch !important;\n      }\n      iframe[id=\"${this.iframeId}\"]::webkit-scrollbar {\n        display: none !important;\n        width: 0 !important;\n        height: 0 !important;\n      }\n    `;\n    document.head.appendChild(iframeStyle);\n  }\n\n  /**\n   * Sets up the message listener for iframe ready events\n   */\n  private setupIframeMessageListener(): void {\n    this.iframeReadyMessageListener = (event: MessageEvent) => {\n      try {\n        // Only handle messages from our iframe\n        if (\n          !this.iframe?.contentWindow ||\n          event.source !== this.iframe.contentWindow\n        ) {\n          return;\n        }\n\n        const message = event.data;\n\n        // Handle ready message from iframe resizer\n        if (message.type === \"civic-iframe-ready\") {\n          this.logger.debug(\"Iframe content is ready - hiding shimmer loader\");\n          this.markIframeAsLoaded();\n        }\n      } catch (error) {\n        this.logger.debug(\"Error processing iframe ready message:\", error);\n      }\n    };\n\n    window.addEventListener(\"message\", this.iframeReadyMessageListener);\n  }\n\n  /**\n   * Sets up the iframe onload handler with CSS injection\n   */\n  private setupIframeOnloadHandler(): void {\n    if (!this.iframe) return;\n\n    this.iframe.onload = () => {\n      // Use a small delay to allow ready message to arrive first\n      setTimeout(() => {\n        if (!this.isIframeLoaded) {\n          this.logger.debug(\n            \"Iframe onload fired - hiding shimmer loader (fallback)\",\n          );\n          this.markIframeAsLoaded();\n        }\n      }, IframeManager.IFRAME_READY_DELAY);\n\n      try {\n        const iframeDoc =\n          this.iframe?.contentDocument || this.iframe?.contentWindow?.document;\n        if (iframeDoc && iframeDoc.head) {\n          const style = iframeDoc.createElement(\"style\");\n          style.textContent = `\n            html, body {\n              overflow: hidden !important;\n              overflow-x: hidden !important;\n              overflow-y: hidden !important;\n              -ms-overflow-style: none !important;\n              scrollbar-width: none !important;\n              margin: 0 !important;\n              padding: 0 !important;\n            }\n            body::-webkit-scrollbar {\n              display: none !important;\n            }\n            * {\n              box-sizing: border-box !important;\n            }\n          `;\n          iframeDoc.head.appendChild(style);\n        }\n      } catch (error) {\n        this.logger.debug(\n          \"Could not inject CSS into iframe (likely cross-origin):\",\n          error,\n        );\n      }\n    };\n  }\n\n  /**\n   * Sets up the iframe for modal display mode\n   */\n  private setupModalIframe(): void {\n    if (!this.iframe) return;\n\n    // Ensure modal is visible (in case it was hidden by cleanup)\n    this.container.style.setProperty(\"display\", \"flex\", \"important\");\n\n    // Create content wrapper for modal\n    const contentWrapper = document.createElement(\"div\");\n    contentWrapper.style.position = \"relative\";\n    contentWrapper.style.overflow = \"hidden\";\n    contentWrapper.style.width = IframeManager.MODAL_WIDTH; // 320px like React version\n    contentWrapper.style.borderRadius = IframeManager.BORDER_RADIUS;\n    contentWrapper.style.boxShadow =\n      \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\";\n\n    // Stop propagation on content wrapper to prevent backdrop clicks\n    contentWrapper.addEventListener(\"click\", (e) => {\n      e.stopPropagation();\n    });\n\n    // Create inner iframe wrapper to match React structure\n    const iframeWrapper = document.createElement(\"div\");\n    iframeWrapper.style.position = \"relative\";\n    iframeWrapper.style.borderRadius = IframeManager.BORDER_RADIUS;\n    iframeWrapper.style.overflow = \"hidden\";\n    iframeWrapper.style.overflowX = \"hidden\";\n    iframeWrapper.style.overflowY = \"hidden\";\n    iframeWrapper.style.transition = `all ${IframeManager.TRANSITION_DURATION} ease`;\n    iframeWrapper.style.width = \"100%\";\n    iframeWrapper.style.height = \"auto\";\n    iframeWrapper.style.minHeight = IframeManager.MODAL_MIN_HEIGHT; // Start small for modal mode\n\n    // Add shimmer loader for modal mode\n    this.showShimmerLoader(iframeWrapper, \"white\");\n\n    // Add close button for modal mode (initially hidden)\n    if (this.onClose) {\n      this.closeButton = createCloseButton(this.onClose);\n      contentWrapper.appendChild(this.closeButton);\n    }\n\n    // Add iframe to wrapper, then wrapper to content, then content to container\n    iframeWrapper.appendChild(this.iframe);\n    contentWrapper.appendChild(iframeWrapper);\n    this.container.appendChild(contentWrapper);\n\n    // Add click-to-close functionality after content is added\n    this.clickHandler = (e: MouseEvent) => {\n      if (e.target === this.container) {\n        // Only close if clicking the backdrop, not the iframe content\n        this.onClose?.();\n      }\n    };\n    this.container.addEventListener(\"click\", this.clickHandler);\n  }\n\n  /**\n   * Sets up the iframe for embedded display mode\n   */\n  private setupEmbeddedIframe(): void {\n    if (!this.iframe) return;\n\n    // Embedded mode - create wrapper with border radius and overflow hidden\n    const iframeWrapper = document.createElement(\"div\");\n    iframeWrapper.style.position = \"relative\";\n    iframeWrapper.style.borderRadius = IframeManager.BORDER_RADIUS;\n    iframeWrapper.style.overflow = \"hidden\";\n    iframeWrapper.style.overflowX = \"hidden\";\n    iframeWrapper.style.overflowY = \"hidden\";\n    iframeWrapper.style.transition = \"all 0.5s ease-in-out\";\n    iframeWrapper.style.width = \"100%\";\n    iframeWrapper.style.height = \"auto\";\n    iframeWrapper.style.minHeight = IframeManager.EMBEDDED_MIN_HEIGHT; // Embedded mode minimum\n\n    // Add shimmer loader for embedded mode with max width\n    this.showShimmerLoader(iframeWrapper, \"white\", IframeManager.MODAL_WIDTH);\n\n    // Add iframe to wrapper, then wrapper to container\n    iframeWrapper.appendChild(this.iframe);\n    this.container.appendChild(iframeWrapper);\n  }\n\n  private showShimmerLoader(\n    parentElement: HTMLElement,\n    backgroundColor = \"white\",\n    maxWidth?: string,\n  ): void {\n    if (!this.isIframeLoaded && !this.shimmerLoader) {\n      this.shimmerLoader = createIframeShimmerLoader(backgroundColor, maxWidth);\n      parentElement.appendChild(this.shimmerLoader);\n    }\n  }\n\n  private hideShimmerLoader(): void {\n    if (this.shimmerLoader && this.shimmerLoader.parentNode) {\n      // Add fade-out transition before removing\n      this.shimmerLoader.style.opacity = \"0\";\n      this.shimmerLoader.style.transition = `opacity ${IframeManager.TRANSITION_DURATION} ease`;\n\n      // Remove after transition completes\n      setTimeout(() => {\n        if (this.shimmerLoader && this.shimmerLoader.parentNode) {\n          this.shimmerLoader.parentNode.removeChild(this.shimmerLoader);\n          this.shimmerLoader = null;\n        }\n      }, parseInt(IframeManager.TRANSITION_DURATION));\n    }\n  }\n\n  private markIframeAsLoaded(): void {\n    if (!this.isIframeLoaded) {\n      this.isIframeLoaded = true;\n      this.hideShimmerLoader();\n      this.updateWrapperForLoadedContent();\n    }\n  }\n\n  private updateWrapperForLoadedContent(): void {\n    // Fade in the iframe\n    if (this.iframe) {\n      this.iframe.style.opacity = \"1\";\n    }\n\n    // Show close button for modal mode when content is loaded\n    if (this.displayMode === \"modal\" && this.closeButton) {\n      this.closeButton.style.opacity = \"1\";\n    }\n\n    // Find the iframe wrapper and update its styles for loaded content\n    const iframeWrapper = this.iframe?.parentElement;\n    if (iframeWrapper) {\n      // Remove minimum height constraints to allow natural sizing\n      if (this.displayMode === \"modal\") {\n        iframeWrapper.style.minHeight = \"auto\";\n      } else {\n        // For embedded mode, keep some minimum but allow natural growth\n        iframeWrapper.style.minHeight = \"auto\";\n      }\n\n      // Add border radius transition for loaded state (matching React implementation)\n      iframeWrapper.style.borderRadius = IframeManager.BORDER_RADIUS;\n    }\n  }\n\n  public hide(): void {\n    if (this.displayMode === \"modal\") {\n      // Add fade-out transition for modal backdrop\n      this.container.style.opacity = \"0\";\n      this.container.style.transition = `opacity ${IframeManager.TRANSITION_DURATION} ease`;\n\n      // Hide after transition completes\n      setTimeout(() => {\n        this.container.style.display = \"none\";\n      }, parseInt(IframeManager.TRANSITION_DURATION));\n    } else {\n      // For embedded mode, just hide immediately\n      this.container.style.display = \"none\";\n    }\n  }\n\n  private cleanupIframeOnly(): void {\n    if (this.resizer) {\n      this.resizer.cleanup();\n      this.resizer = null;\n    }\n\n    // Clean up shimmer loader\n    this.hideShimmerLoader();\n\n    // Clean up close button\n    if (this.closeButton && this.closeButton.parentNode) {\n      this.closeButton.parentNode.removeChild(this.closeButton);\n      this.closeButton = null;\n    }\n\n    // Clean up message listener\n    if (this.iframeReadyMessageListener) {\n      window.removeEventListener(\"message\", this.iframeReadyMessageListener);\n      this.iframeReadyMessageListener = undefined;\n    }\n\n    if (this.iframe && this.iframe.parentNode) {\n      this.iframe.parentNode.removeChild(this.iframe);\n      this.iframe = null;\n    }\n\n    // Reset loading state\n    this.isIframeLoaded = false;\n\n    // Clear container content but DON'T reset styles for modal mode\n    this.container.innerHTML = \"\";\n  }\n\n  public cleanup(): void {\n    if (this.resizer) {\n      this.resizer.cleanup();\n      this.resizer = null;\n    }\n\n    // Clean up shimmer loader\n    this.hideShimmerLoader();\n\n    // Clean up close button\n    if (this.closeButton && this.closeButton.parentNode) {\n      this.closeButton.parentNode.removeChild(this.closeButton);\n      this.closeButton = null;\n    }\n\n    // Clean up message listener\n    if (this.iframeReadyMessageListener) {\n      window.removeEventListener(\"message\", this.iframeReadyMessageListener);\n      this.iframeReadyMessageListener = undefined;\n    }\n\n    if (this.iframe && this.iframe.parentNode) {\n      this.iframe.parentNode.removeChild(this.iframe);\n      this.iframe = null;\n    }\n\n    // Reset loading state\n    this.isIframeLoaded = false;\n\n    // Remove keyboard event listener\n    if (this.keydownHandler) {\n      window.removeEventListener(\"keydown\", this.keydownHandler);\n      this.keydownHandler = undefined;\n    }\n\n    // Remove click event listener\n    if (this.clickHandler) {\n      this.container.removeEventListener(\"click\", this.clickHandler);\n      this.clickHandler = undefined;\n    }\n\n    // Clear container content and reset styles\n    this.container.innerHTML = \"\";\n\n    if (this.displayMode === \"modal\") {\n      // Reset all modal-specific styles to ensure clean state\n      this.resetModalStyles();\n    }\n  }\n\n  /**\n   * Resets all modal-specific styles by removing CSS properties that were set with !important\n   */\n  private resetModalStyles(): void {\n    const modalStyleProperties = [\n      \"position\",\n      \"left\",\n      \"top\",\n      \"width\",\n      \"height\",\n      \"z-index\",\n      \"display\",\n      \"align-items\",\n      \"justify-content\",\n      \"background-color\",\n      \"backdrop-filter\",\n      \"opacity\",\n      \"transition\",\n      \"margin\",\n      \"padding\",\n      \"border\",\n      \"border-radius\",\n      \"min-height\",\n    ];\n\n    modalStyleProperties.forEach((property) => {\n      this.container.style.removeProperty(property);\n    });\n  }\n\n  public resize(): void {\n    if (this.resizer) {\n      this.resizer.resize();\n    }\n  }\n}\n"]}

package/dist/vanillajs/iframe/IframeResizer.d.ts

@@ -0,0 +1,15 @@
+export declare class CivicIframeResizer {
+    private iframe;
+    private container;
+    private logger;
+    private messageListener;
+    private requestSizeTimeouts;
+    constructor(iframe: HTMLIFrameElement, container: HTMLElement);
+    private initializeResizer;
+    private handleMessage;
+    private requestSizeFromChild;
+    private resizeIframe;
+    cleanup(): void;
+    resize(): void;
+}
+//# sourceMappingURL=IframeResizer.d.ts.map

package/dist/vanillajs/iframe/IframeResizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IframeResizer.d.ts","sourceRoot":"","sources":["../../../src/vanillajs/iframe/IframeResizer.ts"],"names":[],"mappings":"AAeA,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,eAAe,CAAgD;IACvE,OAAO,CAAC,mBAAmB,CAAgB;gBAE/B,MAAM,EAAE,iBAAiB,EAAE,SAAS,EAAE,WAAW;IAQ7D,OAAO,CAAC,iBAAiB;IA0BzB,OAAO,CAAC,aAAa;IAiCrB,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,YAAY;IAyCb,OAAO,IAAI,IAAI;IAef,MAAM,IAAI,IAAI;CAItB"}