@operato/popup 9.0.0-beta.52 → 9.0.0

package/dist/stories/ox-popup-list-sortable.stories.js

@@ -1,196 +0,0 @@
-import '@material/web/icon/icon.js';
-import '@material/web/button/outlined-button.js';
-import '@operato/input/ox-checkbox.js';
-import '../src/ox-popup-list.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'sortable OxPopupList',
-    component: 'ox-popup-list',
-    argTypes: {
-        preventCloseOnBlur: { control: 'boolean' }
-    }
-};
-function popup(e) {
-    const popupList = document.querySelector('#popup-list');
-    popupList?.open({
-        top: e.offsetY,
-        left: e.offsetX
-    });
-}
-const columns = [
-    {
-        name: 'AAAAAA',
-        hidden: false
-    },
-    {
-        name: 'BBBBBB',
-        hidden: true
-    },
-    {
-        name: 'CCCCCC',
-        hidden: false
-    },
-    {
-        name: 'DDDDDD',
-        hidden: false
-    },
-    {
-        name: 'EEEEEE',
-        hidden: false
-    },
-    {
-        name: 'FFFFFF',
-        hidden: false
-    },
-    {
-        name: 'GGGGGG',
-        hidden: false
-    },
-    {
-        name: 'HHHHHH',
-        hidden: false
-    },
-    {
-        name: 'IIIIII',
-        hidden: false
-    },
-    {
-        name: 'JJJJJJ',
-        hidden: false
-    },
-    {
-        name: 'KKKKKK',
-        hidden: false
-    },
-    {
-        name: 'LLLLLL',
-        hidden: false
-    },
-    {
-        name: 'MMMMMM',
-        hidden: false
-    }
-];
-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 {
-      position: relative;
-      width: 100%;
-      height: 100px;
-      background: lightgreen;
-      text-align: center;
-      line-height: 100px;
-      padding: 20px;
-      margin: 20px;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-
-    #place-child {
-      position: relative;
-      display: block;
-      width: 100%;
-      height: 100%;
-      background-color: var(--md-sys-color-primary);
-      color: var(--md-sys-color-on-primary);
-    }
-
-    ox-popup-list {
-      width: 240px;
-      max-height: 240px;
-      overflow: hidden;
-    }
-
-    [titler] {
-      --md-icon-size: 1.2em;
-      --md-outlined-button-container-height: 24px;
-      --md-outlined-button-container-shape: 4px;
-      --md-outlined-button-leading-space: 4px;
-      --md-outlined-button-trailing-space: 4px;
-
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      text-transform: capitalize;
-    }
-
-    md-outlined-button {
-      margin-left: auto;
-    }
-
-    [option] {
-      position: relative; /* 상대 위치 설정 */
-      cursor: move; /* 커서를 이동 가능 표시로 변경 */
-      user-select: none;
-    }
-
-    [option]::after {
-      content: '☰'; /* 드래그 핸들 아이콘 (혹은 기호) */
-      position: absolute; /* 절대 위치 설정 */
-      top: 0; /* 위에서부터 10px */
-      right: 10px; /* 오른쪽에서부터 10px */
-      font-size: 20px; /* 폰트 크기 설정 */
-      color: #888; /* 폰트 색상 설정 */
-    }
-
-    div[overlay] {
-      display: block;
-      width: 300px;
-      height: 300px;
-      left: 100px;
-      top: 100px;
-      z-index: 10000;
-      background-color: var(--md-sys-color-surface);
-    }
-  </style>
-
-  <div id="place">
-    <div id="place-child" @click=${(e) => popup(e)}>
-      Click this to popup list
-      <ox-popup-list
-        id="popup-list"
-        @select=${(e) => console.log('select', e.target)}
-        @sorted=${(e) => {
-    console.log('sorted\n', e.detail.map((element) => element.value).join('\n'));
-}}
-        multiple
-        sortable
-        ?prevent-close-on-blur=${preventCloseOnBlur}
-      >
-        <div slot="header" titler>Plain Text <md-outlined-button>save</md-outlined-button></div>
-        ${columns.map(column => html `
-        <ox-checkbox label="checkbox" ?checked=${!column.hidden} value=${column.name} option />${column.name}</ox-checkbox>
-      `)}
-      </ox-popup-list>
-    </div>
-  </div>
-  <div overlay>OVERLAYED</div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {};
-//# sourceMappingURL=ox-popup-list-sortable.stories.js.map

package/dist/stories/ox-popup-list-sortable.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-popup-list-sortable.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list-sortable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yCAAyC,CAAA;AAChD,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAG1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,EAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;KAChB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,OAAO,GAAG;IACd;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,IAAI;KACb;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;IACD;QACE,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,KAAK;KACd;CACF,CAAA;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCA6EI,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;;;;kBAI5C,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;kBAC7C,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAC,UAAU,EAAG,CAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,OAAY,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;AACpG,CAAC;;;iCAGwB,kBAAkB;;;UAGzC,OAAO,CAAC,GAAG,CACX,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;iDACyB,CAAC,MAAM,CAAC,MAAM,UAAU,MAAM,CAAC,IAAI,aAAa,MAAM,CAAC,IAAI;OACrG,CACE;;;;;CAKR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/outlined-button.js'\nimport '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-list.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'sortable OxPopupList',\n  component: 'ox-popup-list',\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) {\n  const popupList = document.querySelector('#popup-list') as OxPopupList\n  popupList?.open({\n    top: e.offsetY,\n    left: e.offsetX\n  })\n}\n\nconst columns = [\n  {\n    name: 'AAAAAA',\n    hidden: false\n  },\n  {\n    name: 'BBBBBB',\n    hidden: true\n  },\n  {\n    name: 'CCCCCC',\n    hidden: false\n  },\n  {\n    name: 'DDDDDD',\n    hidden: false\n  },\n  {\n    name: 'EEEEEE',\n    hidden: false\n  },\n  {\n    name: 'FFFFFF',\n    hidden: false\n  },\n  {\n    name: 'GGGGGG',\n    hidden: false\n  },\n  {\n    name: 'HHHHHH',\n    hidden: false\n  },\n  {\n    name: 'IIIIII',\n    hidden: false\n  },\n  {\n    name: 'JJJJJJ',\n    hidden: false\n  },\n  {\n    name: 'KKKKKK',\n    hidden: false\n  },\n  {\n    name: 'LLLLLL',\n    hidden: false\n  },\n  {\n    name: 'MMMMMM',\n    hidden: false\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      position: relative;\n      width: 100%;\n      height: 100px;\n      background: lightgreen;\n      text-align: center;\n      line-height: 100px;\n      padding: 20px;\n      margin: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    #place-child {\n      position: relative;\n      display: block;\n      width: 100%;\n      height: 100%;\n      background-color: var(--md-sys-color-primary);\n      color: var(--md-sys-color-on-primary);\n    }\n\n    ox-popup-list {\n      width: 240px;\n      max-height: 240px;\n      overflow: hidden;\n    }\n\n    [titler] {\n      --md-icon-size: 1.2em;\n      --md-outlined-button-container-height: 24px;\n      --md-outlined-button-container-shape: 4px;\n      --md-outlined-button-leading-space: 4px;\n      --md-outlined-button-trailing-space: 4px;\n\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      text-transform: capitalize;\n    }\n\n    md-outlined-button {\n      margin-left: auto;\n    }\n\n    [option] {\n      position: relative; /* 상대 위치 설정 */\n      cursor: move; /* 커서를 이동 가능 표시로 변경 */\n      user-select: none;\n    }\n\n    [option]::after {\n      content: '☰'; /* 드래그 핸들 아이콘 (혹은 기호) */\n      position: absolute; /* 절대 위치 설정 */\n      top: 0; /* 위에서부터 10px */\n      right: 10px; /* 오른쪽에서부터 10px */\n      font-size: 20px; /* 폰트 크기 설정 */\n      color: #888; /* 폰트 색상 설정 */\n    }\n\n    div[overlay] {\n      display: block;\n      width: 300px;\n      height: 300px;\n      left: 100px;\n      top: 100px;\n      z-index: 10000;\n      background-color: var(--md-sys-color-surface);\n    }\n  </style>\n\n  <div id=\"place\">\n    <div id=\"place-child\" @click=${(e: MouseEvent) => popup(e)}>\n      Click this to popup list\n      <ox-popup-list\n        id=\"popup-list\"\n        @select=${(e: Event) => console.log('select', e.target)}\n        @sorted=${(e: Event) => {\n          console.log('sorted\\n', (e as CustomEvent).detail.map((element: any) => element.value).join('\\n'))\n        }}\n        multiple\n        sortable\n        ?prevent-close-on-blur=${preventCloseOnBlur}\n      >\n        <div slot=\"header\" titler>Plain Text <md-outlined-button>save</md-outlined-button></div>\n        ${columns.map(\n          column => html`\n        <ox-checkbox label=\"checkbox\" ?checked=${!column.hidden} value=${column.name} option />${column.name}</ox-checkbox>\n      `\n        )}\n      </ox-popup-list>\n    </div>\n  </div>\n  <div overlay>OVERLAYED</div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

package/dist/stories/ox-popup-list.stories.d.ts

@@ -1,23 +0,0 @@
-import '@material/web/all.js';
-import '@operato/input/ox-checkbox.js';
-import '../src/ox-popup-list.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-popup-list.stories.js

@@ -1,104 +0,0 @@
-import '@material/web/all.js';
-import '@operato/input/ox-checkbox.js';
-import '../src/ox-popup-list.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'OxPopupList',
-    component: 'ox-popup-list',
-    argTypes: {
-        preventCloseOnBlur: { control: 'boolean' }
-    }
-};
-function popup(e, preventCloseOnBlur) {
-    const popupList = document.querySelector('#popup-list');
-    popupList.preventCloseOnBlur = preventCloseOnBlur;
-    popupList?.open({
-        top: e.offsetY,
-        left: e.offsetX
-    });
-}
-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>
-    #container {
-      display: flex;
-    }
-
-    #noise {
-      width: 100px;
-      height: 100px;
-    }
-
-    #place {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-
-      width: 50%;
-      height: 50%;
-      text-align: center;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-      border: 2px solid var(--md-sys-color-primary);
-    }
-  </style>
-
-  <div id="container">
-    <div id="noise"></div>
-    <div id="place" @click=${(e) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
-      Click this to popup list
-      <ox-popup-list
-        id="popup-list"
-        @select=${(e) => console.log('select', e.target)}
-        multiple
-        ?prevent-close-on-blur=${preventCloseOnBlur}
-      >
-        <div option>Plain Text</div>
-
-        <div option>
-          <ox-checkbox label="checkbox" slot="icon" checked>checkbox</ox-checkbox>
-        </div>
-
-        <div option>
-          <input id="checkbox-01" type="checkbox" />
-          <label for="checkbox-01">custom option</label>
-        </div>
-
-        <div option>
-          <label for="text-01">value</label>
-          <input id="text-01" type="text" value="Plain text input" />
-        </div>
-      </ox-popup-list>
-    </div>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    preventCloseOnBlur: true
-};
-//# sourceMappingURL=ox-popup-list.stories.js.map

package/dist/stories/ox-popup-list.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-popup-list.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAI7F,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa,EAAE,kBAA2B;IACvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,CAAC,kBAAkB,GAAG,kBAAkB,CAAA;IAEjD,SAAS,EAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;KAChB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA+BF,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC;;;;kBAI1D,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;;iCAE9B,kBAAkB;;;;;;;;;;;;;;;;;;;;CAoBlD,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 '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-list.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\n\nexport default {\n  title: 'OxPopupList',\n  component: 'ox-popup-list',\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 popupList = document.querySelector('#popup-list') as OxPopupList\n  popupList.preventCloseOnBlur = preventCloseOnBlur\n\n  popupList?.open({\n    top: e.offsetY,\n    left: e.offsetX\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    #container {\n      display: flex;\n    }\n\n    #noise {\n      width: 100px;\n      height: 100px;\n    }\n\n    #place {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n\n      width: 50%;\n      height: 50%;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n      border: 2px solid var(--md-sys-color-primary);\n    }\n  </style>\n\n  <div id=\"container\">\n    <div id=\"noise\"></div>\n    <div id=\"place\" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n      Click this to popup list\n      <ox-popup-list\n        id=\"popup-list\"\n        @select=${(e: Event) => console.log('select', e.target)}\n        multiple\n        ?prevent-close-on-blur=${preventCloseOnBlur}\n      >\n        <div option>Plain Text</div>\n\n        <div option>\n          <ox-checkbox label=\"checkbox\" slot=\"icon\" checked>checkbox</ox-checkbox>\n        </div>\n\n        <div option>\n          <input id=\"checkbox-01\" type=\"checkbox\" />\n          <label for=\"checkbox-01\">custom option</label>\n        </div>\n\n        <div option>\n          <label for=\"text-01\">value</label>\n          <input id=\"text-01\" type=\"text\" value=\"Plain text input\" />\n        </div>\n      </ox-popup-list>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  preventCloseOnBlur: true\n}\n"]}

package/dist/stories/ox-popup-menu.stories.d.ts

@@ -1,19 +0,0 @@
-import '@material/web/all.js';
-import '@operato/input/ox-checkbox.js';
-import '../src/ox-popup-menu.js';
-import '../src/ox-popup-menuitem.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {};
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-popup-menu.stories.js

@@ -1,175 +0,0 @@
-import '@material/web/all.js';
-import '@operato/input/ox-checkbox.js';
-import '../src/ox-popup-menu.js';
-import '../src/ox-popup-menuitem.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-import { OxPopupMenu } from '../src/ox-popup-menu.js';
-export default {
-    title: 'OxPopuMenu',
-    component: 'ox-popup-menu',
-    argTypes: {}
-};
-function popup(e) {
-    OxPopupMenu.open({
-        template: html `
-      <ox-popup-menuitem
-        label="article - click me"
-        @selected=${function (e) {
-            console.log('first level article selected');
-        }}
-      >
-        <md-icon slot="icon">article</md-icon>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem label="home">
-        <md-icon slot="icon">home</md-icon>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem label="empty"> </ox-popup-menuitem>
-
-      <ox-popup-menuitem
-        label="click me to toggle"
-        @selected=${function (e) {
-            const icon = e.target.querySelector('md-icon');
-            icon && (icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check');
-        }}
-        alive-on-select
-      >
-        <md-icon slot="icon" style="width: 20px;height: 20px;"></md-icon>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem label="verified" @selected=${(e) => console.log('selected verified')}>
-        <md-icon slot="icon">verified</md-icon>
-        <ox-popup-menu>
-          <ox-popup-menuitem
-            label="article"
-            @selected=${function (e) {
-            console.log('article selected');
-        }}
-            alive-on-select
-          >
-            <md-icon slot="icon">article</md-icon>
-          </ox-popup-menuitem>
-
-          <ox-popup-menuitem label="home">
-            <md-icon slot="icon">home</md-icon>
-          </ox-popup-menuitem>
-
-          <ox-popup-menuitem label="verified">
-            <md-icon slot="icon">verified</md-icon>
-            <ox-popup-menu>
-              <ox-popup-menuitem label="article">
-                <md-icon slot="icon">article</md-icon>
-              </ox-popup-menuitem>
-
-              <ox-popup-menuitem label="home">
-                <md-icon slot="icon">home</md-icon>
-              </ox-popup-menuitem>
-
-              <ox-popup-menuitem label="verified">
-                <md-icon slot="icon">verified</md-icon>
-              </ox-popup-menuitem>
-
-              <ox-popup-menuitem label="checkbox">
-                <input type="checkbox" slot="icon" />
-              </ox-popup-menuitem>
-
-            </ox-popup-menu>
-          </ox-popup-menuitem>
-
-          <div separator></div>
-
-          <ox-popup-menuitem label="checkbox">
-            <input type="checkbox" slot="icon" />
-          </ox-popup-menuitem>
-        </ox-popup-menu>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem label="checkbox in icon area" alive-on-select>
-        <input type="checkbox" slot="icon" />
-      </ox-popup-menuitem>
-
-      <div separator></div>
-
-      <div menu>Plain Text</div>
-
-      <div menu alive-on-select>
-        <ox-checkbox label="checkbox" slot="icon" checked />checkbox</ox-checkbox>
-      </div>
-
-      <div menu alive-on-select>
-        <input id="checkbox-01" type="checkbox" />
-        <label for="checkbox-01">custom menu</label>
-      </div>
-      <div menu alive-on-select>
-        <label for="text-01">value</label>
-        <input id="text-01" type="text" value="Plain text input" />
-      </div>
-    `,
-        top: e.offsetY,
-        left: e.offsetX,
-        parent: e.target
-    });
-}
-const Template = ({}) => 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>
-    #container {
-      display: flex;
-      flex-direction: row;
-      height: 600px;
-    }
-
-    #padding {
-      width: 100px;
-      height: 100px;
-    }
-
-    #place {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-
-      width: 50%;
-      height: 50%;
-      text-align: center;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div id="container">
-    <div id="padding"></div>
-    <div id="place" @click=${(e) => popup(e)} class="md-typescale-display-medium">
-      Click this to popup menu
-    </div>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {};
-//# sourceMappingURL=ox-popup-menu.stories.js.map

package/dist/stories/ox-popup-menu.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-popup-menu.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-menu.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAErD,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,SAAS,KAAK,CAAC,CAAa;IAC1B,WAAW,CAAC,IAAI,CAAC;QACf,QAAQ,EAAE,IAAI,CAAA;;;oBAGE,UAAU,CAAQ;YAC5B,OAAO,CAAC,GAAG,CAAC,8BAA8B,CAAC,CAAA;QAC7C,CAAC;;;;;;;;;;;;;oBAaW,UAAU,CAAQ;YAC5B,MAAM,IAAI,GAAI,CAAC,CAAC,MAAsB,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;YAC/D,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;QACrE,CAAC;;;;;;sDAM6C,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC;;;;;wBAK5E,UAAU,CAAQ;YAC5B,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAA;QACjC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DR;QACD,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;QACf,MAAM,EAAE,CAAC,CAAC,MAAqB;KAChC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBlD,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAgCF,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;;;;CAIvD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-menu.js'\nimport '../src/ox-popup-menuitem.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { OxPopupMenu } from '../src/ox-popup-menu.js'\n\nexport default {\n  title: 'OxPopuMenu',\n  component: 'ox-popup-menu',\n  argTypes: {}\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nfunction popup(e: MouseEvent) {\n  OxPopupMenu.open({\n    template: html`\n      <ox-popup-menuitem\n        label=\"article - click me\"\n        @selected=${function (e: Event) {\n          console.log('first level article selected')\n        }}\n      >\n        <md-icon slot=\"icon\">article</md-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem label=\"home\">\n        <md-icon slot=\"icon\">home</md-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem label=\"empty\"> </ox-popup-menuitem>\n\n      <ox-popup-menuitem\n        label=\"click me to toggle\"\n        @selected=${function (e: Event) {\n          const icon = (e.target as HTMLElement).querySelector('md-icon')\n          icon && (icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check')\n        }}\n        alive-on-select\n      >\n        <md-icon slot=\"icon\" style=\"width: 20px;height: 20px;\"></md-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem label=\"verified\" @selected=${(e: Event) => console.log('selected verified')}>\n        <md-icon slot=\"icon\">verified</md-icon>\n        <ox-popup-menu>\n          <ox-popup-menuitem\n            label=\"article\"\n            @selected=${function (e: Event) {\n              console.log('article selected')\n            }}\n            alive-on-select\n          >\n            <md-icon slot=\"icon\">article</md-icon>\n          </ox-popup-menuitem>\n\n          <ox-popup-menuitem label=\"home\">\n            <md-icon slot=\"icon\">home</md-icon>\n          </ox-popup-menuitem>\n\n          <ox-popup-menuitem label=\"verified\">\n            <md-icon slot=\"icon\">verified</md-icon>\n            <ox-popup-menu>\n              <ox-popup-menuitem label=\"article\">\n                <md-icon slot=\"icon\">article</md-icon>\n              </ox-popup-menuitem>\n\n              <ox-popup-menuitem label=\"home\">\n                <md-icon slot=\"icon\">home</md-icon>\n              </ox-popup-menuitem>\n\n              <ox-popup-menuitem label=\"verified\">\n                <md-icon slot=\"icon\">verified</md-icon>\n              </ox-popup-menuitem>\n\n              <ox-popup-menuitem label=\"checkbox\">\n                <input type=\"checkbox\" slot=\"icon\" />\n              </ox-popup-menuitem>\n\n            </ox-popup-menu>\n          </ox-popup-menuitem>\n\n          <div separator></div>\n\n          <ox-popup-menuitem label=\"checkbox\">\n            <input type=\"checkbox\" slot=\"icon\" />\n          </ox-popup-menuitem>\n        </ox-popup-menu>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem label=\"checkbox in icon area\" alive-on-select>\n        <input type=\"checkbox\" slot=\"icon\" />\n      </ox-popup-menuitem>\n\n      <div separator></div>\n\n      <div menu>Plain Text</div>\n\n      <div menu alive-on-select>\n        <ox-checkbox label=\"checkbox\" slot=\"icon\" checked />checkbox</ox-checkbox>\n      </div>\n\n      <div menu alive-on-select>\n        <input id=\"checkbox-01\" type=\"checkbox\" />\n        <label for=\"checkbox-01\">custom menu</label>\n      </div>\n      <div menu alive-on-select>\n        <label for=\"text-01\">value</label>\n        <input id=\"text-01\" type=\"text\" value=\"Plain text input\" />\n      </div>\n    `,\n    top: e.offsetY,\n    left: e.offsetX,\n    parent: e.target as HTMLElement\n  })\n}\n\nconst Template: Story<ArgTypes> = ({}: 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    #container {\n      display: flex;\n      flex-direction: row;\n      height: 600px;\n    }\n\n    #padding {\n      width: 100px;\n      height: 100px;\n    }\n\n    #place {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n\n      width: 50%;\n      height: 50%;\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=\"container\">\n    <div id=\"padding\"></div>\n    <div id=\"place\" @click=${(e: MouseEvent) => popup(e)} class=\"md-typescale-display-medium\">\n      Click this to popup menu\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

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

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

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

@@ -1,66 +0,0 @@
-import '@material/web/all.js';
-import { html } from 'lit';
-import { OxPopup } from '../src/ox-popup.js';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'Simple Popup',
-    component: 'ox-popup',
-    argTypes: {}
-};
-function popup(e) {
-    const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
-    OxPopup.open({
-        template: html `<img src=${noImage} />`,
-        top: e.offsetY,
-        left: e.offsetX,
-        backdrop: true,
-        parent: e.target
-    });
-}
-const Template = ({}) => 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 {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-
-      width: 50%;
-      height: 50%;
-      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)} class="md-typescale-display-medium">
-    Click this to popup image
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {};
-//# sourceMappingURL=ox-popup.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ox-popup.stories.js","sourceRoot":"","sources":["../../stories/ox-popup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAC5C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,OAAO,CAAC,IAAI,CAAC;QACX,QAAQ,EAAE,IAAI,CAAA,YAAY,OAAO,KAAK;QACtC,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;QACf,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,CAAC,CAAC,MAAqB;KAChC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBlD,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;2BAmBJ,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;;;CAGrD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/all.js'\nimport { html, TemplateResult } from 'lit'\n\nimport { OxPopup } from '../src/ox-popup.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'Simple Popup',\n  component: 'ox-popup',\n  argTypes: {}\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nfunction popup(e: MouseEvent) {\n  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n  OxPopup.open({\n    template: html`<img src=${noImage} />`,\n    top: e.offsetY,\n    left: e.offsetX,\n    backdrop: true,\n    parent: e.target as HTMLElement\n  })\n}\n\nconst Template: Story<ArgTypes> = ({}: 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      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n\n      width: 50%;\n      height: 50%;\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)} class=\"md-typescale-display-medium\">\n    Click this to popup image\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}