@vouchfor/embeds 0.0.0-experiment.cf82dbe → 0.0.0-experiment.cfa2fea

package/dist/iife/player-embed/src/components/DialogEmbed/DialogOverlay.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import type { DialogEmbedProps } from '.';
+declare class DialogOverlay extends LitElement {
+    static styles: import("lit").CSSResult[];
+    open: boolean;
+    aspectRatio: DialogEmbedProps['aspectRatio'];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vouch-embed-dialog-overlay': DialogOverlay;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'vouch-embed-dialog-overlay': DialogOverlay;
+        }
+    }
+}
+export { DialogOverlay };

package/dist/iife/player-embed/src/components/DialogEmbed/DialogPortal.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+import type { DialogEmbedProps } from '.';
+declare class DialogPortal extends LitElement {
+    vouchId: DialogEmbedProps['vouchId'];
+    templateId: DialogEmbedProps['templateId'];
+    questions: DialogEmbedProps['questions'];
+    env: DialogEmbedProps['env'];
+    apiKey: DialogEmbedProps['apiKey'];
+    disableTracking: DialogEmbedProps['disableTracking'];
+    trackingSource: DialogEmbedProps['trackingSource'];
+    controls: DialogEmbedProps['controls'];
+    preload: DialogEmbedProps['preload'];
+    disableAutoplay: DialogEmbedProps['disableAutoplay'];
+    aspectRatio: DialogEmbedProps['aspectRatio'];
+    private _mediaPlayerRef;
+    open: boolean;
+    private _handleToggle;
+    private _handleClose;
+    private _handleDocumentKeyUp;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vouch-embed-dialog-portal': DialogPortal;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'vouch-embed-dialog-portal': DialogPortal;
+        }
+    }
+}
+export { DialogPortal };

package/dist/iife/player-embed/src/components/DialogEmbed/index.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import type { PlayerEmbedProps } from '../PlayerEmbed';
+type DialogEmbedProps = Omit<PlayerEmbedProps, 'data'> & {
+    disableAutoplay?: boolean;
+};
+declare class DialogEmbed extends LitElement {
+    static styles: import("lit").CSSResult[];
+    vouchId: DialogEmbedProps['vouchId'];
+    templateId: DialogEmbedProps['templateId'];
+    questions: DialogEmbedProps['questions'];
+    env: DialogEmbedProps['env'];
+    apiKey: DialogEmbedProps['apiKey'];
+    disableTracking: DialogEmbedProps['disableTracking'];
+    trackingSource: DialogEmbedProps['trackingSource'];
+    controls: DialogEmbedProps['controls'];
+    preload: DialogEmbedProps['preload'];
+    disableAutoplay: DialogEmbedProps['disableAutoplay'];
+    aspectRatio: DialogEmbedProps['aspectRatio'];
+    private _id;
+    private _handleRootClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vouch-embed-dialog': DialogEmbed;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'vouch-embed-dialog': DialogEmbed;
+        }
+    }
+}
+export { DialogEmbed };
+export type { DialogEmbedProps };

package/dist/iife/player-embed/src/components/PlayerEmbed/controllers/event-forwarder.d.ts

@@ -0,0 +1,15 @@
+import type { PlayerEmbed } from '..';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { DirectiveResult } from 'lit/directive.js';
+type PlayerEmbedHost = ReactiveControllerHost & PlayerEmbed;
+declare class EventForwardController implements ReactiveController {
+    host: PlayerEmbedHost;
+    private _events;
+    private _cleanup;
+    private _forwardElementRef;
+    constructor(host: PlayerEmbedHost, events: string[]);
+    register(): DirectiveResult;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+export { EventForwardController };

package/dist/iife/player-embed/src/components/PlayerEmbed/controllers/fetcher.d.ts

@@ -0,0 +1,14 @@
+import type { PlayerEmbed } from '..';
+import type { ReactiveControllerHost } from 'lit';
+type PlayerEmbedHost = ReactiveControllerHost & PlayerEmbed;
+declare class FetcherController {
+    host: PlayerEmbedHost;
+    private _fetching;
+    private _vouch;
+    set fetching(value: boolean);
+    get fetching(): boolean;
+    private getVouch;
+    private getTemplate;
+    constructor(host: PlayerEmbedHost);
+}
+export { FetcherController };

package/dist/iife/player-embed/src/components/PlayerEmbed/controllers/tracking/index.d.ts

@@ -0,0 +1,36 @@
+import type { PlayerEmbed } from '../..';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+type PlayerEmbedHost = ReactiveControllerHost & PlayerEmbed;
+type TrackingEvent = 'VOUCH_LOADED' | 'VOUCH_RESPONSE_VIEWED' | 'VIDEO_PLAYED' | 'VIDEO_STREAMED';
+type TrackingPayload = {
+    vouchId?: string;
+    answerId?: string;
+    streamStart?: number;
+    streamEnd?: number;
+};
+declare class TrackingController implements ReactiveController {
+    host: PlayerEmbedHost;
+    private _batchedEvents;
+    private _hasPlayed;
+    private _hasLoaded;
+    private _answersViewed;
+    private _streamStartTime;
+    private _streamLatestTime;
+    private _currentlyPlayingVideo;
+    constructor(host: PlayerEmbedHost);
+    private _createTrackingEvent;
+    private _sendTrackingEvent;
+    private _streamEnded;
+    private _handleVouchLoaded;
+    private _handlePlay;
+    private _handleVideoPlay;
+    private _handleVideoTimeUpdate;
+    private _handleVideoPause;
+    private _pageUnloading;
+    private _handleVisibilityChange;
+    private _handlePageHide;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+export { TrackingController };
+export type { TrackingEvent, TrackingPayload };

package/dist/iife/player-embed/src/components/PlayerEmbed/controllers/tracking/utils.d.ts

@@ -0,0 +1,17 @@
+import type { TrackingPayload } from '.';
+import type { Vouch } from '@vouchfor/media-player';
+import type { Environment } from '../../../../utils/env';
+declare function getUids(env: Environment): {
+    client: null;
+    tab: null;
+    request: string;
+    visitor?: undefined;
+} | {
+    client: string;
+    tab: string;
+    request: string;
+    visitor: string;
+};
+declare function findVouchId(payload?: TrackingPayload, vouch?: Vouch): string | null | undefined;
+declare function getReportingMetadata(source?: string): any;
+export { getUids, findVouchId, getReportingMetadata };

package/dist/iife/player-embed/src/components/PlayerEmbed/index.d.ts

@@ -0,0 +1,73 @@
+import { LitElement } from 'lit';
+import type { Scene, Scenes, TemplateInstance } from '@vouchfor/canvas-video';
+import type { MediaPlayer, MediaPlayerProps } from '@vouchfor/media-player';
+import type { Environment } from '../../utils/env';
+type PlayerEmbedProps = Pick<MediaPlayerProps, 'data' | 'aspectRatio' | 'preload' | 'autoplay' | 'controls'> & {
+    env: Environment;
+    apiKey: string;
+    disableTracking?: boolean;
+    trackingSource?: string;
+    vouchId?: string;
+    templateId?: string;
+    questions?: number[];
+};
+declare class PlayerEmbed extends LitElement {
+    static styles: import("lit").CSSResult[];
+    data: PlayerEmbedProps['data'];
+    vouchId: PlayerEmbedProps['vouchId'];
+    templateId: PlayerEmbedProps['templateId'];
+    questions: PlayerEmbedProps['questions'];
+    env: PlayerEmbedProps['env'];
+    apiKey: PlayerEmbedProps['apiKey'];
+    disableTracking: PlayerEmbedProps['disableTracking'];
+    trackingSource: PlayerEmbedProps['trackingSource'];
+    controls: PlayerEmbedProps['controls'];
+    preload: PlayerEmbedProps['preload'];
+    autoplay: PlayerEmbedProps['autoplay'];
+    aspectRatio: PlayerEmbedProps['aspectRatio'];
+    private eventController;
+    private _fetcherController;
+    private _trackingController;
+    vouch: PlayerEmbedProps['data'];
+    template: TemplateInstance | undefined;
+    get fetching(): boolean;
+    private _mediaPlayerRef;
+    get waiting(): boolean | undefined;
+    get initialised(): Promise<boolean> | undefined;
+    get seeking(): boolean | undefined;
+    get paused(): boolean | undefined;
+    get captions(): boolean | undefined;
+    get fullscreen(): boolean | undefined;
+    get duration(): number | undefined;
+    set currentTime(value: number);
+    get currentTime(): number;
+    set playbackRate(value: number);
+    get playbackRate(): number;
+    set volume(value: number);
+    get volume(): number;
+    set muted(value: boolean);
+    get muted(): boolean;
+    get scene(): Scene | null;
+    get scenes(): Scene[];
+    get sceneConfig(): Scenes | null;
+    get videoState(): import("@vouchfor/media-player/dist/src/components/MediaPlayer/controllers/scenes").VideoStateMap | undefined;
+    get mediaPlayer(): MediaPlayer | undefined;
+    play(): void;
+    pause(): void;
+    reset(time?: number, play?: boolean): void;
+    setScene(index: number): void;
+    private _renderStyles;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vouch-embed-player': PlayerEmbed;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'vouch-embed-player': PlayerEmbed;
+        }
+    }
+}
+export { PlayerEmbed };
+export type { PlayerEmbedProps };

package/dist/iife/player-embed/src/components/PlayerEmbed/tests/data.d.ts

@@ -0,0 +1,3 @@
+import type { Vouch } from '@vouchfor/media-player';
+declare const data: Vouch;
+export { data };

package/dist/iife/player-embed/src/index.d.ts

@@ -0,0 +1,2 @@
+export { PlayerEmbed } from './components/PlayerEmbed';
+export { DialogEmbed } from './components/DialogEmbed';

package/dist/iife/player-embed/src/utils/env.d.ts

@@ -0,0 +1,12 @@
+type Environment = 'local' | 'dev' | 'staging' | 'prod';
+type GetEnvUrlsReturn = {
+    videoUrl: string;
+    publicApiUrl: string;
+    embedApiUrl: string;
+};
+declare const devEmbedApiUrl = "https://embed-dev.vouchfor.com/v2";
+declare const stagingEmbedApiUrl = "https://embed-staging.vouchfor.com/v2";
+declare const prodEmbedApiUrl = "https://embed.vouchfor.com/v2";
+declare function getEnvUrls(env: Environment): GetEnvUrlsReturn;
+export { devEmbedApiUrl, stagingEmbedApiUrl, prodEmbedApiUrl, getEnvUrls };
+export type { Environment };

package/dist/iife/player-embed/src/utils/events.d.ts

@@ -0,0 +1,2 @@
+declare function forwardEvent(type: string, fromElement: HTMLElement, toElement: HTMLElement): () => void;
+export { forwardEvent };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@vouchfor/embeds",
-  "version": "0.0.0-experiment.cf82dbe",
+  "version": "0.0.0-experiment.cfa2fea",
   "license": "MIT",
   "author": "Aaron Williams",
   "main": "dist/es/embeds.js",
   "module": "dist/es/embeds.js",
   "type": "module",
-  "types": "dist/es/index.d.ts",
+  "types": "dist/es/src/index.d.ts",
   "exports": {
     ".": "./dist/es/embeds.js"
   },
@@ -16,8 +16,9 @@
     "access": "public"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc && vite build --mode iife && vite build --mode es",
+    "build": "rm -rf dist && tsc && yarn build:self",
     "build:deps": "yarn --cwd ../media-player build",
+    "build:self": "vite build --mode iife && vite build --mode es && node scripts/build.cjs",
     "build:package": "yarn build",
     "build:storybook": "yarn prebuild && storybook build",
     "generate:manifest": "wca src --outFile custom-elements.json",
@@ -36,8 +37,9 @@
     "**/*.{md,json,yml}": "prettier --write"
   },
   "dependencies": {
+    "@a11y/focus-trap": "^1.0.5",
     "@lit/task": "^1.0.0",
-    "@vouchfor/media-player": "0.0.0-experiment.cf82dbe",
+    "@vouchfor/media-player": "0.0.0-experiment.cfa2fea",
     "uuid": "^9.0.1"
   },
   "peerDependencies": {
@@ -62,11 +64,14 @@
     "dotenv": "^16.3.1",
     "eslint": "^8.50.0",
     "eslint-plugin-import": "^2.28.1",
+    "glob": "^10.3.10",
     "lint-staged": "^14.0.1",
     "lit": "^3.1.0",
+    "lodash": "^4.17.21",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rollup-plugin-internal": "^1.0.4",
     "sinon": "^17.0.1",
     "storybook": "^7.4.5",
     "typescript": "^5.1.3",

package/src/components/DialogEmbed/Dialog.stories.ts

@@ -0,0 +1,91 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import type { DialogEmbedProps } from '.';
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import '.';
+
+type DialogEmbedArgs = DialogEmbedProps & {
+  showVouch?: boolean;
+};
+
+const _DialogEmbed = ({
+  vouchId,
+  templateId,
+  questions,
+  preload,
+  autoplay,
+  env,
+  apiKey,
+  controls,
+  aspectRatio
+}: DialogEmbedArgs) => {
+  return html`
+    <div style="padding: 20px;">
+      <vouch-embed-dialog
+        env=${ifDefined(env)}
+        apiKey=${ifDefined(apiKey)}
+        vouchId=${ifDefined(vouchId)}
+        templateId=${ifDefined(templateId)}
+        .questions=${questions}
+        .controls=${controls}
+        ?autoplay=${autoplay}
+        preload=${ifDefined(preload)}
+        aspectRatio=${ifDefined(aspectRatio)}
+        @error=${console.log}
+      ></vouch-embed-dialog>
+      <vouch-embed-dialog
+        env=${ifDefined(env)}
+        apiKey=${ifDefined(apiKey)}
+        vouchId=${ifDefined(vouchId)}
+        templateId=${ifDefined(templateId)}
+        .questions=${questions}
+        .controls=${controls}
+        ?autoplay=${autoplay}
+        preload=${ifDefined(preload)}
+        aspectRatio=${ifDefined(aspectRatio)}
+        @error=${console.log}
+      ></vouch-embed-dialog>
+    </div>
+  `;
+};
+
+// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
+const meta = {
+  title: 'Dialog',
+  tags: ['autodocs'],
+  render: (args) => _DialogEmbed(args),
+  component: 'vouch-embed-dialog'
+} satisfies Meta<DialogEmbedProps>;
+
+type Story = StoryObj<DialogEmbedArgs>;
+
+const Dialog: Story = {
+  args: {
+    env: 'dev',
+    apiKey: 'TVik9uTMgE-PD25UTHIS6gyl0hMBWC7AT4dkpdlLBT4VIfDWZJrQiCk6Ak7m1',
+    vouchId: '6JQEIPeStt',
+    templateId: '357fc118-e179-4171-9446-ff2b8e9d1b29',
+    questions: [],
+    aspectRatio: 0,
+    preload: 'none',
+    autoplay: false
+  },
+  argTypes: {
+    env: {
+      control: 'radio',
+      options: ['local', 'dev', 'staging', 'prod']
+    },
+    preload: {
+      control: 'radio',
+      options: ['auto', 'none']
+    }
+  },
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+export { Dialog };

package/src/components/DialogEmbed/DialogOverlay.ts

@@ -0,0 +1,131 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import type { DialogEmbedProps } from '.';
+
+import '@a11y/focus-trap';
+
+@customElement('vouch-embed-dialog-overlay')
+class DialogOverlay extends LitElement {
+  static styles = [
+    css`
+      :host {
+        --vouch-media-player-border-radius: var(--vu-media-player-border-radius, 12px);
+        --overlay-background-color: var(--vu-overlay-background-color, black);
+        --overlay-background-opacity: var(--vu-overlay-background-opacity, 0.4);
+
+        --dialog-width: var(--vu-dialog-width, 890px);
+        --dialog-height: var(--vu-dialog-height, 500px);
+      }
+
+      .container {
+        position: fixed;
+        display: flex;
+        inset: 0;
+        opacity: 1;
+        z-index: 2147483647;
+        align-items: center;
+        justify-content: center;
+        transition: opacity 100ms ease-in;
+      }
+
+      .hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .background {
+        position: absolute;
+        inset: 0;
+        opacity: var(--overlay-background-opacity);
+        background-color: var(--overlay-background-color);
+      }
+
+      focus-trap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 40px;
+        width: var(--dialog-width);
+        height: var(--dialog-height);
+        max-width: calc(100% - 80px);
+        max-height: calc(100% - 80px);
+      }
+
+      .video-frame {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      .video-frame.grow {
+        width: 100%;
+        height: 100%;
+      }
+
+      vmp-icon-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: 10px;
+      }
+    `
+  ];
+
+  @property({ type: Boolean }) open = false;
+  @property({ type: Number }) aspectRatio: DialogEmbedProps['aspectRatio'] = 0;
+
+  render() {
+    return html`
+      <div
+        class=${classMap({
+          container: true,
+          hidden: !this.open
+        })}
+      >
+        <div
+          class="background"
+          @click=${() => this.dispatchEvent(new CustomEvent('overlay:click', { bubbles: true, composed: true }))}
+        ></div>
+        <focus-trap>
+          <div
+            class=${classMap({
+              'video-frame': true,
+              grow: this.aspectRatio === 0
+            })}
+            style=${styleMap({
+              aspectRatio: this.aspectRatio
+            })}
+          >
+            <slot></slot>
+            <vmp-icon-button
+              icon="close"
+              rounded="full"
+              weight="heavy"
+              @click=${() => this.dispatchEvent(new CustomEvent('close:click', { bubbles: true, composed: true }))}
+            ></vmp-icon-button>
+          </div>
+        </focus-trap>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vouch-embed-dialog-overlay': DialogOverlay;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'vouch-embed-dialog-overlay': DialogOverlay;
+    }
+  }
+}
+
+export { DialogOverlay };

package/src/components/DialogEmbed/DialogPortal.ts

@@ -0,0 +1,126 @@
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import type { DialogEmbedProps } from '.';
+import type { MediaPlayer } from '@vouchfor/media-player';
+
+import './DialogOverlay';
+
+@customElement('vouch-embed-dialog-portal')
+class DialogPortal extends LitElement {
+  @property({ type: String }) vouchId: DialogEmbedProps['vouchId'];
+  @property({ type: String }) templateId: DialogEmbedProps['templateId'];
+  @property({ type: Array }) questions: DialogEmbedProps['questions'];
+
+  @property({ type: String }) env: DialogEmbedProps['env'] = 'prod';
+  @property({ type: String }) apiKey: DialogEmbedProps['apiKey'] = '';
+  @property({ type: Boolean }) disableTracking: DialogEmbedProps['disableTracking'] = false;
+  @property({ type: String }) trackingSource: DialogEmbedProps['trackingSource'] = 'embedded_player';
+
+  @property({ type: Array }) controls: DialogEmbedProps['controls'];
+  @property({ type: String }) preload: DialogEmbedProps['preload'] = 'none';
+  @property({ type: Boolean }) disableAutoplay: DialogEmbedProps['disableAutoplay'] = false;
+  @property({ type: Number }) aspectRatio: DialogEmbedProps['aspectRatio'] = 0;
+
+  private _mediaPlayerRef = createRef<MediaPlayer>();
+
+  @state() open = false;
+
+  private _handleToggle = ({ detail }: CustomEvent<string>) => {
+    // Because we have to attach this listener to the document since this element is portalled outside of the button,
+    // we also have to make sure that this player is actually the one we want to open and play by passing in an ID
+    // from the button wrapper parent and checking against that same ID we pass as the event detail
+    if (this.id === detail) {
+      this.open = !this.open;
+
+      if (this.open) {
+        if (!this.disableAutoplay && this._mediaPlayerRef?.value) {
+          this._mediaPlayerRef.value.muted = false;
+          this._mediaPlayerRef.value.play();
+        }
+      } else {
+        this._mediaPlayerRef?.value?.pause();
+      }
+    }
+  };
+
+  // We could do the same thing on close and check for the correct ID but it doesn't really matter
+  private _handleClose = () => {
+    this.open = false;
+    this._mediaPlayerRef?.value?.pause();
+  };
+
+  private _handleDocumentKeyUp = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      this._handleClose();
+    }
+  };
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    document.addEventListener('dialogembed:click', this._handleToggle);
+    document.addEventListener('keyup', this._handleDocumentKeyUp);
+    document.addEventListener('close:click', this._handleClose);
+    document.addEventListener('overlay:click', this._handleClose);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.removeEventListener('dialogembed:click', this._handleToggle);
+    document.removeEventListener('keyup', this._handleDocumentKeyUp);
+    document.removeEventListener('close:click', this._handleClose);
+    document.removeEventListener('overlay:click', this._handleClose);
+  }
+
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    // We must create a new node here because portalling into the same node (document.body) causes the second
+    // element to overwrite the first for some reason (not behaviour really stated in the docs)
+    // I am fairly certain this function is only run once as the default behaviour creates the open shadow root
+    // and returns that shadow root in this function: https://lit.dev/docs/components/shadow-dom/#implementing-createrenderroot
+    const newNode = document.createElement('div');
+    document.body.appendChild(newNode);
+    return newNode;
+  }
+
+  render() {
+    return html`
+      <vouch-embed-dialog-overlay ?open=${this.open} aspectRatio=${this.aspectRatio}>
+        <vouch-embed-player
+          ${ref(this._mediaPlayerRef)}
+          style=${styleMap({
+            maxWidth: '100%',
+            maxHeight: '100%'
+          })}
+          ?autoplay=${false}
+          vouchId=${ifDefined(this.vouchId)}
+          templateId=${ifDefined(this.templateId)}
+          .questions=${this.questions}
+          .controls=${this.controls}
+          env=${ifDefined(this.env)}
+          apiKey=${ifDefined(this.apiKey)}
+          ?disableTracking=${this.disableTracking}
+          trackingSource=${ifDefined(this.trackingSource)}
+          preload=${ifDefined(this.preload)}
+          aspectRatio=${this.aspectRatio}
+        ></vouch-embed-player>
+      </vouch-embed-dialog-overlay>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vouch-embed-dialog-portal': DialogPortal;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'vouch-embed-dialog-portal': DialogPortal;
+    }
+  }
+}
+
+export { DialogPortal };