@operato/popup 9.0.0-beta.52 → 9.0.0

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

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

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

@@ -1,133 +0,0 @@
-import '@material/web/all.js';
-import '@operato/input/ox-checkbox.js';
-import '../src/ox-popup-list.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'OxPopupList 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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1,208 +0,0 @@
-import '@material/web/all.js';
-import '@operato/input/ox-checkbox.js';
-import '../src/ox-popup-list.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'OxPopupList 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

@@ -1 +0,0 @@
-{"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+dJREFUeNrs3QmQHFUdx/G3m7BJCMhRxX2V4XAjVxQElEjCVQQUhCgkXEIMCAyXAVSKW46SGxFcw60QbiVoAVEElBgQIWgCwSwEglyRowo5XHJsduP/v+91aMeZ2e6Zvt7k+6/61Wx2Jpv+TL/XPdT+ea9l2bJlJkp1dHREe2HCVSqVWqK8rtU0STUNpCXq0OKMAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECJJ8aGPWFHR0dcX6udr2tViqVPvD1jOgbs75kvOSuQp6Rfuozki0ku0kOk2xd2KFVpTaSbCvZT7KXZOPCz5Gy2lLyFck4yU6Sod5MdvfubyP5qnv3R0S4QDTcMBm1XTYO5EuSs6MAin4feUZyluRSyWxv7yNSb7g8KLnNzZGDas2RqMMiz8k+x2Wa71et8rM0XXK9ZHfJoT7eR4L6SDLTzR0ddqMkR/gICapbssB9PJmWJYTeeCBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgDQlhA66Gm8MHXR5Qmp10M3xAVKrg+5lyXmSO7OEtMRYcDJ2B10SRQddjQo66C6RzPL2PmIqd9DVnCMyLHqLfh95QXKDZIK7Z+jXr7vnNpNMMRn3PSbdQRe+j2zl4w0x6KCb5c6G9x10Sw0ddHyMBwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIESHJFB12NNybooDu9kGeknyrvoFtVsoNPkEoddJ9IdpZh9Z4PkGoddNp9MFEQmbdB0UHn831kheqg03F6iAyHu4p8RsJVrYNOx/NNMp9G+AIJn6UHJKdJvin5oeQVyVTBrOXjZ62gg+5KyRjJGZJTfbyzB0UHHR/jgQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABkmQl0UE3TDK/0hOlUsmbM9Iuuc5kvLxO0hA9mydJRkseyxtTL2Q7Y1s3jnOgtfLG1ANpM7Y9Y6+y7+eKiQvRFsDJkn2rPJ8bJk4roPZnaQfdmCwPMGorYJwz0p01Iq2hpa2Ad3t/Q3Sl3XKLJd+u8ZpHJIdL3i76DVGXZLu1ynO6IuBlivDlPlKO6ZFMlewhedi3O3sYM09yseQ1X+ZIJYyWdpnOzHOy0woIBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAiQcNXTQTdSMtbY1c2GS+Ya20hzn2RG8KIsmwViQVzpsmxnGts5F9S2LntLLpJMyRoRd2iNrIAIV7t7fmTR58jYGogwZmwekDj9WrPcEMqsovZqxT0jw5vl8ju3KS6/7hIbZWhdJUPilCKfEb1PdPbzmk73ukIPrRnuPtFZA3FR+KZY5I8ourHp0Tp8jN1udol7vMp9f0rZp4DiXX750AgECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQOqvRtegC7bafCD8zZaWluUZMGBAXwYOHGja2trMoEGD+h5XXnnlvq/1cfDgwcujz2mCv7fSSislCymr8q02Vwk/Gf7dfU9PT9+fNb29vX0J/zmMb21tXf51UGlAam21+X9dB8HBBpju7u6+r7u6umK9Y2y1WaOCrTYvNbb/xM/JbipvtXlQpTlSrYKxr486+XUy64QfMmSIGTp06PLoBUCj308DEq45LtNMjD7H8ouAls6d4AoVXN10guv39euoRXcQECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgRI7pXELq5a2i2zs7GNaAdK1o17IEHDTXlLSdRl4BrdWWx7d/CajRr5QY32xNQD0TbA8e7gN692XAmOmsQ76M50gK18n+y65NTWDnKhsTvueX3VesHY3sYtjO1zvNzYzrry4ZBUMrn86taB35dsYmz36bWSd/I4I3TQAQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECA5F5JddBVq8HGdhN9QfJFfSyVSjvlColQa7oDHhFKe8L/RuKQz5YdsGbjiGc2VhdPGmvQXRU66NW9nSNSk5I4I0UbWq+6TI07R+JsMZvXZH9f8qhL1atWWmeEDjogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECJDcq9EOulUlF0i+l+RBhTeAPPbYY1M/I7poXqfk5KTf3Uq7vCZ2RkK1qeQayd5eDi2pNskPJGdIyjfzTLPFKPFWQN25tb0Zrlq6yamuPbfQd8gSY1cD1JUBp1U4/WkltavWK5J9jN1Td0Ez3BDvdXPm6iJA6GkEAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAVkBIkmvQDTK2Ge1EyY5JHWBWu7hqbSjRfr2jJOsU/oxUqFGSEyT7m4wWzEsSMlRymJ5xyTY1Xlfo7WivkHzHFHAhvbhXrVND8+E53y+/XZLrjG0LHC35lWRpleHgzXa0j7vLrS51qJsHv+PTGalUb0rOMnZv3cMlT+cBoYMOCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAWQEhae/iqqX9JJ+X7C4ZXSqVxuYKiVmfk+zqMlqydmHOSD81zB3wbu7g1y/s0CqrDd0BBwe+SYwhmvt2tAe7d10PfHNvJ7vUnS4NnZGiDS3t0brNJdYcKfp2tPNdbvb9qlVeL7pMLr+PpAWhgw4IECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgABZASFJdNBNlNyU1gFGXYOu0TNyjuRGr85IWQ2Q/NTYJdyMr5DBktslY72cI650/bn7jV0R0PgK2UDykKm8GqBX++o+YQrQ8pfEVWtnU8DVAOuBvOXmxuNVTr9X++p+IBkjua8ZPqIsMnZz4A7fIVo9kuMl5/p8QwzX+W7u5F50mQIBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAqQpIUmvQadtHj83tbfhjFVZddAFtYaxGz5Ol2xd6DNSow41dj/RdbwYWhVKl2/T8baHr5O9TXK2ZHbaiJaWltTOiLY56eJf7f28LpF2CteVkXgH3S2SI0yMHqqiDq0Jxq4p19kMN0TtntM9dbVxeWGt4d1otFpbW1PdV3eJ5AIHeiTNdzlO51IjN8R5kj2N3VT7nTwRSd3ZtSt7uOR6Sa+PZyRc/5YcI9lF8nwek50OOiBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgDQlJItdXLXWlBwoOaRUKo3KFVJHDZF83djGNF1vaFAhzkjE0rXpdnUHf4BktcINrX5qO3fw40wOW9E2ChnmDv4Q038jWuEga7l3XQ9+J1NHE1oR9tV90NhuoJV8v498zdiVAU+U/MWkuxJg6kPrPcm1LnXNkbT21W3kzq776GonnfZqbS+5SrLA948oz0pOkWzs5tEvJB/6/FlL16bTPkftSF3P2EX3fiNZ7POHRu1CvVeyv7tJHmvs/wSQStFBBwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIkKaEDMzyH+vo6NAdLvX375F/A5v1GnRR6y7JeGN/XT3Q2zMitZeLrmYzRfKY5CXJR75BgtKVAy+RvC75veS3xi4F94avk117V452Q+4W9/WWqZ6RuJ1vMWuoZHeXWe4s/dnYPUrfKPLQqlUjXHQuXeAzZLY7I9NNjF1jI0OS6HyrMTy7JE9J7pE8KZnjy1UrqMSuWnlB9D6iS7496ut9RN/9Xxq7TKI2enb7emcfH/ezVtSigw4IECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBNCaGDrs6ig65oEG2W2co0QQedbgap+ye+7P5MB13eQytKNU0HXfkZSXZoJdRBp3PyYMl5ks1CTwUddHcb20H3QtGvWrPdVSsobzvoAoT395FwB927kqW+3tnpoOO/R4AAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAARKn6KCrs043TdJBd4XkacnHJuHOh0zPiAwTXS9It6nd1NgOul9LLjd2/92NvJrsgtE2poluntBBl/cciVJ00EUd24ntvirDVC/Bd5hPNxj2roNOETpsbnIIPzvoBKFbPk+VvGI876A7VXKGaYIOuosNHXT89wgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECiV9a/Z6/21DDJ/EpPFLWDrlLpMjzXSdp9HlqK0O6H0ZKTGhkhrQVArOUAx0kekGxX+DlSBREu7dF6X3KkZEnRz0g1RFD7SiabmC2BRWkFDNcqkgmS9YztoHvS9/vIGBNjB8siQ7Sb7pnEh1ZCi+npw7qS2yR71HjprZIjij7Z35ZcZj5dPbNhRJ5D62F3RrQtsKdRRN5z5DVjO+rmNYoowmSfaWwbeUMILVoBgQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABEq48ltwJ/3GkZKxkN8lwyVxjG27uk8zQFxS2gy50YLrl5g2SScZuwdnmHie57x/mw9DSM3Gmqd7+1+6eH1l0yFjTfw9ju3td8nMkw56toHZrlqvW8GaBzE1laCW1fJsM0Svd1am/eqzoZ0TvE539vKbTva7QEL3ZXVQD0+men+HDnV3XoPtnf3f2qEWbExAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAyaAi/569u7vb9PT09GXJkiV9WbRo0fJ88sknZvHixX2P+px+rY9Lly5d/vf0V+FBykq32qy4aV3UDrrIkOBgFBRA9GADxMKFC/sSAPUx+Du9vb21EFq61WY22wjefPPNaXcWsNVmUSGz3RmZbtLYanPcuHEtOgd0Pmi6urqWR7+v80Xng07uYB7E6HP5j5sj97g5MifVq1aQYJIHkzp8RasxoWvVeNPgVpt0BwEBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgORecfZD/J8/t7TY9ZDqbAHR/d7uNbbR7An9MdVemPoadHU2zwS1juQEY5vLdKs03cRu+6yG1rIEE66NJKcZu/fhS8Y2m23p+xzZXHKWsf1azxu7oF6ycySjmufmjTZrvpDKZNf5neABh4fXG+7gNTNTv2olXO9EvWpFfpfpoAMCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAMm7UutF6ejo0GWm/i75m3vU1qVFcX9O4mvQ1VE7ugS11Nhd9WaFosD3Mz0jCewXqv/WVi7hrWZfL8NpXi3M0IpRG7vsF/reByHUJF8g2Z6RuPuFVhiKxZgjddRfk7hqRS066IAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQHKvyL0okydPrmfDxqj1E8nZko/Ln0h8DbrwTqwp1MnGdg4d2AxDa31jt9p8SLJpmpBlKSZcexu7/pyuRdfm+2QfYuzqgLN9hyx0k3/bxK9aJtnF9CoN26CmSU6UvOLrZF8gOUiyT1xEkSBXS9qNXSmwrqKnEQgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAFkBIXXv4tpg6UpP1xjb6bC41gtT38W1wdpBcpuxO7heKNnQ96Gl29LqBqevurMzKgtIWh1zwRD/luRPxjabHSMZ6vtk30YyWfKm5IrEJ3uG9ZxeWyRTJF1pQNLajlZLF9q7X3Kt5PFUL78plW5Le2NoKKV/H0m4no56H4k8XOigAwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQFY8SJq7uN5nbNvSo5J/mMrtTf1WEXZxPcBF612H+qPLi96ckbJa29glpw5yf17gQI854PzMIAlsRxsuXTjvUBet10IwfXyzqGekv9pEcqSL1jwH0rN1p0+Q7M5IAtvRhiu/OdJgeX3VmprEfSRq0UEHBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECArICQvNagK6+JkpsqPVH0NejKS1d0OqdZhtaPJD+TDGiGOaLjSLekHdwMk32s5HeS1dOCZLWvrpYuc6hLuG3QDJdfXR3wiWaA6OqAOyd+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.d.ts

@@ -1,24 +0,0 @@
-import '@material/web/icon/icon.js';
-import '@material/web/button/outlined-button.js';
-import '@operato/input/ox-checkbox.js';
-import '../src/ox-popup-list.js';
-import { 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>;