@operato/popup 2.0.0-alpha.9 → 2.0.0-alpha.92

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/CHANGELOG.md +151 -0
  2. package/demo/index.html +25 -14
  3. package/demo/ox-popup-list.html +14 -3
  4. package/demo/ox-popup-menu.html +25 -14
  5. package/dist/src/ox-floating-overlay.d.ts +2 -2
  6. package/dist/src/ox-floating-overlay.js +5 -7
  7. package/dist/src/ox-floating-overlay.js.map +1 -1
  8. package/dist/src/ox-popup-list.d.ts +2 -2
  9. package/dist/src/ox-popup-list.js +12 -10
  10. package/dist/src/ox-popup-list.js.map +1 -1
  11. package/dist/src/ox-popup-menu.d.ts +1 -1
  12. package/dist/src/ox-popup-menuitem.d.ts +1 -1
  13. package/dist/src/ox-popup-menuitem.js +2 -2
  14. package/dist/src/ox-popup-menuitem.js.map +1 -1
  15. package/dist/src/ox-popup.d.ts +1 -1
  16. package/dist/src/ox-popup.js +1 -1
  17. package/dist/src/ox-popup.js.map +1 -1
  18. package/dist/src/ox-prompt.d.ts +3 -2
  19. package/dist/src/ox-prompt.js +39 -6
  20. package/dist/src/ox-prompt.js.map +1 -1
  21. package/dist/stories/open-popup.stories.js +27 -18
  22. package/dist/stories/open-popup.stories.js.map +1 -1
  23. package/dist/stories/ox-popup-list.stories.d.ts +1 -1
  24. package/dist/stories/ox-popup-list.stories.js +15 -3
  25. package/dist/stories/ox-popup-list.stories.js.map +1 -1
  26. package/dist/stories/ox-popup-menu.stories.d.ts +1 -1
  27. package/dist/stories/ox-popup-menu.stories.js +37 -25
  28. package/dist/stories/ox-popup-menu.stories.js.map +1 -1
  29. package/dist/stories/ox-prompt-icon.stories.d.ts +25 -0
  30. package/dist/stories/ox-prompt-icon.stories.js +57 -0
  31. package/dist/stories/ox-prompt-icon.stories.js.map +1 -0
  32. package/dist/stories/ox-prompt-normal.stories.js +24 -13
  33. package/dist/stories/ox-prompt-normal.stories.js.map +1 -1
  34. package/dist/stories/ox-prompt.stories.js +24 -13
  35. package/dist/stories/ox-prompt.stories.js.map +1 -1
  36. package/dist/tsconfig.tsbuildinfo +1 -1
  37. package/package.json +16 -16
  38. package/src/ox-floating-overlay.ts +5 -7
  39. package/src/ox-popup-list.ts +12 -10
  40. package/src/ox-popup-menuitem.ts +2 -2
  41. package/src/ox-popup.ts +1 -1
  42. package/src/ox-prompt.ts +39 -6
  43. package/stories/open-popup.stories.ts +28 -20
  44. package/stories/ox-popup-list.stories.ts +15 -3
  45. package/stories/ox-popup-menu.stories.ts +38 -27
  46. package/stories/ox-prompt-icon.stories.ts +74 -0
  47. package/stories/ox-prompt-normal.stories.ts +27 -17
  48. package/stories/ox-prompt.stories.ts +27 -17
  49. package/themes/input-theme.css +7 -7
package/dist/stories/open-popup.stories.js CHANGED
@@ -18,26 +18,35 @@ function popup(e, options) {
18
18
  return openPopup(html `<img src=${noImage} />`, options);
19
19
  }
20
20
  const Template = ({ title = '', size = 'medium', hovering = 'center', closable, escapable, backdrop, help }) => html `
21
- <link href="/themes/app-theme.css" rel="stylesheet" />
22
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
21
+ <link href="/themes/app-theme.css" rel="stylesheet" />
23
22
 
24
- <style>
25
- #place {
26
- width: 100%;
27
- height: 500px;
28
- background: lightgreen;
29
- text-align: center;
30
- line-height: 500px;
31
- }
32
- </style>
23
+ <link
24
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
25
+ rel="stylesheet"
26
+ />
27
+ <link
28
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
29
+ rel="stylesheet"
30
+ />
31
+ <link
32
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
33
+ rel="stylesheet"
34
+ />
33
35
 
34
- <div
35
- id="place"
36
- @click=${(e) => popup(e, { title, size, hovering, closable, escapable, backdrop, help })}
37
- >
38
- Click this to popup image
39
- </div>
40
- `;
36
+ <style>
37
+ #place {
38
+ width: 100%;
39
+ height: 500px;
40
+ background: lightgreen;
41
+ text-align: center;
42
+ line-height: 500px;
43
+ }
44
+ </style>
45
+
46
+ <div id="place" @click=${(e) => popup(e, { title, size, hovering, closable, escapable, backdrop, help })}>
47
+ Click this to popup image
48
+ </div>
49
+ `;
41
50
  export const Regular = Template.bind({});
42
51
  Regular.args = {
43
52
  title: 'Regular popup',
package/dist/stories/open-popup.stories.js.map CHANGED
@@ -1 +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,CACb,IAAI,CAAA;;;;;;;;;;;;;;;;eAgBS,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;;;;GAIvG,CAAA;AAEH,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) =>\n html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\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\n id=\"place\"\n @click=${(e: MouseEvent) => popup(e, { title, size, hovering, closable, escapable, backdrop, help })}\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"]}
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"]}
package/dist/stories/ox-popup-list.stories.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import '@material/mwc-icon';
1
+ import '@material/web/icon/icon.js';
2
2
  import '@operato/input/ox-checkbox.js';
3
3
  import '../src/ox-popup-list.js';
4
4
  import { TemplateResult } from 'lit';
package/dist/stories/ox-popup-list.stories.js CHANGED
@@ -1,4 +1,4 @@
1
- import '@material/mwc-icon';
1
+ import '@material/web/icon/icon.js';
2
2
  import '@operato/input/ox-checkbox.js';
3
3
  import '../src/ox-popup-list.js';
4
4
  import { html } from 'lit';
@@ -15,8 +15,20 @@ function popup(e) {
15
15
  });
16
16
  }
17
17
  const Template = ({}) => html `
18
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
19
- <style>
18
+ <link
19
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
20
+ rel="stylesheet"
21
+ />
22
+ <link
23
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
24
+ rel="stylesheet"
25
+ />
26
+ <link
27
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
28
+ rel="stylesheet"
29
+ />
30
+
31
+ <style>
20
32
  #place {
21
33
  width: 100%;
22
34
  height: 500px;
package/dist/stories/ox-popup-list.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-popup-list.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,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;;;;;;;;;;;;6BAYuB,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/mwc-icon'\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 href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\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"]}
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"]}
package/dist/stories/ox-popup-menu.stories.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import '../src/ox-popup-menu.js';
2
2
  import '../src/ox-popup-menuitem.js';
3
- import '@material/mwc-icon';
3
+ import '@material/web/icon/icon.js';
4
4
  import '@operato/input/ox-checkbox.js';
5
5
  import { TemplateResult } from 'lit';
6
6
  declare const _default: {
package/dist/stories/ox-popup-menu.stories.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import '../src/ox-popup-menu.js';
2
2
  import '../src/ox-popup-menuitem.js';
3
- import '@material/mwc-icon';
3
+ import '@material/web/icon/icon.js';
4
4
  import '@operato/input/ox-checkbox.js';
5
5
  import { html } from 'lit';
6
6
  import { OxPopupMenu } from '../src/ox-popup-menu.js';
@@ -18,11 +18,11 @@ function popup(e) {
18
18
  console.log('first level article selected');
19
19
  }}
20
20
  >
21
- <mwc-icon slot="icon">article</mwc-icon>
21
+ <md-icon slot="icon">article</md-icon>
22
22
  </ox-popup-menuitem>
23
23
 
24
24
  <ox-popup-menuitem label="home">
25
- <mwc-icon slot="icon">home</mwc-icon>
25
+ <md-icon slot="icon">home</md-icon>
26
26
  </ox-popup-menuitem>
27
27
 
28
28
  <ox-popup-menuitem label="empty"> </ox-popup-menuitem>
@@ -30,16 +30,16 @@ function popup(e) {
30
30
  <ox-popup-menuitem
31
31
  label="click me to toggle"
32
32
  @selected=${function (e) {
33
- const icon = e.target.querySelector('mwc-icon');
33
+ const icon = e.target.querySelector('md-icon');
34
34
  icon && (icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check');
35
35
  }}
36
36
  alive-on-select
37
37
  >
38
- <mwc-icon slot="icon" style="width: 20px;height: 20px;"></mwc-icon>
38
+ <md-icon slot="icon" style="width: 20px;height: 20px;"></md-icon>
39
39
  </ox-popup-menuitem>
40
40
 
41
41
  <ox-popup-menuitem label="verified" @selected=${(e) => console.log('selected verified')}>
42
- <mwc-icon slot="icon">verified</mwc-icon>
42
+ <md-icon slot="icon">verified</md-icon>
43
43
  <ox-popup-menu>
44
44
  <ox-popup-menuitem
45
45
  label="article"
@@ -48,26 +48,26 @@ function popup(e) {
48
48
  }}
49
49
  alive-on-select
50
50
  >
51
- <mwc-icon slot="icon">article</mwc-icon>
51
+ <md-icon slot="icon">article</md-icon>
52
52
  </ox-popup-menuitem>
53
53
 
54
54
  <ox-popup-menuitem label="home">
55
- <mwc-icon slot="icon">home</mwc-icon>
55
+ <md-icon slot="icon">home</md-icon>
56
56
  </ox-popup-menuitem>
57
57
 
58
58
  <ox-popup-menuitem label="verified">
59
- <mwc-icon slot="icon">verified</mwc-icon>
59
+ <md-icon slot="icon">verified</md-icon>
60
60
  <ox-popup-menu>
61
61
  <ox-popup-menuitem label="article">
62
- <mwc-icon slot="icon">article</mwc-icon>
62
+ <md-icon slot="icon">article</md-icon>
63
63
  </ox-popup-menuitem>
64
64
 
65
65
  <ox-popup-menuitem label="home">
66
- <mwc-icon slot="icon">home</mwc-icon>
66
+ <md-icon slot="icon">home</md-icon>
67
67
  </ox-popup-menuitem>
68
68
 
69
69
  <ox-popup-menuitem label="verified">
70
- <mwc-icon slot="icon">verified</mwc-icon>
70
+ <md-icon slot="icon">verified</md-icon>
71
71
  </ox-popup-menuitem>
72
72
 
73
73
  <ox-popup-menuitem label="checkbox">
@@ -113,19 +113,31 @@ function popup(e) {
113
113
  });
114
114
  }
115
115
  const Template = ({}) => html `
116
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
117
- <style>
118
- #place {
119
- width: 100%;
120
- height: 500px;
121
- background: lightgreen;
122
- text-align: center;
123
- line-height: 500px;
124
- }
125
- </style>
126
-
127
- <div id="place" @click=${(e) => popup(e)}>Click this to popup menu</div>
128
- `;
116
+ <link
117
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
118
+ rel="stylesheet"
119
+ />
120
+ <link
121
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
122
+ rel="stylesheet"
123
+ />
124
+ <link
125
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
126
+ rel="stylesheet"
127
+ />
128
+
129
+ <style>
130
+ #place {
131
+ width: 100%;
132
+ height: 500px;
133
+ background: lightgreen;
134
+ text-align: center;
135
+ line-height: 500px;
136
+ }
137
+ </style>
138
+
139
+ <div id="place" @click=${(e) => popup(e)}>Click this to popup menu</div>
140
+ `;
129
141
  export const Regular = Template.bind({});
130
142
  Regular.args = {};
131
143
  //# sourceMappingURL=ox-popup-menu.stories.js.map
package/dist/stories/ox-popup-menu.stories.js.map CHANGED
@@ -1 +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,oBAAoB,CAAA;AAC3B,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,UAAU,CAAC,CAAA;YAChE,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,CACjD,IAAI,CAAA;;;;;;;;;;;;6BAYuB,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 '../src/ox-popup-menu.js'\nimport '../src/ox-popup-menuitem.js'\nimport '@material/mwc-icon'\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 <mwc-icon slot=\"icon\">article</mwc-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem label=\"home\">\n <mwc-icon slot=\"icon\">home</mwc-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('mwc-icon')\n icon && (icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check')\n }}\n alive-on-select\n >\n <mwc-icon slot=\"icon\" style=\"width: 20px;height: 20px;\"></mwc-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem label=\"verified\" @selected=${(e: Event) => console.log('selected verified')}>\n <mwc-icon slot=\"icon\">verified</mwc-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 <mwc-icon slot=\"icon\">article</mwc-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem label=\"home\">\n <mwc-icon slot=\"icon\">home</mwc-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem label=\"verified\">\n <mwc-icon slot=\"icon\">verified</mwc-icon>\n <ox-popup-menu>\n <ox-popup-menuitem label=\"article\">\n <mwc-icon slot=\"icon\">article</mwc-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem label=\"home\">\n <mwc-icon slot=\"icon\">home</mwc-icon>\n </ox-popup-menuitem>\n\n <ox-popup-menuitem label=\"verified\">\n <mwc-icon slot=\"icon\">verified</mwc-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) =>\n html`\n <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\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"]}
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"]}
package/dist/stories/ox-prompt-icon.stories.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { TemplateResult } from 'lit';
2
+ declare const _default: {
3
+ title: string;
4
+ component: string;
5
+ argTypes: {
6
+ type: {
7
+ control: string;
8
+ options: string[];
9
+ };
10
+ debug: {
11
+ control: string;
12
+ };
13
+ };
14
+ };
15
+ export default _default;
16
+ interface Story<T> {
17
+ (args: T): TemplateResult;
18
+ args?: Partial<T>;
19
+ argTypes?: Record<string, unknown>;
20
+ }
21
+ interface ArgTypes {
22
+ type: 'success' | 'error' | 'warning' | 'info' | 'question';
23
+ debug: boolean;
24
+ }
25
+ export declare const Regular: Story<ArgTypes>;
package/dist/stories/ox-prompt-icon.stories.js ADDED
@@ -0,0 +1,57 @@
1
+ import { html } from 'lit';
2
+ import { OxPrompt } from '../src/ox-prompt';
3
+ export default {
4
+ title: 'OxPrompt - Icon',
5
+ component: 'ox-prompt',
6
+ argTypes: {
7
+ type: { control: 'select', options: ['success', 'error', 'warning', 'info', 'question'] },
8
+ debug: { control: 'boolean' }
9
+ }
10
+ };
11
+ function popup(e, type = 'warning', debug) {
12
+ const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
13
+ //@ts-ignore
14
+ window.POPUP_DEBUG = debug;
15
+ OxPrompt.open({
16
+ title: 'Are you sure ?',
17
+ text: 'Are you sure to exit this page ?',
18
+ type,
19
+ confirmButton: { text: 'Confirm' },
20
+ cancelButton: { text: 'Cancel' }
21
+ });
22
+ }
23
+ const Template = ({ type, debug }) => html `
24
+ <link href="/themes/app-theme.css" rel="stylesheet" />
25
+ <link
26
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
27
+ rel="stylesheet"
28
+ />
29
+ <link
30
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
31
+ rel="stylesheet"
32
+ />
33
+ <link
34
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
35
+ rel="stylesheet"
36
+ />
37
+
38
+ <script></script>
39
+
40
+ <style>
41
+ #place {
42
+ width: 100%;
43
+ height: 500px;
44
+ background: lightgreen;
45
+ text-align: center;
46
+ line-height: 500px;
47
+ }
48
+ </style>
49
+
50
+ <div id="place" @click=${(e) => popup(e, type, debug)}>Click this to prompt image</div>
51
+ `;
52
+ export const Regular = Template.bind({});
53
+ Regular.args = {
54
+ type: 'warning',
55
+ debug: true
56
+ };
57
+ //# sourceMappingURL=ox-prompt-icon.stories.js.map
package/dist/stories/ox-prompt-icon.stories.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ox-prompt-icon.stories.js","sourceRoot":"","sources":["../../stories/ox-prompt-icon.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE;QACzF,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC9B;CACF,CAAA;AAaD,SAAS,KAAK,CAAC,CAAa,EAAE,OAA8D,SAAS,EAAE,KAAc;IACnH,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,YAAY;IACZ,MAAM,CAAC,WAAW,GAAG,KAAK,CAAA;IAE1B,QAAQ,CAAC,IAAI,CAAC;QACZ,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,kCAAkC;QACxC,IAAI;QACJ,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KACjC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA2B1C,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC;CAClE,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,IAAI;CACZ,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport { OxPrompt } from '../src/ox-prompt'\n\nexport default {\n title: 'OxPrompt - Icon',\n component: 'ox-prompt',\n argTypes: {\n type: { control: 'select', options: ['success', 'error', 'warning', 'info', 'question'] },\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 type: 'success' | 'error' | 'warning' | 'info' | 'question'\n debug: boolean\n}\n\nfunction popup(e: MouseEvent, type: 'success' | 'error' | 'warning' | 'info' | 'question' = 'warning', debug: boolean) {\n const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n //@ts-ignore\n window.POPUP_DEBUG = debug\n\n OxPrompt.open({\n title: 'Are you sure ?',\n text: 'Are you sure to exit this page ?',\n type,\n confirmButton: { text: 'Confirm' },\n cancelButton: { text: 'Cancel' }\n })\n}\n\nconst Template: Story<ArgTypes> = ({ type, debug }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\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 <script></script>\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, type, debug)}>Click this to prompt image</div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n type: 'warning',\n debug: true\n}\n"]}
package/dist/stories/ox-prompt-normal.stories.js CHANGED
@@ -15,21 +15,32 @@ function popup(e) {
15
15
  });
16
16
  }
17
17
  const Template = ({}) => html `
18
- <link href="/themes/app-theme.css" rel="stylesheet" />
19
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
18
+ <link href="/themes/app-theme.css" rel="stylesheet" />
19
+ <link
20
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
21
+ rel="stylesheet"
22
+ />
23
+ <link
24
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
25
+ rel="stylesheet"
26
+ />
27
+ <link
28
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
29
+ rel="stylesheet"
30
+ />
20
31
 
21
- <style>
22
- #place {
23
- width: 100%;
24
- height: 500px;
25
- background: lightgreen;
26
- text-align: center;
27
- line-height: 500px;
28
- }
29
- </style>
32
+ <style>
33
+ #place {
34
+ width: 100%;
35
+ height: 500px;
36
+ background: lightgreen;
37
+ text-align: center;
38
+ line-height: 500px;
39
+ }
40
+ </style>
30
41
 
31
- <div id="place" @click=${(e) => popup(e)}>Click this to prompt image</div>
32
- `;
42
+ <div id="place" @click=${(e) => popup(e)}>Click this to prompt image</div>
43
+ `;
33
44
  export const Regular = Template.bind({});
34
45
  Regular.args = {};
35
46
  //# sourceMappingURL=ox-prompt-normal.stories.js.map
package/dist/stories/ox-prompt-normal.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-prompt-normal.stories.js","sourceRoot":"","sources":["../../stories/ox-prompt-normal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,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,QAAQ,CAAC,IAAI,CAAC;QACZ,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,kCAAkC;QACxC,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KACjC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CACjD,IAAI,CAAA;;;;;;;;;;;;;;6BAcuB,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 { OxPrompt } from '../src/ox-prompt'\n\nexport default {\n title: 'OxPrompt - Normal',\n component: 'ox-prompt',\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 OxPrompt.open({\n title: 'Are you sure ?',\n text: 'Are you sure to exit this page ?',\n confirmButton: { text: 'Confirm' },\n cancelButton: { text: 'Cancel' }\n })\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) =>\n html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\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 prompt image</div>\n `\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
1
+ {"version":3,"file":"ox-prompt-normal.stories.js","sourceRoot":"","sources":["../../stories/ox-prompt-normal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,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,QAAQ,CAAC,IAAI,CAAC;QACZ,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,kCAAkC;QACxC,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KACjC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;2BAyB7B,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 { html, TemplateResult } from 'lit'\n\nimport { OxPrompt } from '../src/ox-prompt'\n\nexport default {\n title: 'OxPrompt - Normal',\n component: 'ox-prompt',\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 OxPrompt.open({\n title: 'Are you sure ?',\n text: 'Are you sure to exit this page ?',\n confirmButton: { text: 'Confirm' },\n cancelButton: { text: 'Cancel' }\n })\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\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 prompt image</div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
package/dist/stories/ox-prompt.stories.js CHANGED
@@ -18,21 +18,32 @@ function popup(e) {
18
18
  });
19
19
  }
20
20
  const Template = ({}) => html `
21
- <link href="/themes/app-theme.css" rel="stylesheet" />
22
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
21
+ <link href="/themes/app-theme.css" rel="stylesheet" />
22
+ <link
23
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
24
+ rel="stylesheet"
25
+ />
26
+ <link
27
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
28
+ rel="stylesheet"
29
+ />
30
+ <link
31
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
32
+ rel="stylesheet"
33
+ />
23
34
 
24
- <style>
25
- #place {
26
- width: 100%;
27
- height: 500px;
28
- background: lightgreen;
29
- text-align: center;
30
- line-height: 500px;
31
- }
32
- </style>
35
+ <style>
36
+ #place {
37
+ width: 100%;
38
+ height: 500px;
39
+ background: lightgreen;
40
+ text-align: center;
41
+ line-height: 500px;
42
+ }
43
+ </style>
33
44
 
34
- <div id="place" @click=${(e) => popup(e)}>Click this to prompt image</div>
35
- `;
45
+ <div id="place" @click=${(e) => popup(e)}>Click this to prompt image</div>
46
+ `;
36
47
  export const Regular = Template.bind({});
37
48
  Regular.args = {};
38
49
  //# sourceMappingURL=ox-prompt.stories.js.map
package/dist/stories/ox-prompt.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-prompt.stories.js","sourceRoot":"","sources":["../../stories/ox-prompt.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,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,QAAQ,CAAC,IAAI,CAAC;QACZ,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,4BAA4B;QACpC,QAAQ,EAAE,IAAI,CAAA,YAAY,OAAO,KAAK;QACtC,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KACjC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CACjD,IAAI,CAAA;;;;;;;;;;;;;;6BAcuB,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 { OxPrompt } from '../src/ox-prompt'\n\nexport default {\n title: 'OxPrompt',\n component: 'ox-prompt',\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 OxPrompt.open({\n type: 'info',\n title: 'title',\n text: 'Are you sure ?',\n footer: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',\n template: html`<img src=${noImage} />`,\n confirmButton: { text: 'Confirm' },\n cancelButton: { text: 'Cancel' }\n })\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) =>\n html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\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 prompt image</div>\n `\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
1
+ {"version":3,"file":"ox-prompt.stories.js","sourceRoot":"","sources":["../../stories/ox-prompt.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,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,QAAQ,CAAC,IAAI,CAAC;QACZ,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,4BAA4B;QACpC,QAAQ,EAAE,IAAI,CAAA,YAAY,OAAO,KAAK;QACtC,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;QAClC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KACjC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;2BAyB7B,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 { html, TemplateResult } from 'lit'\n\nimport { OxPrompt } from '../src/ox-prompt'\n\nexport default {\n title: 'OxPrompt',\n component: 'ox-prompt',\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 OxPrompt.open({\n type: 'info',\n title: 'title',\n text: 'Are you sure ?',\n footer: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',\n template: html`<img src=${noImage} />`,\n confirmButton: { text: 'Confirm' },\n cancelButton: { text: 'Cancel' }\n })\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\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 prompt image</div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}