@operato/popup 9.0.0-beta.4 → 9.0.0-beta.48

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

@@ -0,0 +1,133 @@
+import '@material/web/all.js';
+import '@operato/input/ox-checkbox.js';
+import '../src/ox-popup-list.js';
+import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
+export default {
+    title: 'OxPopupList for Image 2',
+    component: 'ox-popup-list',
+    argTypes: {
+        preventCloseOnBlur: { control: 'boolean' }
+    }
+};
+function popup(e, preventCloseOnBlur) {
+    const popupList = document.querySelector('#popup-list');
+    popupList.preventCloseOnBlur = preventCloseOnBlur;
+    popupList?.open({
+        top: e.offsetY,
+        left: e.offsetX
+    });
+}
+const Template = ({ preventCloseOnBlur }) => html `
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    #container {
+      display: flex;
+    }
+
+    #noise {
+      width: 100px;
+      height: 100px;
+    }
+
+    #place {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      width: 50%;
+      height: 50%;
+      text-align: center;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+      border: 2px solid var(--md-sys-color-primary);
+    }
+  </style>
+
+  <style>
+    .line-type {
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAH0CAYAAABFKcHfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzY1MUM3RkUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzY1MUM4MEUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3NjUxQzdERTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU3NjUxQzdFRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+SQt6uQAAAx5JREFUeNrs20GKwkAQQFFbPFa8UN+ncyHjuaKbQBOVJB3REt/fzIQ4CI8qZlWplDIetKsjAoghSuNom00iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEqO2dpl/6vr/cf3TVuyHnfPZ++X09id0M2PPK5xpxmH3oOnv2/sV7l/f+sUCEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiREGECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiRIhqqr68f7jZzTkn75ffm0TrHCOX9yYRIkRBhAgRoiBChAhRECFChCiIECFCFESIECEKIkSIgggRIkRBhAgRoiBChAhRECFChCiIECFCVFOplLLqVre+Qp96do3+j39rEq1zkHV2eW8SIUIURIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiRLX09sv7T1y7R/sOk2idg6yzy3uTCBGiIEKECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiREGECBGiIEKECFEQIUKEKIgQIUIURIgQIaql1Zf3a9tzFf+r32ESrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfT1y/uIl/pbP28SrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfRzl/cRL/VNonUOss4u700iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGitnQTYAAk0fJFyzB3ywAAAABJRU5ErkJggg==)
+        50% 0 no-repeat;
+      min-height: 30px;
+      padding: 3px 7px;
+      width: 80px;
+      float: left;
+    }
+
+    .line-type.solid {
+      background-position: 50% 10px;
+    }
+    .line-type.round-dot {
+      background-position: 50% -40px;
+    }
+    .line-type.square-dot {
+      background-position: 50% -90px;
+    }
+    .line-type.dash {
+      background-position: 50% -140px;
+    }
+    .line-type.dash-dot {
+      background-position: 50% -190px;
+    }
+    .line-type.long-dash {
+      background-position: 50% -240px;
+    }
+    .line-type.long-dash-dot {
+      background-position: 50% -290px;
+    }
+    .line-type.long-dash-dot-dot {
+      background-position: 50% -340px;
+    }
+  </style>
+
+  <div id="container">
+    <div id="noise"></div>
+    <div id="place" @click=${(e) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
+      Click this to popup list
+      <ox-popup-list
+        id="popup-list"
+        @select=${(e) => console.log('select', e.target)}
+        multiple
+        ?prevent-close-on-blur=${preventCloseOnBlur}
+      >
+        <div class="line-type solid" name="solid" option></div>
+        <div class="line-type round-dot" name="round-dot" option></div>
+        <div class="line-type square-dot" name="square-dot" option></div>
+        <div class="line-type dash" name="dash" option></div>
+        <div class="line-type dash-dot" name="dash-dot" option></div>
+        <div class="line-type long-dash" name="long-dash" option></div>
+        <div class="line-type long-dash-dot" name="long-dash-dot" option></div>
+        <div class="line-type long-dash-dot-dot" name="long-dash-dot-dot" option></div>
+      </ox-popup-list>
+    </div>
+  </div>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    preventCloseOnBlur: true
+};
+//# sourceMappingURL=ox-popup-list-image-2.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-popup-list-image-2.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list-image-2.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAI7F,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa,EAAE,kBAA2B;IACvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,CAAC,kBAAkB,GAAG,kBAAkB,CAAA;IAEjD,SAAS,EAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;KAChB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAmEF,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC;;;;kBAI1D,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;;iCAE9B,kBAAkB;;;;;;;;;;;;;CAalD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,kBAAkB,EAAE,IAAI;CACzB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-list.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\n\nexport default {\n  title: 'OxPopupList for Image 2',\n  component: 'ox-popup-list',\n  argTypes: {\n    preventCloseOnBlur: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  preventCloseOnBlur: boolean\n}\n\nfunction popup(e: MouseEvent, preventCloseOnBlur: boolean) {\n  const popupList = document.querySelector('#popup-list') as OxPopupList\n  popupList.preventCloseOnBlur = preventCloseOnBlur\n\n  popupList?.open({\n    top: e.offsetY,\n    left: e.offsetX\n  })\n}\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #container {\n      display: flex;\n    }\n\n    #noise {\n      width: 100px;\n      height: 100px;\n    }\n\n    #place {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n\n      width: 50%;\n      height: 50%;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n      border: 2px solid var(--md-sys-color-primary);\n    }\n  </style>\n\n  <style>\n    .line-type {\n      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAH0CAYAAABFKcHfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzY1MUM3RkUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzY1MUM4MEUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3NjUxQzdERTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU3NjUxQzdFRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+SQt6uQAAAx5JREFUeNrs20GKwkAQQFFbPFa8UN+ncyHjuaKbQBOVJB3REt/fzIQ4CI8qZlWplDIetKsjAoghSuNom00iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEqO2dpl/6vr/cf3TVuyHnfPZ++X09id0M2PPK5xpxmH3oOnv2/sV7l/f+sUCEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiREGECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiRIhqqr68f7jZzTkn75ffm0TrHCOX9yYRIkRBhAgRoiBChAhRECFChCiIECFCFESIECEKIkSIgggRIkRBhAgRoiBChAhRECFChCiIECFCVFOplLLqVre+Qp96do3+j39rEq1zkHV2eW8SIUIURIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiRLX09sv7T1y7R/sOk2idg6yzy3uTCBGiIEKECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiREGECBGiIEKECFEQIUKEKIgQIUIURIgQIaql1Zf3a9tzFf+r32ESrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfT1y/uIl/pbP28SrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfRzl/cRL/VNonUOss4u700iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGitnQTYAAk0fJFyzB3ywAAAABJRU5ErkJggg==)\n        50% 0 no-repeat;\n      min-height: 30px;\n      padding: 3px 7px;\n      width: 80px;\n      float: left;\n    }\n\n    .line-type.solid {\n      background-position: 50% 10px;\n    }\n    .line-type.round-dot {\n      background-position: 50% -40px;\n    }\n    .line-type.square-dot {\n      background-position: 50% -90px;\n    }\n    .line-type.dash {\n      background-position: 50% -140px;\n    }\n    .line-type.dash-dot {\n      background-position: 50% -190px;\n    }\n    .line-type.long-dash {\n      background-position: 50% -240px;\n    }\n    .line-type.long-dash-dot {\n      background-position: 50% -290px;\n    }\n    .line-type.long-dash-dot-dot {\n      background-position: 50% -340px;\n    }\n  </style>\n\n  <div id=\"container\">\n    <div id=\"noise\"></div>\n    <div id=\"place\" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n      Click this to popup list\n      <ox-popup-list\n        id=\"popup-list\"\n        @select=${(e: Event) => console.log('select', e.target)}\n        multiple\n        ?prevent-close-on-blur=${preventCloseOnBlur}\n      >\n        <div class=\"line-type solid\" name=\"solid\" option></div>\n        <div class=\"line-type round-dot\" name=\"round-dot\" option></div>\n        <div class=\"line-type square-dot\" name=\"square-dot\" option></div>\n        <div class=\"line-type dash\" name=\"dash\" option></div>\n        <div class=\"line-type dash-dot\" name=\"dash-dot\" option></div>\n        <div class=\"line-type long-dash\" name=\"long-dash\" option></div>\n        <div class=\"line-type long-dash-dot\" name=\"long-dash-dot\" option></div>\n        <div class=\"line-type long-dash-dot-dot\" name=\"long-dash-dot-dot\" option></div>\n      </ox-popup-list>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  preventCloseOnBlur: true\n}\n"]}

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

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

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

@@ -0,0 +1,208 @@
+import '@material/web/all.js';
+import '@operato/input/ox-checkbox.js';
+import '../src/ox-popup-list.js';
+import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
+export default {
+    title: 'OxPopupList for Image',
+    component: 'ox-popup-list',
+    argTypes: {
+        preventCloseOnBlur: { control: 'boolean' }
+    }
+};
+function popup(e, preventCloseOnBlur) {
+    const popupList = document.querySelector('#popup-list');
+    popupList.preventCloseOnBlur = preventCloseOnBlur;
+    popupList?.open({
+        top: e.offsetY,
+        left: e.offsetX
+    });
+}
+const Template = ({ preventCloseOnBlur }) => html `
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    #container {
+      display: flex;
+    }
+
+    #noise {
+      width: 100px;
+      height: 100px;
+    }
+
+    #place {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      width: 50%;
+      height: 50%;
+      text-align: center;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+      border: 2px solid var(--md-sys-color-primary);
+    }
+  </style>
+
+  <style>
+    .line-type {
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAH0CAYAAABFKcHfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzY1MUM3RkUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzY1MUM4MEUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3NjUxQzdERTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU3NjUxQzdFRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+SQt6uQAAAx5JREFUeNrs20GKwkAQQFFbPFa8UN+ncyHjuaKbQBOVJB3REt/fzIQ4CI8qZlWplDIetKsjAoghSuNom00iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEqO2dpl/6vr/cf3TVuyHnfPZ++X09id0M2PPK5xpxmH3oOnv2/sV7l/f+sUCEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiREGECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiRIhqqr68f7jZzTkn75ffm0TrHCOX9yYRIkRBhAgRoiBChAhRECFChCiIECFCFESIECEKIkSIgggRIkRBhAgRoiBChAhRECFChCiIECFCVFOplLLqVre+Qp96do3+j39rEq1zkHV2eW8SIUIURIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiRLX09sv7T1y7R/sOk2idg6yzy3uTCBGiIEKECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiREGECBGiIEKECFEQIUKEKIgQIUIURIgQIaql1Zf3a9tzFf+r32ESrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfT1y/uIl/pbP28SrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfRzl/cRL/VNonUOss4u700iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGitnQTYAAk0fJFyzB3ywAAAABJRU5ErkJggg==)
+        50% 0 no-repeat;
+      min-height: 30px;
+      padding: 3px 7px;
+      width: 30px;
+      float: left;
+    }
+
+    .arrow-type {
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAXcCAYAAABgSd3kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzY1MUM4M0UyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzY1MUM4NEUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3NjUxQzgxRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU3NjUxQzgyRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+BB9i0AAAE+dJREFUeNrs3QmQ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c6hLuG3QDJdfXR3wiWaA6OqAOyd+HzHZ7atr3LDaX/KBz2dEW9HHxEEUEaIfH7Rbe5HPl99zJcdLelL9rJVyHVXts1bkCUyXKRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQJoRklcHnbZnHGci9JoUvYNua8l0yXWSNXwfWvpvf1cy13y6hJvXc0S3pNX9Qf8g2Tx1SEtLS9qgPYzdivZsSVtqkGW2RSKtjrmghkjOd6BRvg2tStVu7BJvt/gO6ZTsKpmQ+H2ktbW1rwEnoSacaj9koeTHkkskS1K5IWbQRfSIsX2/81K//KaE0U2CD5PsWS8i7lUraUCv5HrJcMntmX3WSriej/pZK/J9jg46IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECANCMkzV1cdf2fOyT3St6v9+cUoYNuF8lkYzdxvF9yoLHdP94OrUGSbxi7JNu/jO340d6sAT7PkdWM3eBUu+Vel1wp2c73ya5b0k6SzDS2r1E754alPtkT3le3vLTRTDvndInDp9xF4m7Je75efrVx8suSayRvSR7M/fJbZy2r94zkta9ueXW6g9d2p/mpzpEUaoF71/Xgny3snb1KfWjsfrt68NpF2pPUD84CstjYJT314B8wtgHTn89axjbxN/xZK/Lljg46IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECaBfJfAQYAxqnBZanFUNgAAAAASUVORK5CYII=)
+        50% 0 no-repeat;
+      min-height: 30px;
+      padding: 3px 7px;
+      width: 30px;
+      float: left;
+    }
+    .arrow-type.begin-no {
+      background-position: 50% 16px;
+    }
+    .arrow-type.begin-arrow {
+      background-position: 50% -39px;
+    }
+    .arrow-type.begin-open-arrow {
+      background-position: 50% -89px;
+    }
+    .arrow-type.begin-stealth-arrow {
+      background-position: 50% -139px;
+    }
+    .arrow-type.begin-diamond-arrow {
+      background-position: 50% -190px;
+    }
+    .arrow-type.begin-oval-arrow {
+      background-position: 50% -238px;
+    }
+    .arrow-type.begin-size1 {
+      background-position: 50% -286px;
+    }
+    .arrow-type.begin-size2 {
+      background-position: 50% -336px;
+    }
+    .arrow-type.begin-size3 {
+      background-position: 50% -386px;
+    }
+    .arrow-type.begin-size4 {
+      background-position: 50% -436px;
+    }
+    .arrow-type.begin-size5 {
+      background-position: 50% -486px;
+    }
+    .arrow-type.begin-size6 {
+      background-position: 50% -536px;
+    }
+    .arrow-type.begin-size7 {
+      background-position: 50% -589px;
+    }
+    .arrow-type.begin-size8 {
+      background-position: 50% -639px;
+    }
+    .arrow-type.begin-size9 {
+      background-position: 50% -689px;
+    }
+    .arrow-type.end-no {
+      background-position: 50% 16px;
+    }
+    .arrow-type.end-arrow {
+      background-position: 50% -739px;
+    }
+    .arrow-type.end-open-arrow {
+      background-position: 50% -789px;
+    }
+    .arrow-type.end-stealth-arrow {
+      background-position: 50% -839px;
+    }
+    .arrow-type.end-diamond-arrow {
+      background-position: 50% -890px;
+    }
+    .arrow-type.end-oval-arrow {
+      background-position: 50% -938px;
+    }
+    .arrow-type.end-size1 {
+      background-position: 50% -986px;
+    }
+    .arrow-type.end-size2 {
+      background-position: 50% -1036px;
+    }
+    .arrow-type.end-size3 {
+      background-position: 50% -1086px;
+    }
+    .arrow-type.end-size4 {
+      background-position: 50% -1136px;
+    }
+    .arrow-type.end-size5 {
+      background-position: 50% -1186px;
+    }
+    .arrow-type.end-size6 {
+      background-position: 50% -1236px;
+    }
+    .arrow-type.end-size7 {
+      background-position: 50% -1289px;
+    }
+    .arrow-type.end-size8 {
+      background-position: 50% -1339px;
+    }
+    .arrow-type.end-size9 {
+      background-position: 50% -1389px;
+    }
+  </style>
+
+  <div id="container">
+    <div id="noise"></div>
+    <div id="place" @click=${(e) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
+      Click this to popup list
+      <ox-popup-list
+        id="popup-list"
+        @select=${(e) => console.log('select', e.target)}
+        multiple
+        ?prevent-close-on-blur=${preventCloseOnBlur}
+      >
+        <div class="arrow-type end-size1" name="size1" option></div>
+        <div class="arrow-type end-size2" name="size2" option></div>
+        <div class="arrow-type end-size3" name="size3" option></div>
+        <div class="arrow-type end-size4" name="size4" option></div>
+        <div class="arrow-type end-size5" name="size5" option></div>
+        <div class="arrow-type end-size6" name="size6" option></div>
+        <div class="arrow-type end-size7" name="size7" option></div>
+        <div class="arrow-type end-size8" name="size8" option></div>
+        <div class="arrow-type end-size9" name="size9" option></div>
+      </ox-popup-list>
+    </div>
+  </div>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    preventCloseOnBlur: true
+};
+//# sourceMappingURL=ox-popup-list-image.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-popup-list-image.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list-image.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAI7F,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa,EAAE,kBAA2B;IACvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,CAAC,kBAAkB,GAAG,kBAAkB,CAAA;IAEjD,SAAS,EAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;KAChB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA6IF,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC;;;;kBAI1D,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;;iCAE9B,kBAAkB;;;;;;;;;;;;;;CAclD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,kBAAkB,EAAE,IAAI;CACzB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-list.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\n\nexport default {\n  title: 'OxPopupList for Image',\n  component: 'ox-popup-list',\n  argTypes: {\n    preventCloseOnBlur: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  preventCloseOnBlur: boolean\n}\n\nfunction popup(e: MouseEvent, preventCloseOnBlur: boolean) {\n  const popupList = document.querySelector('#popup-list') as OxPopupList\n  popupList.preventCloseOnBlur = preventCloseOnBlur\n\n  popupList?.open({\n    top: e.offsetY,\n    left: e.offsetX\n  })\n}\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #container {\n      display: flex;\n    }\n\n    #noise {\n      width: 100px;\n      height: 100px;\n    }\n\n    #place {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n\n      width: 50%;\n      height: 50%;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n      border: 2px solid var(--md-sys-color-primary);\n    }\n  </style>\n\n  <style>\n    .line-type {\n      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAH0CAYAAABFKcHfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzY1MUM3RkUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzY1MUM4MEUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3NjUxQzdERTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU3NjUxQzdFRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+SQt6uQAAAx5JREFUeNrs20GKwkAQQFFbPFa8UN+ncyHjuaKbQBOVJB3REt/fzIQ4CI8qZlWplDIetKsjAoghSuNom00iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEqO2dpl/6vr/cf3TVuyHnfPZ++X09id0M2PPK5xpxmH3oOnv2/sV7l/f+sUCEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiREGECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiRIhqqr68f7jZzTkn75ffm0TrHCOX9yYRIkRBhAgRoiBChAhRECFChCiIECFCFESIECEKIkSIgggRIkRBhAgRoiBChAhRECFChCiIECFCVFOplLLqVre+Qp96do3+j39rEq1zkHV2eW8SIUIURIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiRLX09sv7T1y7R/sOk2idg6yzy3uTCBGiIEKECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiREGECBGiIEKECFEQIUKEKIgQIUIURIgQIaql1Zf3a9tzFf+r32ESrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfT1y/uIl/pbP28SrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfRzl/cRL/VNonUOss4u700iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGitnQTYAAk0fJFyzB3ywAAAABJRU5ErkJggg==)\n        50% 0 no-repeat;\n      min-height: 30px;\n      padding: 3px 7px;\n      width: 30px;\n      float: left;\n    }\n\n    .arrow-type {\n      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAXcCAYAAABgSd3kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzY1MUM4M0UyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzY1MUM4NEUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3NjUxQzgxRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU3NjUxQzgyRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+BB9i0AAAE+dJREFUeNrs3QmQ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c6hLuG3QDJdfXR3wiWaA6OqAOyd+HzHZ7atr3LDaX/KBz2dEW9HHxEEUEaIfH7Rbe5HPl99zJcdLelL9rJVyHVXts1bkCUyXKRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQJoRklcHnbZnHGci9JoUvYNua8l0yXWSNXwfWvpvf1cy13y6hJvXc0S3pNX9Qf8g2Tx1SEtLS9qgPYzdivZsSVtqkGW2RSKtjrmghkjOd6BRvg2tStVu7BJvt/gO6ZTsKpmQ+H2ktbW1rwEnoSacaj9koeTHkkskS1K5IWbQRfSIsX2/81K//KaE0U2CD5PsWS8i7lUraUCv5HrJcMntmX3WSriej/pZK/J9jg46IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECANCMkzV1cdf2fOyT3St6v9+cUoYNuF8lkYzdxvF9yoLHdP94OrUGSbxi7JNu/jO340d6sAT7PkdWM3eBUu+Vel1wp2c73ya5b0k6SzDS2r1E754alPtkT3le3vLTRTDvndInDp9xF4m7Je75efrVx8suSayRvSR7M/fJbZy2r94zkta9ueXW6g9d2p/mpzpEUaoF71/Xgny3snb1KfWjsfrt68NpF2pPUD84CstjYJT314B8wtgHTn89axjbxN/xZK/Lljg46IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECaBfJfAQYAxqnBZanFUNgAAAAASUVORK5CYII=)\n        50% 0 no-repeat;\n      min-height: 30px;\n      padding: 3px 7px;\n      width: 30px;\n      float: left;\n    }\n    .arrow-type.begin-no {\n      background-position: 50% 16px;\n    }\n    .arrow-type.begin-arrow {\n      background-position: 50% -39px;\n    }\n    .arrow-type.begin-open-arrow {\n      background-position: 50% -89px;\n    }\n    .arrow-type.begin-stealth-arrow {\n      background-position: 50% -139px;\n    }\n    .arrow-type.begin-diamond-arrow {\n      background-position: 50% -190px;\n    }\n    .arrow-type.begin-oval-arrow {\n      background-position: 50% -238px;\n    }\n    .arrow-type.begin-size1 {\n      background-position: 50% -286px;\n    }\n    .arrow-type.begin-size2 {\n      background-position: 50% -336px;\n    }\n    .arrow-type.begin-size3 {\n      background-position: 50% -386px;\n    }\n    .arrow-type.begin-size4 {\n      background-position: 50% -436px;\n    }\n    .arrow-type.begin-size5 {\n      background-position: 50% -486px;\n    }\n    .arrow-type.begin-size6 {\n      background-position: 50% -536px;\n    }\n    .arrow-type.begin-size7 {\n      background-position: 50% -589px;\n    }\n    .arrow-type.begin-size8 {\n      background-position: 50% -639px;\n    }\n    .arrow-type.begin-size9 {\n      background-position: 50% -689px;\n    }\n    .arrow-type.end-no {\n      background-position: 50% 16px;\n    }\n    .arrow-type.end-arrow {\n      background-position: 50% -739px;\n    }\n    .arrow-type.end-open-arrow {\n      background-position: 50% -789px;\n    }\n    .arrow-type.end-stealth-arrow {\n      background-position: 50% -839px;\n    }\n    .arrow-type.end-diamond-arrow {\n      background-position: 50% -890px;\n    }\n    .arrow-type.end-oval-arrow {\n      background-position: 50% -938px;\n    }\n    .arrow-type.end-size1 {\n      background-position: 50% -986px;\n    }\n    .arrow-type.end-size2 {\n      background-position: 50% -1036px;\n    }\n    .arrow-type.end-size3 {\n      background-position: 50% -1086px;\n    }\n    .arrow-type.end-size4 {\n      background-position: 50% -1136px;\n    }\n    .arrow-type.end-size5 {\n      background-position: 50% -1186px;\n    }\n    .arrow-type.end-size6 {\n      background-position: 50% -1236px;\n    }\n    .arrow-type.end-size7 {\n      background-position: 50% -1289px;\n    }\n    .arrow-type.end-size8 {\n      background-position: 50% -1339px;\n    }\n    .arrow-type.end-size9 {\n      background-position: 50% -1389px;\n    }\n  </style>\n\n  <div id=\"container\">\n    <div id=\"noise\"></div>\n    <div id=\"place\" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n      Click this to popup list\n      <ox-popup-list\n        id=\"popup-list\"\n        @select=${(e: Event) => console.log('select', e.target)}\n        multiple\n        ?prevent-close-on-blur=${preventCloseOnBlur}\n      >\n        <div class=\"arrow-type end-size1\" name=\"size1\" option></div>\n        <div class=\"arrow-type end-size2\" name=\"size2\" option></div>\n        <div class=\"arrow-type end-size3\" name=\"size3\" option></div>\n        <div class=\"arrow-type end-size4\" name=\"size4\" option></div>\n        <div class=\"arrow-type end-size5\" name=\"size5\" option></div>\n        <div class=\"arrow-type end-size6\" name=\"size6\" option></div>\n        <div class=\"arrow-type end-size7\" name=\"size7\" option></div>\n        <div class=\"arrow-type end-size8\" name=\"size8\" option></div>\n        <div class=\"arrow-type end-size9\" name=\"size9\" option></div>\n      </ox-popup-list>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  preventCloseOnBlur: true\n}\n"]}

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

@@ -3,7 +3,7 @@ import '@material/web/button/outlined-button.js';
 import '@operato/input/ox-checkbox.js';
 import '../src/ox-popup-list.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 export default {
     title: 'sortable OxPopupList',
     component: 'ox-popup-list',

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

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

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

@@ -2,7 +2,7 @@ import '@material/web/all.js';
 import '@operato/input/ox-checkbox.js';
 import '../src/ox-popup-list.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 export default {
     title: 'OxPopupList',
     component: 'ox-popup-list',

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,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa,EAAE,kBAA2B;IACvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,CAAC,kBAAkB,GAAG,kBAAkB,CAAA;IAEjD,SAAS,EAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;KAChB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA+BF,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC;;;;kBAI1D,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;;iCAE9B,kBAAkB;;;;;;;;;;;;;;;;;;;;CAoBlD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,kBAAkB,EAAE,IAAI;CACzB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-list.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\n\nexport default {\n  title: 'OxPopupList',\n  component: 'ox-popup-list',\n  argTypes: {\n    preventCloseOnBlur: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  preventCloseOnBlur: boolean\n}\n\nfunction popup(e: MouseEvent, preventCloseOnBlur: boolean) {\n  const popupList = document.querySelector('#popup-list') as OxPopupList\n  popupList.preventCloseOnBlur = preventCloseOnBlur\n\n  popupList?.open({\n    top: e.offsetY,\n    left: e.offsetX\n  })\n}\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #container {\n      display: flex;\n    }\n\n    #noise {\n      width: 100px;\n      height: 100px;\n    }\n\n    #place {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n\n      width: 50%;\n      height: 50%;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n      border: 2px solid var(--md-sys-color-primary);\n    }\n  </style>\n\n  <div id=\"container\">\n    <div id=\"noise\"></div>\n    <div id=\"place\" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n      Click this to popup list\n      <ox-popup-list\n        id=\"popup-list\"\n        @select=${(e: Event) => console.log('select', e.target)}\n        multiple\n        ?prevent-close-on-blur=${preventCloseOnBlur}\n      >\n        <div option>Plain Text</div>\n\n        <div option>\n          <ox-checkbox label=\"checkbox\" slot=\"icon\" checked>checkbox</ox-checkbox>\n        </div>\n\n        <div option>\n          <input id=\"checkbox-01\" type=\"checkbox\" />\n          <label for=\"checkbox-01\">custom option</label>\n        </div>\n\n        <div option>\n          <label for=\"text-01\">value</label>\n          <input id=\"text-01\" type=\"text\" value=\"Plain text input\" />\n        </div>\n      </ox-popup-list>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  preventCloseOnBlur: true\n}\n"]}
+{"version":3,"file":"ox-popup-list.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAI7F,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa,EAAE,kBAA2B;IACvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,CAAC,kBAAkB,GAAG,kBAAkB,CAAA;IAEjD,SAAS,EAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;KAChB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA+BF,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC;;;;kBAI1D,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;;iCAE9B,kBAAkB;;;;;;;;;;;;;;;;;;;;CAoBlD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,kBAAkB,EAAE,IAAI;CACzB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-list.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\n\nexport default {\n  title: 'OxPopupList',\n  component: 'ox-popup-list',\n  argTypes: {\n    preventCloseOnBlur: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  preventCloseOnBlur: boolean\n}\n\nfunction popup(e: MouseEvent, preventCloseOnBlur: boolean) {\n  const popupList = document.querySelector('#popup-list') as OxPopupList\n  popupList.preventCloseOnBlur = preventCloseOnBlur\n\n  popupList?.open({\n    top: e.offsetY,\n    left: e.offsetX\n  })\n}\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #container {\n      display: flex;\n    }\n\n    #noise {\n      width: 100px;\n      height: 100px;\n    }\n\n    #place {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n\n      width: 50%;\n      height: 50%;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n      border: 2px solid var(--md-sys-color-primary);\n    }\n  </style>\n\n  <div id=\"container\">\n    <div id=\"noise\"></div>\n    <div id=\"place\" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n      Click this to popup list\n      <ox-popup-list\n        id=\"popup-list\"\n        @select=${(e: Event) => console.log('select', e.target)}\n        multiple\n        ?prevent-close-on-blur=${preventCloseOnBlur}\n      >\n        <div option>Plain Text</div>\n\n        <div option>\n          <ox-checkbox label=\"checkbox\" slot=\"icon\" checked>checkbox</ox-checkbox>\n        </div>\n\n        <div option>\n          <input id=\"checkbox-01\" type=\"checkbox\" />\n          <label for=\"checkbox-01\">custom option</label>\n        </div>\n\n        <div option>\n          <label for=\"text-01\">value</label>\n          <input id=\"text-01\" type=\"text\" value=\"Plain text input\" />\n        </div>\n      </ox-popup-list>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  preventCloseOnBlur: true\n}\n"]}

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

@@ -3,7 +3,7 @@ import '@operato/input/ox-checkbox.js';
 import '../src/ox-popup-menu.js';
 import '../src/ox-popup-menuitem.js';
 import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 import { OxPopupMenu } from '../src/ox-popup-menu.js';
 export default {
     title: 'OxPopuMenu',

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

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

@@ -1,7 +1,7 @@
 import '@material/web/all.js';
 import { html } from 'lit';
-import { OxPopup } from '../src/ox-popup';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+import { OxPopup } from '../src/ox-popup.js';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 export default {
     title: 'Simple Popup',
     component: 'ox-popup',

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,cAAc;IACrB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,OAAO,CAAC,IAAI,CAAC;QACX,QAAQ,EAAE,IAAI,CAAA,YAAY,OAAO,KAAK;QACtC,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;QACf,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,CAAC,CAAC,MAAqB;KAChC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBlD,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;2BAmBJ,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;;;CAGrD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/all.js'\nimport { html, TemplateResult } from 'lit'\n\nimport { OxPopup } from '../src/ox-popup'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'Simple Popup',\n  component: 'ox-popup',\n  argTypes: {}\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nfunction popup(e: MouseEvent) {\n  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n  OxPopup.open({\n    template: html`<img src=${noImage} />`,\n    top: e.offsetY,\n    left: e.offsetX,\n    backdrop: true,\n    parent: e.target as HTMLElement\n  })\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #place {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n\n      width: 50%;\n      height: 50%;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div id=\"place\" @click=${(e: MouseEvent) => popup(e)} class=\"md-typescale-display-medium\">\n    Click this to popup image\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}
+{"version":3,"file":"ox-popup.stories.js","sourceRoot":"","sources":["../../stories/ox-popup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAC5C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,SAAS,KAAK,CAAC,CAAa;IAC1B,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,6BAA6B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;IAE5E,OAAO,CAAC,IAAI,CAAC;QACX,QAAQ,EAAE,IAAI,CAAA,YAAY,OAAO,KAAK;QACtC,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;QACf,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,CAAC,CAAC,MAAqB;KAChC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBlD,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;2BAmBJ,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;;;CAGrD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import '@material/web/all.js'\nimport { html, TemplateResult } from 'lit'\n\nimport { OxPopup } from '../src/ox-popup.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'Simple Popup',\n  component: 'ox-popup',\n  argTypes: {}\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nfunction popup(e: MouseEvent) {\n  const noImage = new URL('/assets/images/no-image.png', import.meta.url).href\n\n  OxPopup.open({\n    template: html`<img src=${noImage} />`,\n    top: e.offsetY,\n    left: e.offsetX,\n    backdrop: true,\n    parent: e.target as HTMLElement\n  })\n}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    #place {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n\n      width: 50%;\n      height: 50%;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div id=\"place\" @click=${(e: MouseEvent) => popup(e)} class=\"md-typescale-display-medium\">\n    Click this to popup image\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}