@operato/popup 9.0.0-beta.52 → 9.0.0

package/dist/stories/ox-prompt-icon.stories.d.ts

@@ -1,26 +0,0 @@
-import '@material/web/all.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        type: {
-            control: string;
-            options: string[];
-        };
-        preventCloseOnBlur: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    type: 'success' | 'error' | 'warning' | 'info' | 'question';
-    preventCloseOnBlur: boolean;
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-prompt-icon.stories.js

@@ -1,68 +0,0 @@
-import '@material/web/all.js';
-import { html } from 'lit';
-import { OxPrompt } from '../src/ox-prompt.js';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'OxPrompt - Icon',
-    component: 'ox-prompt',
-    argTypes: {
-        type: { control: 'select', options: ['success', 'error', 'warning', 'info', 'question'] },
-        preventCloseOnBlur: { control: 'boolean' }
-    }
-};
-function popup(e, type = 'warning', preventCloseOnBlur) {
-    OxPrompt.open({
-        title: 'Are you sure ?',
-        text: 'Are you sure to exit this page ?',
-        type,
-        icon: 'logout',
-        confirmButton: { text: 'Confirm' },
-        cancelButton: { text: 'Cancel' },
-        preventCloseOnBlur
-    });
-}
-const Template = ({ type, preventCloseOnBlur }) => html `
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-
-  <style>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    #place {
-      width: 100%;
-      height: 500px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div id="place" @click=${(e) => popup(e, type, preventCloseOnBlur)} class="md-typescale-display-medium">
-    Click this to prompt image
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    type: 'warning',
-    preventCloseOnBlur: true
-};
-//# sourceMappingURL=ox-prompt-icon.stories.js.map

package/dist/stories/ox-prompt-icon.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-prompt-icon.stories.js","sourceRoot":"","sources":["../../stories/ox-prompt-icon.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE;QACzF,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAaD,SAAS,KAAK,CACZ,CAAa,EACb,OAA8D,SAAS,EACvE,kBAA2B;IAE3B,QAAQ,CAAC,IAAI,CAAC;QACZ,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,kCAAkC;QACxC,IAAI;QACJ,IAAI,EAAE,QAAQ;QACd,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAChC,kBAAkB;KACnB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqB5E,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;2BAcJ,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,kBAAkB,CAAC;;;CAG/E,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,kBAAkB,EAAE,IAAI;CACzB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport { html, TemplateResult } from 'lit'\n\nimport { OxPrompt } from '../src/ox-prompt.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'OxPrompt - Icon',\n  component: 'ox-prompt',\n  argTypes: {\n    type: { control: 'select', options: ['success', 'error', 'warning', 'info', 'question'] },\n    preventCloseOnBlur: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  type: 'success' | 'error' | 'warning' | 'info' | 'question'\n  preventCloseOnBlur: boolean\n}\n\nfunction popup(\n  e: MouseEvent,\n  type: 'success' | 'error' | 'warning' | 'info' | 'question' = 'warning',\n  preventCloseOnBlur: boolean\n) {\n  OxPrompt.open({\n    title: 'Are you sure ?',\n    text: 'Are you sure to exit this page ?',\n    type,\n    icon: 'logout',\n    confirmButton: { text: 'Confirm' },\n    cancelButton: { text: 'Cancel' },\n    preventCloseOnBlur\n  })\n}\n\nconst Template: Story<ArgTypes> = ({ type, preventCloseOnBlur }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #place {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div id=\"place\" @click=${(e: MouseEvent) => popup(e, type, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n    Click this to prompt image\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  type: 'warning',\n  preventCloseOnBlur: true\n}\n"]}

package/dist/stories/ox-prompt-normal.stories.d.ts

@@ -1,21 +0,0 @@
-import '@material/web/all.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        preventCloseOnBlur: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    preventCloseOnBlur: boolean;
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-prompt-normal.stories.js

@@ -1,65 +0,0 @@
-import '@material/web/all.js';
-import { html } from 'lit';
-import { OxPrompt } from '../src/ox-prompt.js';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'OxPrompt - Normal',
-    component: 'ox-prompt',
-    argTypes: {
-        preventCloseOnBlur: { control: 'boolean' }
-    }
-};
-function popup(e, preventCloseOnBlur) {
-    const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
-    OxPrompt.open({
-        title: 'Are you sure ?',
-        text: 'Are you sure to exit this page ?',
-        confirmButton: { text: 'Confirm' },
-        cancelButton: { text: 'Cancel' },
-        preventCloseOnBlur
-    });
-}
-const Template = ({ preventCloseOnBlur }) => html `
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-
-  <style>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    #place {
-      width: 100%;
-      height: 500px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div id="place" @click=${(e) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
-    Click this to prompt image
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    preventCloseOnBlur: true
-};
-//# sourceMappingURL=ox-prompt-normal.stories.js.map

package/dist/stories/ox-prompt-normal.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-prompt-normal.stories.js","sourceRoot":"","sources":["../../stories/ox-prompt-normal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa,EAAE,kBAA2B;IACvD,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,QAAQ,CAAC,IAAI,CAAC;QACZ,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,kCAAkC;QACxC,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAChC,kBAAkB;KACnB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;2BAcJ,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC;;;CAGzE,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,kBAAkB,EAAE,IAAI;CACzB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport { html, TemplateResult } from 'lit'\n\nimport { OxPrompt } from '../src/ox-prompt.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'OxPrompt - Normal',\n  component: 'ox-prompt',\n  argTypes: {\n    preventCloseOnBlur: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  preventCloseOnBlur: boolean\n}\n\nfunction popup(e: MouseEvent, preventCloseOnBlur: boolean) {\n  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n  OxPrompt.open({\n    title: 'Are you sure ?',\n    text: 'Are you sure to exit this page ?',\n    confirmButton: { text: 'Confirm' },\n    cancelButton: { text: 'Cancel' },\n    preventCloseOnBlur\n  })\n}\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #place {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div id=\"place\" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n    Click this to prompt image\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  preventCloseOnBlur: true\n}\n"]}

package/dist/stories/ox-prompt.stories.d.ts

@@ -1,20 +0,0 @@
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        preventCloseOnBlur: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    preventCloseOnBlur: boolean;
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-prompt.stories.js

@@ -1,66 +0,0 @@
-import { html } from 'lit';
-import { OxPrompt } from '../src/ox-prompt.js';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'OxPrompt',
-    component: 'ox-prompt',
-    argTypes: {
-        preventCloseOnBlur: { control: 'boolean' }
-    }
-};
-async function popup(e, preventCloseOnBlur) {
-    const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
-    const result = await OxPrompt.open({
-        type: 'info',
-        title: 'title',
-        text: 'Are you sure ?Are you sure ?Are you sure ?Are you sure ?Are you sure ? \n\n aaa <br> bbb </br> ccc',
-        footer: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
-        template: html `<img src=${noImage} />`,
-        confirmButton: { text: 'Confirm' },
-        cancelButton: { text: 'Cancel' },
-        preventCloseOnBlur
-    });
-    console.log('result', result);
-}
-const Template = ({ preventCloseOnBlur }) => html `
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-
-  <style>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    #place {
-      width: 100%;
-      height: 500px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div id="place" @click=${(e) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
-    Click this to prompt image
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {};
-//# sourceMappingURL=ox-prompt.stories.js.map

package/dist/stories/ox-prompt.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-prompt.stories.js","sourceRoot":"","sources":["../../stories/ox-prompt.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,KAAK,UAAU,KAAK,CAAC,CAAa,EAAE,kBAA2B;IAC7D,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,IAAI,CAAC;QACjC,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,oGAAoG;QAC1G,MAAM,EAAE,4BAA4B;QACpC,QAAQ,EAAE,IAAI,CAAA,YAAY,OAAO,KAAK;QACtC,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAChC,kBAAkB;KACnB,CAAC,CAAA;IAEF,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;AAC/B,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;2BAcJ,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC;;;CAGzE,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport { OxPrompt } from '../src/ox-prompt.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'OxPrompt',\n  component: 'ox-prompt',\n  argTypes: {\n    preventCloseOnBlur: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  preventCloseOnBlur: boolean\n}\n\nasync function popup(e: MouseEvent, preventCloseOnBlur: boolean) {\n  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n  const result = await OxPrompt.open({\n    type: 'info',\n    title: 'title',\n    text: 'Are you sure ?Are you sure ?Are you sure ?Are you sure ?Are you sure ? \\n\\n aaa <br> bbb </br> ccc',\n    footer: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',\n    template: html`<img src=${noImage} />`,\n    confirmButton: { text: 'Confirm' },\n    cancelButton: { text: 'Cancel' },\n    preventCloseOnBlur\n  })\n\n  console.log('result', result)\n}\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #place {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div id=\"place\" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n    Click this to prompt image\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}