@juspay/svelte-ui-components 2.74.0 → 2.75.0

package/dist/IframeViewer/IframeViewer.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import type { IframeViewerProperties } from './properties';
+
+  let {
+    src,
+    title = 'Embedded Content',
+    allowedOrigins = [],
+    allow = 'fullscreen',
+    sandbox,
+    loading,
+    referrerpolicy,
+    testId,
+    classes,
+    onMessage = () => {}
+  }: IframeViewerProperties = $props();
+
+  let iframeEl: HTMLIFrameElement | null = $state(null);
+
+  const messageHandler = (event: MessageEvent): void => {
+    // Secure by default: forward a message only when its origin is allow-listed AND it
+    // originates from the embedded iframe's own window. An empty allowedOrigins list
+    // therefore processes nothing.
+    if (
+      allowedOrigins.length === 0 ||
+      !allowedOrigins.includes(event.origin) ||
+      event.source !== iframeEl?.contentWindow
+    ) {
+      return;
+    }
+    onMessage(event);
+  };
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler);
+  });
+
+  onDestroy(() => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+</script>
+
+<div class="iframe-viewer {classes ?? ''}" data-pw={testId}>
+  {#if src}
+    <iframe bind:this={iframeEl} {src} {title} {allow} {sandbox} {loading} {referrerpolicy}
+    ></iframe>
+  {/if}
+</div>
+
+<style>
+  .iframe-viewer {
+    width: var(--iframe-viewer-width, 100%);
+    height: var(--iframe-viewer-height, 100%);
+    display: flex;
+  }
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: var(--iframe-viewer-border, none);
+    border-radius: var(--iframe-viewer-border-radius, 0);
+  }
+</style>

package/dist/IframeViewer/IframeViewer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IframeViewerProperties } from './properties';
+declare const IframeViewer: import("svelte").Component<IframeViewerProperties, {}, "">;
+type IframeViewer = ReturnType<typeof IframeViewer>;
+export default IframeViewer;

package/dist/IframeViewer/properties.d.ts

@@ -0,0 +1,33 @@
+export type IframeViewerProperties = MandatoryIframeViewerProperties & OptionalIframeViewerProperties & IframeViewerEventProperties;
+export type MandatoryIframeViewerProperties = {
+    /** URL loaded into the iframe. */
+    src: string;
+};
+export type OptionalIframeViewerProperties = {
+    /** Accessible title for the iframe (default: `'Embedded Content'`). */
+    title?: string;
+    /**
+     * Origins allowed to send `postMessage` events to `onMessage`. An empty array (the
+     * default) processes nothing — secure by default.
+     */
+    allowedOrigins?: string[];
+    /** Permissions policy for the iframe `allow` attribute (default: `'fullscreen'`). */
+    allow?: string;
+    /** Value for the iframe `sandbox` attribute. Omitted when not set. */
+    sandbox?: string;
+    /** Loading strategy for the iframe. Omitted when not set. */
+    loading?: 'eager' | 'lazy';
+    /** Referrer policy for the iframe. Omitted when not set. */
+    referrerpolicy?: ReferrerPolicy;
+    /** Test selector applied as `data-pw` on the container. */
+    testId?: string;
+    /** Additional CSS classes applied to the container. */
+    classes?: string;
+};
+export type IframeViewerEventProperties = {
+    /**
+     * Called with the `MessageEvent` for `postMessage` events whose origin is in
+     * `allowedOrigins` and whose source is the embedded iframe window.
+     */
+    onMessage?: (event: MessageEvent) => void;
+};

package/dist/IframeViewer/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -52,6 +52,7 @@ export { default as ThemeSwitcher } from './ThemeSwitcher/ThemeSwitcher.svelte';
 export { default as Book } from './Book/Book.svelte';
 export { default as Browser } from './Browser/Browser.svelte';
 export { default as Phone } from './Phone/Phone.svelte';
+export { default as IframeViewer } from './IframeViewer/IframeViewer.svelte';
 export { default as Card } from './Card/Card.svelte';
 export { default as EmptyState } from './EmptyState/EmptyState.svelte';
 export { default as Combobox } from './Combobox/Combobox.svelte';
@@ -114,6 +115,7 @@ export type * from './ThemeSwitcher/properties';
 export type * from './Book/properties';
 export type * from './Browser/properties';
 export type * from './Phone/properties';
+export type * from './IframeViewer/properties';
 export type * from './Loader/properties';
 export type * from './Card/properties';
 export type * from './EmptyState/properties';

package/dist/index.js

@@ -52,6 +52,7 @@ export { default as ThemeSwitcher } from './ThemeSwitcher/ThemeSwitcher.svelte';
 export { default as Book } from './Book/Book.svelte';
 export { default as Browser } from './Browser/Browser.svelte';
 export { default as Phone } from './Phone/Phone.svelte';
+export { default as IframeViewer } from './IframeViewer/IframeViewer.svelte';
 export { default as Card } from './Card/Card.svelte';
 export { default as EmptyState } from './EmptyState/EmptyState.svelte';
 export { default as Combobox } from './Combobox/Combobox.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.74.0",
+  "version": "2.75.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",