@operato/popup 7.0.0-rc.8 → 7.0.0

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,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"]}
+{"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,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa,EAAE,kBAA2B;IACvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,EAAE,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,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;2BAcJ,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC;;;;;cAK5D,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;;6BAE9B,kBAAkB;;;;;;;;;;;;;;;;;;CAkB9C,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,kBAAkB,EAAE,IAAI;CACzB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-list.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\n\nexport default {\n  title: 'OxPopupList',\n  component: 'ox-popup-list',\n  argTypes: {\n    preventCloseOnBlur: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  preventCloseOnBlur: boolean\n}\n\nfunction popup(e: MouseEvent, preventCloseOnBlur: boolean) {\n  const popupList = document.querySelector('#popup-list') as OxPopupList\n  popupList?.open({\n    top: e.pageY,\n    left: e.pageX\n  })\n}\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #place {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div id=\"place\" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n    Click this to popup list\n  </div>\n  <ox-popup-list\n    id=\"popup-list\"\n    @select=${(e: Event) => console.log('select', e.target)}\n    multiple\n    ?prevent-close-on-blur=${preventCloseOnBlur}\n  >\n    <div option>Plain Text</div>\n\n    <div option>\n      <ox-checkbox label=\"checkbox\" slot=\"icon\" checked>checkbox</ox-checkbox>\n    </div>\n\n    <div option>\n      <input id=\"checkbox-01\" type=\"checkbox\" />\n      <label for=\"checkbox-01\">custom option</label>\n    </div>\n\n    <div option>\n      <label for=\"text-01\">value</label>\n      <input id=\"text-01\" type=\"text\" value=\"Plain text input\" />\n    </div>\n  </ox-popup-list>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  preventCloseOnBlur: true\n}\n"]}

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

@@ -6,12 +6,7 @@ import { TemplateResult } from 'lit';
 declare const _default: {
     title: string;
     component: string;
-    argTypes: {
-        theme: {
-            control: string;
-            options: string[];
-        };
-    };
+    argTypes: {};
 };
 export default _default;
 interface Story<T> {
@@ -20,6 +15,5 @@ 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

@@ -8,9 +8,7 @@ import { OxPopupMenu } from '../src/ox-popup-menu.js';
 export default {
     title: 'OxPopuMenu',
     component: 'ox-popup-menu',
-    argTypes: {
-        theme: { control: 'select', options: ['light', 'dark'] }
-    }
+    argTypes: {}
 };
 function popup(e) {
     OxPopupMenu.open({
@@ -114,7 +112,7 @@ function popup(e) {
         parent: e.target
     });
 }
-const Template = ({ theme = 'light' }) => html `
+const Template = ({}) => html `
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -149,10 +147,6 @@ const Template = ({ theme = 'light' }) => html `
     }
   </style>
 
-  <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>

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,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"]}
+{"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,EAAE;CACb,CAAA;AAUD,SAAS,KAAK,CAAC,CAAa;IAC1B,WAAW,CAAC,IAAI,CAAC;QACf,QAAQ,EAAE,IAAI,CAAA;;;oBAGE,UAAU,CAAQ;YAC5B,OAAO,CAAC,GAAG,CAAC,8BAA8B,CAAC,CAAA;QAC7C,CAAC;;;;;;;;;;;;;oBAaW,UAAU,CAAQ;YAC5B,MAAM,IAAI,GAAI,CAAC,CAAC,MAAsB,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;YAC/D,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;QACrE,CAAC;;;;;;sDAM6C,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC;;;;;wBAK5E,UAAU,CAAQ;YAC5B,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAA;QACjC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DR;QACD,GAAG,EAAE,CAAC,CAAC,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;;;;;;;;;;;;;;;;;;;;;MAqBlD,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;2BAcJ,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}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nfunction popup(e: MouseEvent) {\n  OxPopupMenu.open({\n    template: html`\n      <ox-popup-menuitem\n        label=\"article - click me\"\n        @selected=${function (e: Event) {\n          console.log('first level article selected')\n        }}\n      >\n        <md-icon slot=\"icon\">article</md-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem label=\"home\">\n        <md-icon slot=\"icon\">home</md-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem label=\"empty\"> </ox-popup-menuitem>\n\n      <ox-popup-menuitem\n        label=\"click me to toggle\"\n        @selected=${function (e: Event) {\n          const icon = (e.target as HTMLElement).querySelector('md-icon')\n          icon && (icon.innerHTML = icon.innerHTML == 'check' ? '' : 'check')\n        }}\n        alive-on-select\n      >\n        <md-icon slot=\"icon\" style=\"width: 20px;height: 20px;\"></md-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem label=\"verified\" @selected=${(e: Event) => console.log('selected verified')}>\n        <md-icon slot=\"icon\">verified</md-icon>\n        <ox-popup-menu>\n          <ox-popup-menuitem\n            label=\"article\"\n            @selected=${function (e: Event) {\n              console.log('article selected')\n            }}\n            alive-on-select\n          >\n            <md-icon slot=\"icon\">article</md-icon>\n          </ox-popup-menuitem>\n\n          <ox-popup-menuitem label=\"home\">\n            <md-icon slot=\"icon\">home</md-icon>\n          </ox-popup-menuitem>\n\n          <ox-popup-menuitem label=\"verified\">\n            <md-icon slot=\"icon\">verified</md-icon>\n            <ox-popup-menu>\n              <ox-popup-menuitem label=\"article\">\n                <md-icon slot=\"icon\">article</md-icon>\n              </ox-popup-menuitem>\n\n              <ox-popup-menuitem label=\"home\">\n                <md-icon slot=\"icon\">home</md-icon>\n              </ox-popup-menuitem>\n\n              <ox-popup-menuitem label=\"verified\">\n                <md-icon slot=\"icon\">verified</md-icon>\n              </ox-popup-menuitem>\n\n              <ox-popup-menuitem label=\"checkbox\">\n                <input type=\"checkbox\" slot=\"icon\" />\n              </ox-popup-menuitem>\n\n            </ox-popup-menu>\n          </ox-popup-menuitem>\n\n          <div separator></div>\n\n          <ox-popup-menuitem label=\"checkbox\">\n            <input type=\"checkbox\" slot=\"icon\" />\n          </ox-popup-menuitem>\n        </ox-popup-menu>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem label=\"checkbox in icon area\" alive-on-select>\n        <input type=\"checkbox\" slot=\"icon\" />\n      </ox-popup-menuitem>\n\n      <div separator></div>\n\n      <div menu>Plain Text</div>\n\n      <div menu alive-on-select>\n        <ox-checkbox label=\"checkbox\" slot=\"icon\" checked />checkbox</ox-checkbox>\n      </div>\n\n      <div menu alive-on-select>\n        <input id=\"checkbox-01\" type=\"checkbox\" />\n        <label for=\"checkbox-01\">custom menu</label>\n      </div>\n      <div menu alive-on-select>\n        <label for=\"text-01\">value</label>\n        <input id=\"text-01\" type=\"text\" value=\"Plain text input\" />\n      </div>\n    `,\n    top: e.pageY,\n    left: e.pageX,\n    parent: e.target as HTMLElement\n  })\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #place {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div id=\"place\" @click=${(e: MouseEvent) => popup(e)} 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

@@ -3,12 +3,7 @@ import { TemplateResult } from 'lit';
 declare const _default: {
     title: string;
     component: string;
-    argTypes: {
-        theme: {
-            control: string;
-            options: string[];
-        };
-    };
+    argTypes: {};
 };
 export default _default;
 interface Story<T> {
@@ -17,6 +12,5 @@ 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

@@ -5,9 +5,7 @@ import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typesca
 export default {
     title: 'ContextMenu',
     component: 'ox-popup',
-    argTypes: {
-        theme: { control: 'select', options: ['light', 'dark'] }
-    }
+    argTypes: {}
 };
 function popup(e) {
     const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
@@ -18,7 +16,7 @@ function popup(e) {
         parent: e.target
     });
 }
-const Template = ({ theme = 'light' }) => html `
+const Template = ({}) => html `
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -53,10 +51,6 @@ const Template = ({ theme = 'light' }) => html `
     }
   </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>

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,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"]}
+{"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,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,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBlD,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;2BAcJ,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}\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) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #place {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div id=\"place\" @click=${(e: MouseEvent) => popup(e)} class=\"md-typescale-display-medium\">\n    Click this to popup image\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

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

@@ -11,10 +11,6 @@ declare const _default: {
         preventCloseOnBlur: {
             control: string;
         };
-        theme: {
-            control: string;
-            options: string[];
-        };
     };
 };
 export default _default;
@@ -26,6 +22,5 @@ interface Story<T> {
 interface ArgTypes {
     type: 'success' | 'error' | 'warning' | 'info' | 'question';
     preventCloseOnBlur: boolean;
-    theme?: 'light' | 'dark';
 }
 export declare const Regular: Story<ArgTypes>;

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

@@ -7,23 +7,21 @@ export default {
     component: 'ox-prompt',
     argTypes: {
         type: { control: 'select', options: ['success', 'error', 'warning', 'info', 'question'] },
-        preventCloseOnBlur: { control: 'boolean' },
-        theme: { control: 'select', options: ['light', 'dark'] }
+        preventCloseOnBlur: { control: 'boolean' }
     }
 };
-function popup(e, type = 'warning', theme, preventCloseOnBlur) {
-    const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
+function popup(e, type = 'warning', preventCloseOnBlur) {
     OxPrompt.open({
         title: 'Are you sure ?',
         text: 'Are you sure to exit this page ?',
         type,
-        icon: noImage,
+        icon: 'logout',
         confirmButton: { text: 'Confirm' },
         cancelButton: { text: 'Cancel' },
         preventCloseOnBlur
     });
 }
-const Template = ({ type, preventCloseOnBlur, theme = 'light' }) => html `
+const Template = ({ type, preventCloseOnBlur }) => html `
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -58,15 +56,7 @@ const Template = ({ type, preventCloseOnBlur, theme = 'light' }) => html `
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
-  <div
-    id="place"
-    @click=${(e) => popup(e, type, theme, preventCloseOnBlur)}
-    class="md-typescale-display-medium"
-  >
+  <div id="place" @click=${(e) => popup(e, type, preventCloseOnBlur)} class="md-typescale-display-medium">
     Click this to prompt image
   </div>
 `;

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

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

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

@@ -4,9 +4,8 @@ declare const _default: {
     title: string;
     component: string;
     argTypes: {
-        theme: {
+        preventCloseOnBlur: {
             control: string;
-            options: string[];
         };
     };
 };
@@ -17,6 +16,6 @@ interface Story<T> {
     argTypes?: Record<string, unknown>;
 }
 interface ArgTypes {
-    theme?: 'light' | 'dark';
+    preventCloseOnBlur: boolean;
 }
 export declare const Regular: Story<ArgTypes>;

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

@@ -6,19 +6,20 @@ export default {
     title: 'OxPrompt - Normal',
     component: 'ox-prompt',
     argTypes: {
-        theme: { control: 'select', options: ['light', 'dark'] }
+        preventCloseOnBlur: { control: 'boolean' }
     }
 };
-function popup(e) {
+function popup(e, preventCloseOnBlur) {
     const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
     OxPrompt.open({
         title: 'Are you sure ?',
         text: 'Are you sure to exit this page ?',
         confirmButton: { text: 'Confirm' },
-        cancelButton: { text: 'Cancel' }
+        cancelButton: { text: 'Cancel' },
+        preventCloseOnBlur
     });
 }
-const Template = ({ theme = 'light' }) => html `
+const Template = ({ preventCloseOnBlur }) => html `
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -53,14 +54,12 @@ const Template = ({ theme = 'light' }) => html `
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
-  <div id="place" @click=${(e) => popup(e)} class="md-typescale-display-medium">
+  <div id="place" @click=${(e) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
     Click this to prompt image
   </div>
 `;
 export const Regular = Template.bind({});
-Regular.args = {};
+Regular.args = {
+    preventCloseOnBlur: true
+};
 //# sourceMappingURL=ox-prompt-normal.stories.js.map

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

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

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

@@ -3,9 +3,8 @@ declare const _default: {
     title: string;
     component: string;
     argTypes: {
-        theme: {
+        preventCloseOnBlur: {
             control: string;
-            options: string[];
         };
     };
 };
@@ -16,6 +15,6 @@ interface Story<T> {
     argTypes?: Record<string, unknown>;
 }
 interface ArgTypes {
-    theme?: 'light' | 'dark';
+    preventCloseOnBlur: boolean;
 }
 export declare const Regular: Story<ArgTypes>;

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

@@ -5,10 +5,10 @@ export default {
     title: 'OxPrompt',
     component: 'ox-prompt',
     argTypes: {
-        theme: { control: 'select', options: ['light', 'dark'] }
+        preventCloseOnBlur: { control: 'boolean' }
     }
 };
-async function popup(e) {
+async function popup(e, preventCloseOnBlur) {
     const noImage = new URL('/assets/images/no-image.png', import.meta.url).href;
     await OxPrompt.open({
         type: 'info',
@@ -17,10 +17,11 @@ async function popup(e) {
         footer: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
         template: html `<img src=${noImage} />`,
         confirmButton: { text: 'Confirm' },
-        cancelButton: { text: 'Cancel' }
+        cancelButton: { text: 'Cancel' },
+        preventCloseOnBlur
     });
 }
-const Template = ({ theme = 'light' }) => html `
+const Template = ({ preventCloseOnBlur }) => html `
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -55,11 +56,7 @@ const Template = ({ theme = 'light' }) => html `
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
-  <div id="place" @click=${(e) => popup(e)} class="md-typescale-display-medium">
+  <div id="place" @click=${(e) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
     Click this to prompt image
   </div>
 `;

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

@@ -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,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAYD,KAAK,UAAU,KAAK,CAAC,CAAa;IAChC,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,MAAM,QAAQ,CAAC,IAAI,CAAC;QAClB,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,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 { html, TemplateResult } from 'lit'\n\nimport { OxPrompt } from '../src/ox-prompt'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'OxPrompt',\n  component: 'ox-prompt',\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\nasync function popup(e: MouseEvent) {\n  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n  await 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> = ({ 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 prompt image\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
+{"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;AAC3C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,KAAK,UAAU,KAAK,CAAC,CAAa,EAAE,kBAA2B;IAC7D,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,MAAM,QAAQ,CAAC,IAAI,CAAC;QAClB,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;QAChC,kBAAkB;KACnB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;2BAcJ,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC;;;CAGzE,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport { OxPrompt } from '../src/ox-prompt'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'OxPrompt',\n  component: 'ox-prompt',\n  argTypes: {\n    preventCloseOnBlur: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  preventCloseOnBlur: boolean\n}\n\nasync function popup(e: MouseEvent, preventCloseOnBlur: boolean) {\n  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n  await 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    preventCloseOnBlur\n  })\n}\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #place {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div id=\"place\" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n    Click this to prompt image\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}