@operato/popup 2.0.0-alpha.99 → 2.0.0-beta.12

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

@@ -1 +1 @@
-{"version":3,"file":"open-popup.stories.js","sourceRoot":"","sources":["../../stories/open-popup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,SAAS,EAAgB,MAAM,mBAAmB,CAAA;AAE3D,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE;QAClE,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE;QACpE,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAA;AAkBD,SAAS,KAAK,CAAC,CAAa,EAAE,OAAqB;IACjD,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,OAAO,SAAS,CAAC,IAAI,CAAA,YAAY,OAAO,KAAK,EAAE,OAAO,CAAC,CAAA;AACzD,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,QAAQ,EACnB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,EACK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;2BA0BO,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;;CAGrH,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,EAAE;CACT,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport { openPopup, PopupOptions } from '../src/open-popup'\n\nexport default {\n  title: 'openPopup',\n  component: 'ox-popup',\n  argTypes: {\n    title: { constol: 'string' },\n    size: { control: 'select', options: ['large', 'medium', 'small'] },\n    hovering: { control: 'select', options: ['center', 'next', 'edge'] },\n    closable: { control: 'boolean' },\n    escapable: { control: 'boolean' },\n    backdrop: { control: 'boolean' },\n    help: { constol: 'string' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  title: string\n  size: 'large' | 'medium' | 'small'\n  hovering: 'center' | 'next' | 'edge'\n  closable: boolean\n  escapable: boolean\n  backdrop: boolean\n  help: string\n}\n\nfunction popup(e: MouseEvent, options: PopupOptions) {\n  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n  return openPopup(html`<img src=${noImage} />`, options)\n}\n\nconst Template: Story<ArgTypes> = ({\n  title = '',\n  size = 'medium',\n  hovering = 'center',\n  closable,\n  escapable,\n  backdrop,\n  help\n}: ArgTypes) => html`\n  <link href=\"/themes/app-theme.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    #place {\n      width: 100%;\n      height: 500px;\n      background: lightgreen;\n      text-align: center;\n      line-height: 500px;\n    }\n  </style>\n\n  <div id=\"place\" @click=${(e: MouseEvent) => popup(e, { title, size, hovering, closable, escapable, backdrop, help })}>\n    Click this to popup image\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  title: 'Regular popup',\n  size: 'medium',\n  hovering: 'center',\n  closable: true,\n  escapable: true,\n  backdrop: true,\n  help: ''\n}\n"]}
+{"version":3,"file":"open-popup.stories.js","sourceRoot":"","sources":["../../stories/open-popup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,SAAS,EAAgB,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE;QAClE,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE;QACpE,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC3B,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAmBD,SAAS,KAAK,CAAC,CAAa,EAAE,OAAqB;IACjD,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,OAAO,SAAS,CAAC,IAAI,CAAA,YAAY,OAAO,KAAK,EAAE,OAAO,CAAC,CAAA;AACzD,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,QAAQ,EACnB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,GAAG,OAAO,EACN,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;aAK3B,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;;;;CAKvG,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,EAAE;CACT,CAAA","sourcesContent":["import '@material/web/all.js'\nimport { html, TemplateResult } from 'lit'\n\nimport { openPopup, PopupOptions } from '../src/open-popup'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'openPopup',\n  component: 'ox-popup',\n  argTypes: {\n    title: { constol: 'string' },\n    size: { control: 'select', options: ['large', 'medium', 'small'] },\n    hovering: { control: 'select', options: ['center', 'next', 'edge'] },\n    closable: { control: 'boolean' },\n    escapable: { control: 'boolean' },\n    backdrop: { control: 'boolean' },\n    help: { constol: 'string' },\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  title: string\n  size: 'large' | 'medium' | 'small'\n  hovering: 'center' | 'next' | 'edge'\n  closable: boolean\n  escapable: boolean\n  backdrop: boolean\n  help: string\n  theme?: 'light' | 'dark'\n}\n\nfunction popup(e: MouseEvent, options: PopupOptions) {\n  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n  return openPopup(html`<img src=${noImage} />`, options)\n}\n\nconst Template: Story<ArgTypes> = ({\n  title = '',\n  size = 'medium',\n  hovering = 'center',\n  closable,\n  escapable,\n  backdrop,\n  help,\n  theme = 'light'\n}: 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  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div\n    id=\"place\"\n    @click=${(e: MouseEvent) => popup(e, { title, size, hovering, closable, escapable, backdrop, help })}\n    class=\"md-typescale-display-medium\"\n  >\n    Click this to popup image\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  title: 'Regular popup',\n  size: 'medium',\n  hovering: 'center',\n  closable: true,\n  escapable: true,\n  backdrop: true,\n  help: ''\n}\n"]}

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

@@ -0,0 +1,24 @@
+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 { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        debug: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    debug: boolean;
+}
+export declare const Regular: Story<ArgTypes>;

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

@@ -0,0 +1,169 @@
+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';
+export default {
+    title: 'sortable OxPopupList',
+    component: 'ox-popup-list',
+    argTypes: {
+        debug: { control: 'boolean' }
+    }
+};
+function popup(e) {
+    const popupList = document.querySelector('#popup-list');
+    popupList === null || popupList === void 0 ? void 0 : popupList.open({
+        top: e.pageY,
+        left: e.pageX
+    });
+}
+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 = ({ debug }) => html `
+  <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>
+    #place {
+      width: 100%;
+      height: 100px;
+      background: lightgreen;
+      text-align: center;
+      line-height: 100px;
+    }
+
+    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: 10;
+      background-color: var(--md-sys-color-surface);
+    }
+  </style>
+
+  <div id="place" @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
+      ?debug=${debug}
+    >
+      <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 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

@@ -0,0 +1 @@
+{"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;AAI1C,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC9B;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,KAAK;QACZ,IAAI,EAAE,CAAC,CAAC,KAAK;KACd,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,KAAK,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAwEpC,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;;;;gBAItC,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;gBAC7C,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;;;eAGQ,KAAK;;;QAGZ,OAAO,CAAC,GAAG,CACX,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;iDAC2B,CAAC,MAAM,CAAC,MAAM,UAAU,MAAM,CAAC,IAAI,aAAa,MAAM,CAAC,IAAI;OACrG,CACA;;;;;CAKN,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'\n\nexport default {\n  title: 'sortable OxPopupList',\n  component: 'ox-popup-list',\n  argTypes: {\n    debug: { 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  debug: boolean\n}\n\nfunction popup(e: MouseEvent) {\n  const popupList = document.querySelector('#popup-list') as OxPopupList\n  popupList?.open({\n    top: e.pageY,\n    left: e.pageX\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> = ({ debug }: ArgTypes) => html`\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    #place {\n      width: 100%;\n      height: 100px;\n      background: lightgreen;\n      text-align: center;\n      line-height: 100px;\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: 10;\n      background-color: var(--md-sys-color-surface);\n    }\n  </style>\n\n  <div id=\"place\" @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      ?debug=${debug}\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\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,11 +1,16 @@
-import '@material/web/icon/icon.js';
+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: {};
+    argTypes: {
+        theme: {
+            control: string;
+            options: string[];
+        };
+    };
 };
 export default _default;
 interface Story<T> {
@@ -14,5 +19,6 @@ interface Story<T> {
     argTypes?: Record<string, unknown>;
 }
 interface ArgTypes {
+    theme?: 'light' | 'dark';
 }
 export declare const Regular: Story<ArgTypes>;

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

@@ -1,11 +1,14 @@
-import '@material/web/icon/icon.js';
+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';
 export default {
     title: 'OxPopupList',
     component: 'ox-popup-list',
-    argTypes: {}
+    argTypes: {
+        theme: { control: 'select', options: ['light', 'dark'] }
+    }
 };
 function popup(e) {
     const popupList = document.querySelector('#popup-list');
@@ -14,7 +17,13 @@ function popup(e) {
         left: e.pageX
     });
 }
-const Template = ({}) => html `
+const Template = ({ theme = 'light' }) => 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"
@@ -27,36 +36,47 @@ const Template = ({}) => html `
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
-  
+
   <style>
-      #place {
-        width: 100%;
-        height: 500px;
-        background: lightgreen;
-        text-align: center;
-        line-height: 500px;
-      }
-    </style>
-
-    <div id="place" @click=${(e) => popup(e)}>Click this to popup list</div>
-    <ox-popup-list id="popup-list" @select=${(e) => console.log('select', e.target)} multiple>
-      <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>
-  `;
+    ${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>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div id="place" @click=${(e) => popup(e)} class="md-typescale-display-medium">
+    Click this to popup list
+  </div>
+  <ox-popup-list id="popup-list" @select=${(e) => console.log('select', e.target)} multiple>
+    <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>
+`;
 export const Regular = Template.bind({});
 Regular.args = {};
 //# sourceMappingURL=ox-popup-list.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ox-popup-list.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAI1C,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,KAAK;QACZ,IAAI,EAAE,CAAC,CAAC,KAAK;KACd,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CACjD,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;6BAwBuB,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;6CACX,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;GAiBvF,CAAA;AAEH,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 '@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'\n\nexport default {\n  title: 'OxPopupList',\n  component: 'ox-popup-list',\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 popupList = document.querySelector('#popup-list') as OxPopupList\n  popupList?.open({\n    top: e.pageY,\n    left: e.pageX\n  })\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) =>\n  html`\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      #place {\n        width: 100%;\n        height: 500px;\n        background: lightgreen;\n        text-align: center;\n        line-height: 500px;\n      }\n    </style>\n\n    <div id=\"place\" @click=${(e: MouseEvent) => popup(e)}>Click this to popup list</div>\n    <ox-popup-list id=\"popup-list\" @select=${(e: Event) => console.log('select', e.target)} multiple>\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  `\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
+{"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,8CAA8C,CAAA;AAI1F,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,KAAK;QACZ,IAAI,EAAE,CAAC,CAAC,KAAK;KACd,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBnE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;2BAGb,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;;;2CAGX,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;CAiBvF,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-list.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\n\nexport default {\n  title: 'OxPopupList',\n  component: 'ox-popup-list',\n  argTypes: {\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  theme?: 'light' | 'dark'\n}\n\nfunction popup(e: MouseEvent) {\n  const popupList = document.querySelector('#popup-list') as OxPopupList\n  popupList?.open({\n    top: e.pageY,\n    left: e.pageX\n  })\n}\n\nconst Template: Story<ArgTypes> = ({ theme = 'light' }: 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  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div id=\"place\" @click=${(e: MouseEvent) => popup(e)} class=\"md-typescale-display-medium\">\n    Click this to popup list\n  </div>\n  <ox-popup-list id=\"popup-list\" @select=${(e: Event) => console.log('select', e.target)} multiple>\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`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

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

@@ -1,12 +1,17 @@
+import '@material/web/all.js';
 import '../src/ox-popup-menu.js';
 import '../src/ox-popup-menuitem.js';
-import '@material/web/icon/icon.js';
 import '@operato/input/ox-checkbox.js';
 import { TemplateResult } from 'lit';
 declare const _default: {
     title: string;
     component: string;
-    argTypes: {};
+    argTypes: {
+        theme: {
+            control: string;
+            options: string[];
+        };
+    };
 };
 export default _default;
 interface Story<T> {
@@ -15,5 +20,6 @@ interface Story<T> {
     argTypes?: Record<string, unknown>;
 }
 interface ArgTypes {
+    theme?: 'light' | 'dark';
 }
 export declare const Regular: Story<ArgTypes>;

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

@@ -1,13 +1,16 @@
+import '@material/web/all.js';
 import '../src/ox-popup-menu.js';
 import '../src/ox-popup-menuitem.js';
-import '@material/web/icon/icon.js';
 import '@operato/input/ox-checkbox.js';
 import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 import { OxPopupMenu } from '../src/ox-popup-menu.js';
 export default {
     title: 'OxPopuMenu',
     component: 'ox-popup-menu',
-    argTypes: {}
+    argTypes: {
+        theme: { control: 'select', options: ['light', 'dark'] }
+    }
 };
 function popup(e) {
     OxPopupMenu.open({
@@ -74,7 +77,6 @@ function popup(e) {
                 <input type="checkbox" slot="icon" />
               </ox-popup-menuitem>
 
-              <div separator></div>
             </ox-popup-menu>
           </ox-popup-menuitem>
 
@@ -112,7 +114,13 @@ function popup(e) {
         parent: e.target
     });
 }
-const Template = ({}) => html `
+const Template = ({ theme = 'light' }) => 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"
@@ -126,17 +134,28 @@ const Template = ({}) => html `
     rel="stylesheet"
   />
 
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
   <style>
     #place {
       width: 100%;
       height: 500px;
-      background: lightgreen;
       text-align: center;
-      line-height: 500px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
     }
   </style>
 
-  <div id="place" @click=${(e) => popup(e)}>Click this to popup menu</div>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div id="place" @click=${(e) => popup(e)} class="md-typescale-display-medium">
+    Click this to popup menu
+  </div>
 `;
 export const Regular = Template.bind({});
 Regular.args = {};

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

@@ -1 +1 @@
-{"version":3,"file":"ox-popup-menu.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-menu.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AACpC,OAAO,4BAA4B,CAAA;AACnC,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6DR;QACD,GAAG,EAAE,CAAC,CAAC,KAAK;QACZ,IAAI,EAAE,CAAC,CAAC,KAAK;QACb,MAAM,EAAE,CAAC,CAAC,MAAqB;KAChC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;2BAwB7B,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;CACrD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '../src/ox-popup-menu.js'\nimport '../src/ox-popup-menuitem.js'\nimport '@material/web/icon/icon.js'\nimport '@operato/input/ox-checkbox.js'\n\nimport { html, TemplateResult } from 'lit'\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              <div separator></div>\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.pageY,\n    left: e.pageX,\n    parent: e.target as HTMLElement\n  })\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\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    #place {\n      width: 100%;\n      height: 500px;\n      background: lightgreen;\n      text-align: center;\n      line-height: 500px;\n    }\n  </style>\n\n  <div id=\"place\" @click=${(e: MouseEvent) => popup(e)}>Click this to popup menu</div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
+{"version":3,"file":"ox-popup-menu.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-menu.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AACpC,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAErD,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAYD,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,KAAK;QACZ,IAAI,EAAE,CAAC,CAAC,KAAK;QACb,MAAM,EAAE,CAAC,CAAC,MAAqB;KAChC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBnE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;2BAGb,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 '../src/ox-popup-menu.js'\nimport '../src/ox-popup-menuitem.js'\nimport '@operato/input/ox-checkbox.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { OxPopupMenu } from '../src/ox-popup-menu.js'\n\nexport default {\n  title: 'OxPopuMenu',\n  component: 'ox-popup-menu',\n  argTypes: {\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  theme?: 'light' | 'dark'\n}\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.pageY,\n    left: e.pageX,\n    parent: e.target as HTMLElement\n  })\n}\n\nconst Template: Story<ArgTypes> = ({ theme = 'light' }: 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  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div id=\"place\" @click=${(e: MouseEvent) => popup(e)} class=\"md-typescale-display-medium\">\n    Click this to popup menu\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

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

@@ -1,8 +1,14 @@
+import '@material/web/all.js';
 import { TemplateResult } from 'lit';
 declare const _default: {
     title: string;
     component: string;
-    argTypes: {};
+    argTypes: {
+        theme: {
+            control: string;
+            options: string[];
+        };
+    };
 };
 export default _default;
 interface Story<T> {
@@ -11,5 +17,6 @@ interface Story<T> {
     argTypes?: Record<string, unknown>;
 }
 interface ArgTypes {
+    theme?: 'light' | 'dark';
 }
 export declare const Regular: Story<ArgTypes>;

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

@@ -1,9 +1,13 @@
+import '@material/web/all.js';
 import { html } from 'lit';
 import { OxPopup } from '../src/ox-popup';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 export default {
     title: 'ContextMenu',
     component: 'ox-popup',
-    argTypes: {}
+    argTypes: {
+        theme: { control: 'select', options: ['light', 'dark'] }
+    }
 };
 function popup(e) {
     const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
@@ -14,19 +18,49 @@ function popup(e) {
         parent: e.target
     });
 }
-const Template = ({}) => html `
-    <style>
-      #place {
-        width: 100%;
-        height: 500px;
-        background: lightgreen;
-        text-align: center;
-        line-height: 500px;
-      }
-    </style>
+const Template = ({ theme = 'light' }) => html `
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
-    <div id="place" @click=${(e) => popup(e)}>Click this to popup image</div>
-  `;
+  <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>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <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 +1 @@
-{"version":3,"file":"ox-popup.stories.js","sourceRoot":"","sources":["../../stories/ox-popup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEzC,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,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,KAAK;QACZ,IAAI,EAAE,CAAC,CAAC,KAAK;QACb,MAAM,EAAE,CAAC,CAAC,MAAqB;KAChC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CACjD,IAAI,CAAA;;;;;;;;;;;6BAWuB,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;GACrD,CAAA;AAEH,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 { OxPopup } from '../src/ox-popup'\n\nexport default {\n  title: 'ContextMenu',\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.pageY,\n    left: e.pageX,\n    parent: e.target as HTMLElement\n  })\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) =>\n  html`\n    <style>\n      #place {\n        width: 100%;\n        height: 500px;\n        background: lightgreen;\n        text-align: center;\n        line-height: 500px;\n      }\n    </style>\n\n    <div id=\"place\" @click=${(e: MouseEvent) => popup(e)}>Click this to popup image</div>\n  `\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
+{"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,iBAAiB,CAAA;AACzC,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAYD,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,KAAK;QACZ,IAAI,EAAE,CAAC,CAAC,KAAK;QACb,MAAM,EAAE,CAAC,CAAC,MAAqB;KAChC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBnE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;2BAGb,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'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ContextMenu',\n  component: 'ox-popup',\n  argTypes: {\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  theme?: 'light' | 'dark'\n}\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.pageY,\n    left: e.pageX,\n    parent: e.target as HTMLElement\n  })\n}\n\nconst Template: Story<ArgTypes> = ({ theme = 'light' }: 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  <script>\n    document.body.classList.add('${theme}')\n  </script>\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"]}