@mux/mux-player 0.1.0-beta.21

package/dist/types-ts3.4/index.d.ts

@@ -0,0 +1,180 @@
+import '@mux/playback-core';
+import { MediaController } from 'media-chrome';
+import { MediaError } from '@mux/mux-video';
+import { Metadata } from '@mux/playback-core';
+import VideoApiElement from './video-api';
+export { MediaError };
+export declare type Tokens = {
+    playback?: string;
+    thumbnail?: string;
+    storyboard?: string;
+};
+declare type MediaController = Element & {
+    media: HTMLVideoElement;
+};
+declare class MuxPlayerElement extends VideoApiElement {
+    private "MuxPlayerElement.#private";
+    static readonly observedAttributes: string[];
+    constructor();
+    readonly theme: Element | null | undefined;
+    readonly mediaController: MediaController | null | undefined;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string): void;
+    readonly hasPlayed: boolean;
+    readonly inLiveWindow: boolean | undefined;
+    /*
+    * @deprecated please use ._hls instead
+    */
+    readonly hls: import("hls.js").default | undefined;
+    readonly _hls: import("hls.js").default | undefined;
+    readonly mux: Readonly<import("../../../types/mux").MuxOnVideoElement | import("../../../types/mux").DeletedMuxOnVideoElement | undefined>;
+    /*
+    * Get the thumbnailTime offset used for the poster image.
+    
+    
+    * Set the thumbnailTime offset used for the poster image.
+    */
+    audio: boolean;
+    /*
+    * Get the thumbnailTime offset used for the poster image.
+    
+    
+    * Set the thumbnailTime offset used for the poster image.
+    */
+    thumbnailTime: number | undefined;
+    /*
+    * Get the primary color used by the player.
+    
+    
+    * Set the primary color used by the player.
+    */
+    primaryColor: string | undefined;
+    /*
+    * Get the secondary color used by the player.
+    
+    
+    * Set the secondary color used by the player.
+    */
+    secondaryColor: string | undefined;
+    /*
+    * Get the offset applied to the forward seek button.
+    
+    
+    * Set the offset applied to the forward seek button.
+    */
+    forwardSeekOffset: number | undefined;
+    /*
+    * Get the offset applied to the backward seek button.
+    
+    
+    * Set the offset applied to the forward seek button.
+    */
+    backwardSeekOffset: number | undefined;
+    /*
+    * Get the boolean value of default hidden captions.
+    * By default returns false so captions are enabled on initial load.
+    */
+    readonly defaultHiddenCaptions: boolean;
+    /*
+    * Get the player software name. Used by Mux Data.
+    */
+    readonly playerSoftwareName: string;
+    /*
+    * Get the player software version. Used by Mux Data.
+    */
+    readonly playerSoftwareVersion: any;
+    /*
+    * Get the beacon collection domain. Used by Mux Data.
+    
+    
+    * Set the beacon collection domain. Used by Mux Data.
+    */
+    beaconCollectionDomain: string | undefined;
+    /*
+    * Get Mux asset playback id.
+    
+    
+    * Set Mux asset playback id.
+    */
+    playbackId: string | undefined;
+    /*
+    * Get Mux asset custom domain.
+    
+    
+    * Set Mux asset custom domain.
+    */
+    customDomain: string | undefined;
+    /*
+    * Get Mux Data env key.
+    
+    
+    * Set Mux Data env key.
+    */
+    envKey: string | undefined;
+    /*
+    * Get video engine debug flag.
+    
+    
+    * Set video engine debug flag.
+    */
+    debug: boolean;
+    /*
+    * Get stream type.
+    
+    
+    * Set stream type.
+    */
+    streamType: string | null;
+    /*
+    * Get the start time.
+    
+    
+    * Set the start time.
+    */
+    startTime: number | undefined;
+    /*
+    * Get the preference flag for using media source.
+    
+    
+    * Set the preference flag for using media source.
+    */
+    preferMse: boolean;
+    /*
+    * Get the metadata object for Mux Data.
+    
+    
+    * Set the metadata object for Mux Data.
+    */
+    metadata: Readonly<Metadata> | undefined;
+    /*
+    * Get the signing tokens for the Mux asset URL's.
+    
+    
+    * Set the signing tokens for the Mux asset URL's.
+    */
+    tokens: Tokens;
+    /*
+    * Get the playback token for signing the src URL.
+    
+    
+    * Set the playback token for signing the src URL.
+    */
+    playbackToken: string | undefined;
+    /*
+    * Get the thumbnail token for signing the poster URL.
+    
+    
+    * Set the thumbnail token for signing the poster URL.
+    */
+    thumbnailToken: string | undefined;
+    /*
+    * Get the storyboard token for signing the storyboard URL.
+    
+    
+    * Set the storyboard token for signing the storyboard URL.
+    */
+    storyboardToken: string | undefined;
+}
+export declare function getVideoAttribute(el: MuxPlayerElement, name: string): string | null;
+export default MuxPlayerElement;

package/dist/types-ts3.4/logger.d.ts

@@ -0,0 +1,5 @@
+import { DevlogOptions } from './types';
+export declare function log(...args: any[]): void;
+export declare function warn(...args: any[]): void;
+export declare function error(...args: any[]): void;
+export declare function devlog(opts: DevlogOptions): void;

package/dist/types-ts3.4/media-chrome/dialog.d.ts

@@ -0,0 +1,12 @@
+declare class MediaDialog extends HTMLElement {
+    static styles: string;
+    static template: HTMLTemplateElement;
+    static observedAttributes: string[];
+    _previouslyFocusedElement?: Element | null;
+    constructor();
+    show(): void;
+    close(): void;
+    attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string): void;
+    connectedCallback(): void;
+}
+export default MediaDialog;

package/dist/types-ts3.4/media-chrome/time-display.d.ts

@@ -0,0 +1,9 @@
+declare class MxpTimeDisplay extends HTMLElement {
+    static styles: string;
+    static template: HTMLTemplateElement;
+    timeDisplayEl: HTMLElement | null | undefined;
+    constructor();
+    toggleTimeDisplay(): void;
+    connectedCallback(): void;
+}
+export default MxpTimeDisplay;

package/dist/types-ts3.4/media-theme-mux/icons.d.ts

@@ -0,0 +1,15 @@
+export declare const Airplay: () => import("@github/template-parts").TemplateInstance;
+export declare const CaptionsOff: () => import("@github/template-parts").TemplateInstance;
+export declare const CaptionsOn: () => import("@github/template-parts").TemplateInstance;
+export declare const FullscreenEnter: () => import("@github/template-parts").TemplateInstance;
+export declare const FullscreenExit: () => import("@github/template-parts").TemplateInstance;
+export declare const Pause: () => import("@github/template-parts").TemplateInstance;
+export declare const PipEnter: () => import("@github/template-parts").TemplateInstance;
+export declare const PipExit: () => import("@github/template-parts").TemplateInstance;
+export declare const Play: () => import("@github/template-parts").TemplateInstance;
+export declare const SeekBackward: (p: any) => import("@github/template-parts").TemplateInstance;
+export declare const SeekForward: (p: any) => import("@github/template-parts").TemplateInstance;
+export declare const VolumeHigh: () => import("@github/template-parts").TemplateInstance;
+export declare const VolumeLow: () => import("@github/template-parts").TemplateInstance;
+export declare const VolumeMedium: () => import("@github/template-parts").TemplateInstance;
+export declare const VolumeOff: () => import("@github/template-parts").TemplateInstance;

package/dist/types-ts3.4/media-theme-mux/media-theme-mux.d.ts

@@ -0,0 +1,29 @@
+import 'media-chrome';
+import '../media-chrome/time-display';
+declare type ThemeMuxTemplateProps = {
+    streamType: string;
+    audio: boolean;
+    playerSize: string;
+    defaultHiddenCaptions: boolean;
+    hasCaptions: boolean;
+    forwardSeekOffset: number;
+    backwardSeekOffset: number;
+};
+export declare const AudioVodChrome: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
+export declare const AudioDvrChrome: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
+export declare const AudioLiveChrome: (_props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
+export declare const VodChromeExtraSmall: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
+export declare const VodChromeSmall: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
+export declare const VodChromeLarge: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
+export declare const LiveChromeExtraSmall: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
+export declare const LiveChromeSmall: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
+export declare const LiveChromeLarge: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
+export declare const DvrChromeExtraSmall: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
+export declare const DvrChromeSmall: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
+export declare const DvrChromeLarge: (props: ThemeMuxTemplateProps) => import("../html").TemplateResult;
+declare class MediaThemeMux extends HTMLElement {
+    static readonly observedAttributes: string[];
+    constructor();
+    attributeChangedCallback(): void;
+}
+export default MediaThemeMux;

package/dist/types-ts3.4/template.d.ts

@@ -0,0 +1,5 @@
+import './media-theme-mux/media-theme-mux';
+import './dialog';
+import { MuxTemplateProps } from './types';
+export declare const template: (props: MuxTemplateProps) => import("./html").TemplateResult;
+export declare const content: (props: MuxTemplateProps) => import("./html").TemplateResult;

package/dist/types-ts3.4/utils.d.ts

@@ -0,0 +1,10 @@
+export declare function i18n(str: string, translate?: boolean): any;
+export declare function stylePropsToString(props: any): string | undefined;
+export declare function kebabCase(name: string): string;
+export declare function camelCase(name: string): string;
+export declare function uniqueId(prefix: string): string;
+export declare function toNumberOrUndefined(val: any): number | undefined;
+export declare function toQuery(obj: Record<string, any>): string;
+export declare function toParams(obj: Record<string, any>): URLSearchParams;
+export declare function parseJwt(token: string): any;
+export declare const containsComposedNode: (rootNode: Node, childNode?: Node | Element | null | undefined) => boolean;

package/dist/types-ts3.4/video-api.d.ts

@@ -0,0 +1,53 @@
+import MuxVideoElement from '@mux/mux-video';
+export declare type CastOptions = {
+    receiverApplicationId: string;
+    autoJoinPolicy: string;
+    androidReceiverCompatible: boolean;
+    language: string;
+    resumeSavedSession: boolean;
+};
+export declare type MuxVideoElementExt = MuxVideoElement & {
+    requestCast(options: CastOptions): Promise<undefined>;
+};
+/**
+ * Gets called from mux-player when mux-video is rendered and upgraded.
+ * We might just merge VideoApiElement in MuxPlayerElement and remove this?
+ */
+export declare function initVideoApi(el: VideoApiElement): void;
+declare class VideoApiElement extends HTMLElement {
+    static readonly observedAttributes: string[];
+    /**
+     * Create a HTMLVideoElement like API with opt-in methods to expose publicly.
+     * This class is intentionally not extending MuxVideoElement but composing it
+     * to opt in methods and not expose too much. More flexibility in the future.
+     */
+    constructor();
+    attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string): void;
+    play(): Promise<void> | undefined;
+    pause(): void;
+    requestCast(options: CastOptions): Promise<undefined> | undefined;
+    readonly media: MuxVideoElementExt | null | undefined;
+    /*
+    * @deprecated please use .media instead
+    */
+    readonly video: MuxVideoElementExt | null | undefined;
+    readonly paused: boolean;
+    readonly duration: number;
+    readonly ended: boolean;
+    readonly buffered: TimeRanges | undefined;
+    readonly readyState: number;
+    readonly videoWidth: number | undefined;
+    readonly videoHeight: number | undefined;
+    currentTime: number;
+    volume: number;
+    src: string | null;
+    poster: string;
+    playbackRate: number;
+    crossOrigin: string | null;
+    autoplay: boolean;
+    loop: boolean;
+    muted: boolean;
+    playsInline: boolean;
+    preload: string | null;
+}
+export default VideoApiElement;

package/lang/en.json

@@ -0,0 +1,32 @@
+{
+  "(opens in a new window)": "(opens in a new window)",
+  "Network Error": "Network Error",
+  "Video is not currently available": "Video is not currently available",
+  "The live stream or video file are not yet ready.": "The live stream or video file are not yet ready.",
+  "This playback-id may belong to a live stream that is not currently active or an asset that is not ready.": "This playback-id may belong to a live stream that is not currently active or an asset that is not ready.",
+  "Video does not exist": "Video does not exist",
+  "This playback-id does not exist. You may have used an Asset ID or an ID from a different resource.": "This playback-id does not exist. You may have used an Asset ID or an ID from a different resource.",
+  "The specificed playback ID {playbackId} contains a token which must be provided via the playback-token attribute.": "The specificed playback ID {playbackId} contains a token which must be provided via the playback-token attribute.",
+  "Invalid playback URL": "Invalid playback URL",
+  "The video URL or playback-token are formatted with incorrect or incomplete information.": "The video URL or playback-token are formatted with incorrect or incomplete information.",
+  "403 error trying to access this playback URL. If this is a signed URL, you might need to provide a playback-token.": "403 error trying to access this playback URL. If this is a signed URL, you might need to provide a playback-token.",
+  "Video URL has expired": "Video URL has expired",
+  "The video’s secured playback-token has expired.": "The video’s secured playback-token has expired.",
+  "This playback is using signed URLs and the playback-token has expired. Expired at: {expiredDate}. Current time: {currentDate}.": "This playback is using signed URLs and the playback-token has expired. Expired at: {expiredDate}. Current time: {currentDate}.",
+  "Video URL is formatted incorrectly": "Video URL is formatted incorrectly",
+  "The video’s playback ID does not match the one encoded in the playback-token.": "The video’s playback ID does not match the one encoded in the playback-token.",
+  "The specified playback ID {playbackId} and the playback ID encoded in the playback-token {tokenPlaybackId} do not match.": "The specified playback ID {playbackId} and the playback ID encoded in the playback-token {tokenPlaybackId} do not match.",
+  "The playback-token is formatted with incorrect information.": "The playback-token is formatted with incorrect information.",
+  "The playback-token has an incorrect aud value: {tokenType}. aud value should be v.": "The playback-token has an incorrect aud value: {tokenType}. aud value should be v.",
+  "403 error trying to access this playback URL. If this is a signed playback ID, the token might not have been generated correctly.": "403 error trying to access this playback URL. If this is a signed playback ID, the token might not have been generated correctly.",
+  "Media Error": "Media Error",
+  "Source Not Supported": "Source Not Supported",
+  "Error": "Error",
+  "Your device appears to be offline": "Your device appears to be offline",
+  "Check your internet connection and try reloading this video.": "Check your internet connection and try reloading this video.",
+  "The provided thumbnail-token should have audience value 't' instead of '{aud}'.": "The provided thumbnail-token should have audience value 't' instead of '{aud}'.",
+  "The provided storyboard-token should have audience value 's' instead of '{aud}'.": "The provided storyboard-token should have audience value 's' instead of '{aud}'.",
+  "No stream-type value supplied. Defaulting to \\": "No stream-type value supplied. Defaulting to \\",
+  "Invalid stream-type value supplied: \\": "Invalid stream-type value supplied: \\",
+  "Read more: ": "Read more: "
+}

package/lang/nl.json

@@ -0,0 +1,31 @@
+{
+  "(opens in a new window)": "(opent in een nieuw venster)",
+  "Network Error": "Network Error",
+  "Video is not currently available": "Video is not currently available",
+  "The live stream or video file are not yet ready.": "The live stream or video file are not yet ready.",
+  "This playback-id may belong to a live stream that is not currently active or an asset that is not ready.": "This playback-id may belong to a live stream that is not currently active or an asset that is not ready.",
+  "Video does not exist": "Video does not exist",
+  "This playback-id does not exist. You may have used an Asset ID or an ID from a different resource.": "This playback-id does not exist. You may have used an Asset ID or an ID from a different resource.",
+  "Invalid playback URL": "Invalid playback URL",
+  "The video URL or playback-token are formatted with incorrect or incomplete information.": "The video URL or playback-token are formatted with incorrect or incomplete information.",
+  "403 error trying to access this playback URL. If this is a signed URL, you might need to provide a playback-token.": "403 error trying to access this playback URL. If this is a signed URL, you might need to provide a playback-token.",
+  "Video URL has expired": "Video URL has expired",
+  "The video’s secured playback-token has expired.": "The video’s secured playback-token has expired.",
+  "This playback is using signed URLs and the playback-token has expired. Expired at: {expiredDate}. Current time: {currentDate}.": "This playback is using signed URLs and the playback-token has expired. Expired at: {expiredDate}. Current time: {currentDate}.",
+  "Video URL is formatted incorrectly": "Video URL is formatted incorrectly",
+  "The video’s playback ID does not match the one encoded in the playback-token.": "The video’s playback ID does not match the one encoded in the playback-token.",
+  "The specified playback ID {playbackId} and the playback ID encoded in the playback-token {tokenPlaybackId} do not match.": "The specified playback ID {playbackId} and the playback ID encoded in the playback-token {tokenPlaybackId} do not match.",
+  "The playback-token is formatted with incorrect information.": "The playback-token is formatted with incorrect information.",
+  "The playback-token has an incorrect aud value: {tokenType}. aud value should be v.": "The playback-token has an incorrect aud value: {tokenType}. aud value should be v.",
+  "403 error trying to access this playback URL. If this is a signed playback ID, the token might not have been generated correctly.": "403 error trying to access this playback URL. If this is a signed playback ID, the token might not have been generated correctly.",
+  "Media Error": "Media Error",
+  "Source Not Supported": "Source Not Supported",
+  "Error": "Error",
+  "Your device appears to be offline": "Your device appears to be offline",
+  "Check your internet connection and try reloading this video.": "Check your internet connection and try reloading this video.",
+  "The provided thumbnail-token should have audience value 't' instead of '{aud}'.": "The provided thumbnail-token should have audience value 't' instead of '{aud}'.",
+  "The provided storyboard-token should have audience value 's' instead of '{aud}'.": "The provided storyboard-token should have audience value 's' instead of '{aud}'.",
+  "No stream-type value supplied. Defaulting to \\": "No stream-type value supplied. Defaulting to \\",
+  "Invalid stream-type value supplied: \\": "Invalid stream-type value supplied: \\",
+  "Read more: ": "Read more: "
+}

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@mux/mux-player",
+  "version": "0.1.0-beta.21",
+  "description": "An open source Mux player web component that Just Works™",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.mjs",
+  "browser": "./dist/index.mjs",
+  "unpkg": "./dist/mux-player.js",
+  "exports": {
+    "import": "./dist/index.mjs",
+    "require": "./dist/index.cjs.js",
+    "default": "./dist/index.cjs.js"
+  },
+  "types": "dist/types-ts3.4/index.d.ts",
+  "typesVersions": {
+    ">=4.3.5": {
+      "*": [
+        "dist/types/index.d.ts"
+      ]
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/muxinc/elements",
+    "directory": "packages/mux-player"
+  },
+  "author": "Mux, Inc.",
+  "license": "MIT",
+  "scripts": {
+    "clean": "shx rm -rf dist/",
+    "lint": "eslint src/ --ext .js,.jsx,.ts,.tsx",
+    "test": "web-test-runner **/*test.js --port 8001 --coverage --config test/web-test-runner.config.mjs --root-dir ../..",
+    "posttest": "replace 'SF:src/' 'SF:packages/mux-player/src/' coverage/lcov.info --silent",
+    "i18n": "yarn build:esm --keep-names && i18n-utils dist/index.mjs ./lang",
+    "dev:iife": "open-process | yarn build:iife --watch",
+    "dev:esm": "open-process | yarn build:esm --watch",
+    "dev:esm-module": "open-process | yarn build:esm-module --watch",
+    "dev:cjs": "open-process | yarn build:cjs --watch",
+    "dev:types": "yarn build:types -w",
+    "dev": "npm-run-all --parallel dev:types dev:esm dev:cjs dev:esm-module dev:iife",
+    "build:esm": "esbuilder src/index.ts --format=esm --out-extension:.js=.mjs",
+    "build:esm-module": "esbuilder src/index.ts --format=esm-module --out-extension:.js=.mjs",
+    "build:iife": "esbuilder src/index.ts --format=iife --out-extension:.js=.js",
+    "build:cjs": "esbuilder src/index.ts --format=cjs --out-extension:.js=.cjs.js",
+    "build:types": "tsc --declaration --emitDeclarationOnly --outDir './dist/types' && downlevel-dts ./dist/types ./dist/types-ts3.4",
+    "build": "npm-run-all --parallel build:types 'build:esm -- --minify' 'build:iife -- --minify' 'build:cjs -- --minify' 'build:esm-module -- --minify'",
+    "prebuild": "yarn clean",
+    "prepublishOnly": "yarn build",
+    "create-release-notes": "create-release-notes ./CHANGELOG.md",
+    "publish-release": "../../scripts/publish.sh"
+  },
+  "dependencies": {
+    "@github/template-parts": "^0.5.3",
+    "@mux/mux-video": "0.8.0",
+    "@mux/playback-core": "0.8.0",
+    "media-chrome": "0.6.9"
+  },
+  "devDependencies": {
+    "@mux/open-process": "0.1.0",
+    "@mux/test-esm-exports": "0.1.0",
+    "@open-wc/testing": "^3.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.14.0",
+    "@typescript-eslint/parser": "^5.14.0",
+    "@web/dev-server-esbuild": "^0.2.16",
+    "@web/dev-server-import-maps": "^0.0.6",
+    "@web/test-runner": "^0.13.26",
+    "downlevel-dts": "^0.9.0",
+    "esbuild": "^0.13.13",
+    "eslint": "^7.11.0",
+    "npm-run-all": "^4.1.5",
+    "replace": "^1.2.1",
+    "shx": "^0.3.4",
+    "typescript": "^4.5.2"
+  },
+  "eslintConfig": {
+    "env": {
+      "browser": true,
+      "es6": true,
+      "node": true,
+      "mocha": true
+    },
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint",
+      "@mux/i18n"
+    ],
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "parserOptions": {
+      "ecmaVersion": 2021,
+      "sourceType": "module"
+    },
+    "globals": {
+      "globalThis": false
+    },
+    "rules": {
+      "no-shadow": "error",
+      "no-extra-boolean-cast": 0,
+      "@mux/i18n/no-substitutions": "error",
+      "@typescript-eslint/ban-ts-comment": 0,
+      "@typescript-eslint/no-explicit-any": 0
+    }
+  },
+  "gitHead": "1eb2c585afc831907ef8246be31d1010adc1575c"
+}

package/src/dialog.ts

@@ -0,0 +1,54 @@
+import MediaDialog from './media-chrome/dialog';
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+    ${MediaDialog.styles}
+
+    .close {
+      background: none;
+      color: inherit;
+      border: none;
+      padding: 0;
+      font: inherit;
+      cursor: pointer;
+      outline: inherit;
+      width: 28px;
+      height: 28px;
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+    }
+  </style>
+
+  <div class="dialog">
+    <slot></slot>
+  </div>
+
+  <slot name="close">
+    <button class="close" tabindex="0">
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </button>
+  </slot>
+`;
+
+class MxpDialog extends MediaDialog {
+  static template: HTMLTemplateElement = template;
+
+  constructor() {
+    super();
+
+    this.shadowRoot?.querySelector('.close')?.addEventListener('click', () => {
+      this.close();
+    });
+  }
+}
+
+if (!globalThis.customElements.get('mxp-dialog')) {
+  globalThis.customElements.define('mxp-dialog', MxpDialog);
+  (globalThis as any).MxpDialog = MxpDialog;
+}
+
+export default MxpDialog;