@operato/input 9.0.0-beta.55 → 9.0.0-beta.61

package/dist/stories/ox-input-work-shift.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-work-shift.stories.js","sourceRoot":"","sources":["../../stories/ox-input-work-shift.stories.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AACtC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,qBAAqB;IAChC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqB7F,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;gBAmBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE;QACL;YACE,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,CAAC,CAAC;YACZ,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;QACD;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;QACD;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,OAAO;SAChB;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-input-work-shift.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-input-work-shift',\n  component: 'ox-input-work-shift',\n  argTypes: {\n    value: { control: 'object' },\n    name: { control: 'text' },\n    disabled: { 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  name?: string\n  value?: object\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'work-shift', value = [], disabled }: 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      height: 500px;\n      text-align: center;\n      padding: 20px;\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 class=\"container md-typescale-body-large-prominent\">\n    <locale-picker></locale-picker>\n    <br /><br />\n\n    <ox-input-work-shift\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-input-work-shift>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'work-shift',\n  value: [\n    {\n      name: 'DAY',\n      fromDate: -1,\n      fromTime: '22:00',\n      toDate: 0,\n      toTime: '06:00'\n    },\n    {\n      name: 'SWING',\n      fromDate: 0,\n      fromTime: '06:00',\n      toDate: 0,\n      toTime: '14:00'\n    },\n    {\n      name: 'NIGHT',\n      fromDate: 0,\n      fromTime: '14:00',\n      toDate: 0,\n      toTime: '22:00'\n    }\n  ]\n}\n"]}

package/dist/stories/ox-select-floor.stories.d.ts

@@ -1,45 +0,0 @@
-import '../src/ox-select-floor.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        disabled: {
-            control: string;
-        };
-        value: {
-            control: string;
-        };
-        bottomLimit: {
-            control: string;
-        };
-        perspective: {
-            control: string;
-        };
-        rotateX: {
-            control: string;
-        };
-        rotateXForActive: {
-            control: string;
-        };
-        interval: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    value?: string;
-    bottomLimit?: number;
-    perspective?: number;
-    rotateX?: number;
-    rotateXForActive?: number;
-    disabled?: boolean;
-    interval?: number;
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-select-floor.stories.js

@@ -1,166 +0,0 @@
-import '../src/ox-select-floor.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-import { IMAGE } from './image-for-select-floor.js';
-export default {
-    title: 'ox-select-floor',
-    component: 'ox-select-floor',
-    argTypes: {
-        disabled: { control: 'boolean' },
-        value: { control: 'text' },
-        bottomLimit: { control: 'number' },
-        perspective: { control: 'number' },
-        rotateX: { control: 'number' },
-        rotateXForActive: { control: 'number' },
-        interval: { control: 'number' }
-    }
-};
-const cards = new Array(10).fill({}).map((_, index) => {
-    return {
-        image: IMAGE,
-        name: index + 1 + '층'
-    };
-});
-const Template = ({ value, disabled, bottomLimit = 70, perspective = 1200, rotateX = 60, rotateXForActive = 40, interval = 0 }) => 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>
-    html,
-    body {
-      margin: 0;
-      padding: 0;
-      overflow: hidden;
-
-      overscroll-behavior-y: none;
-
-      /* This is a font-stack that tries to use the system-default sans-serifs first */
-      font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-      line-height: 1.5;
-      -webkit-font-smoothing: antialiased;
-
-      accent-color: var(--md-sys-color-primary);
-      background-color: var(--md-sys-color-background);
-    }
-
-    .container {
-      height: 1000px;
-      text-align: center;
-      padding: 20px;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-
-    div[status] {
-      display: flex;
-      position: absolute;
-      right: 0px;
-      bottom: 0px;
-      align-items: center;
-      right: 3%;
-    }
-
-    div[status] > div[content] {
-      display: flex;
-      background-color: #4e5055;
-      color: #fff;
-      padding: 5px 7px;
-      border-radius: 7px;
-      gap: 10px;
-      font-size: 14px;
-    }
-
-    div[status] span {
-      display: flex;
-      align-items: center;
-      width: 48px;
-    }
-
-    div[status] md-icon {
-      width: 20px;
-      height: 20px;
-      margin-right: 4px;
-      border-radius: 5px;
-      font-size: 21px;
-      font-weight: 700;
-    }
-    div[status] md-icon[request] {
-      background-color: #f7f7f7;
-      color: #4e5055;
-    }
-    div[status] md-icon[pass] {
-      background-color: #4bbb4a;
-    }
-    div[status] md-icon[fail] {
-      background-color: #ff4444;
-    }
-
-    span[name] {
-      width: 40px;
-      color: #4e5055;
-      margin-left: 6px;
-      text-align: center;
-    }
-
-    span[name][active] {
-      color: var(--md-sys-color-on-error);
-      background-color: var(--md-sys-color-error);
-      border-radius: 999px;
-    }
-
-    ox-select-floor {
-      --ox-select-floor-rotate-x: ${rotateX}deg;
-      --ox-select-floor-rotate-x-active: ${rotateXForActive}deg;
-      --ox-select-floor-perspective: ${perspective}px;
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-select-floor
-      .cards=${cards}
-      .bottomLimit=${bottomLimit}
-      ?disabled=${disabled}
-      .interval=${interval}
-      @change=${(e) => console.log(e.target.value)}
-    >
-      ${cards.map(({ image, name }, index) => html `<div slot="template-${index}" status>
-            <div content>
-              <span><md-icon request slot="icon">exclamation</md-icon>100</span>
-              <span><md-icon pass slot="icon">check</md-icon>50</span>
-              <span><md-icon fail slot="icon">close</md-icon>5</span>
-            </div>
-            <span name>${name}</span>
-          </div>`)}
-    </ox-select-floor>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    bottomLimit: 70,
-    perspective: 1200,
-    rotateX: 60,
-    rotateXForActive: 40,
-    interval: 0
-};
-//# sourceMappingURL=ox-select-floor.stories.js.map

package/dist/stories/ox-select-floor.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-select-floor.stories.js","sourceRoot":"","sources":["../../stories/ox-select-floor.stories.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAC7F,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAA;AAEnD,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAClC,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAClC,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,gBAAgB,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACvC,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAChC;CACF,CAAA;AAkBD,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;IACpD,OAAO;QACL,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,KAAK,GAAG,CAAC,GAAG,GAAG;KACtB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,WAAW,GAAG,EAAE,EAChB,WAAW,GAAG,IAAI,EAClB,OAAO,GAAG,EAAE,EACZ,gBAAgB,GAAG,EAAE,EACrB,QAAQ,GAAG,CAAC,EACH,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAwFK,OAAO;2CACA,gBAAgB;uCACpB,WAAW;;;;;;eAMnC,KAAK;qBACC,WAAW;kBACd,QAAQ;kBACR,QAAQ;gBACV,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAG,CAAiB,CAAC,MAAe,CAAC,KAAK,CAAC;;QAE5E,KAAK,CAAC,GAAG,CACT,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,CACzB,IAAI,CAAA,uBAAuB,KAAK;;;;;;yBAMjB,IAAI;iBACZ,CACV;;;CAGN,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,EAAE;IACf,WAAW,EAAE,IAAI;IACjB,OAAO,EAAE,EAAE;IACX,gBAAgB,EAAE,EAAE;IACpB,QAAQ,EAAE,CAAC;CACZ,CAAA","sourcesContent":["import '../src/ox-select-floor.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\nimport { IMAGE } from './image-for-select-floor.js'\n\nexport default {\n  title: 'ox-select-floor',\n  component: 'ox-select-floor',\n  argTypes: {\n    disabled: { control: 'boolean' },\n    value: { control: 'text' },\n    bottomLimit: { control: 'number' },\n    perspective: { control: 'number' },\n    rotateX: { control: 'number' },\n    rotateXForActive: { control: 'number' },\n    interval: { control: 'number' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  value?: string\n  bottomLimit?: number\n  perspective?: number\n  rotateX?: number\n  rotateXForActive?: number\n  disabled?: boolean\n  interval?: number\n}\n\nconst cards = new Array(10).fill({}).map((_, index) => {\n  return {\n    image: IMAGE,\n    name: index + 1 + '층'\n  }\n})\n\nconst Template: Story<ArgTypes> = ({\n  value,\n  disabled,\n  bottomLimit = 70,\n  perspective = 1200,\n  rotateX = 60,\n  rotateXForActive = 40,\n  interval = 0\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    html,\n    body {\n      margin: 0;\n      padding: 0;\n      overflow: hidden;\n\n      overscroll-behavior-y: none;\n\n      /* This is a font-stack that tries to use the system-default sans-serifs first */\n      font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n      line-height: 1.5;\n      -webkit-font-smoothing: antialiased;\n\n      accent-color: var(--md-sys-color-primary);\n      background-color: var(--md-sys-color-background);\n    }\n\n    .container {\n      height: 1000px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    div[status] {\n      display: flex;\n      position: absolute;\n      right: 0px;\n      bottom: 0px;\n      align-items: center;\n      right: 3%;\n    }\n\n    div[status] > div[content] {\n      display: flex;\n      background-color: #4e5055;\n      color: #fff;\n      padding: 5px 7px;\n      border-radius: 7px;\n      gap: 10px;\n      font-size: 14px;\n    }\n\n    div[status] span {\n      display: flex;\n      align-items: center;\n      width: 48px;\n    }\n\n    div[status] md-icon {\n      width: 20px;\n      height: 20px;\n      margin-right: 4px;\n      border-radius: 5px;\n      font-size: 21px;\n      font-weight: 700;\n    }\n    div[status] md-icon[request] {\n      background-color: #f7f7f7;\n      color: #4e5055;\n    }\n    div[status] md-icon[pass] {\n      background-color: #4bbb4a;\n    }\n    div[status] md-icon[fail] {\n      background-color: #ff4444;\n    }\n\n    span[name] {\n      width: 40px;\n      color: #4e5055;\n      margin-left: 6px;\n      text-align: center;\n    }\n\n    span[name][active] {\n      color: var(--md-sys-color-on-error);\n      background-color: var(--md-sys-color-error);\n      border-radius: 999px;\n    }\n\n    ox-select-floor {\n      --ox-select-floor-rotate-x: ${rotateX}deg;\n      --ox-select-floor-rotate-x-active: ${rotateXForActive}deg;\n      --ox-select-floor-perspective: ${perspective}px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-select-floor\n      .cards=${cards}\n      .bottomLimit=${bottomLimit}\n      ?disabled=${disabled}\n      .interval=${interval}\n      @change=${(e: Event) => console.log(((e as CustomEvent).target as any)!.value)}\n    >\n      ${cards.map(\n        ({ image, name }, index) =>\n          html`<div slot=\"template-${index}\" status>\n            <div content>\n              <span><md-icon request slot=\"icon\">exclamation</md-icon>100</span>\n              <span><md-icon pass slot=\"icon\">check</md-icon>50</span>\n              <span><md-icon fail slot=\"icon\">close</md-icon>5</span>\n            </div>\n            <span name>${name}</span>\n          </div>`\n      )}\n    </ox-select-floor>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  bottomLimit: 70,\n  perspective: 1200,\n  rotateX: 60,\n  rotateXForActive: 40,\n  interval: 0\n}\n"]}

package/dist/stories/ox-select-images.stories.d.ts

@@ -1,32 +0,0 @@
-import '../src/ox-select.js';
-import '../src/ox-checkbox.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        placeholder: {
-            control: string;
-        };
-        name: {
-            control: string;
-        };
-        disabled: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    placeholder?: string;
-    name?: string;
-    value?: object | string;
-    slot?: TemplateResult;
-    disabled?: boolean;
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-select-images.stories.js

@@ -1,120 +0,0 @@
-import '../src/ox-select.js';
-import '../src/ox-checkbox.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'ox-select-images',
-    component: 'ox-select',
-    argTypes: {
-        placeholder: { control: 'text' },
-        name: { control: 'text' },
-        disabled: { control: 'boolean' }
-    }
-};
-const Template = ({ placeholder = 'Checkbox', name = 'hello', value = '', slot, disabled }) => 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 {
-      height: 250px;
-      text-align: center;
-      padding: 20px;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-
-    ox-select {
-      width: 160px;
-    }
-  </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: 24px;
-      padding: 3px 7px;
-    }
-
-    .line-type.solid {
-      background-position: 50% 14px;
-    }
-    .line-type.round-dot {
-      background-position: 50% -36px;
-    }
-    .line-type.square-dot {
-      background-position: 50% -86px;
-    }
-    .line-type.dash {
-      background-position: 50% -136px;
-    }
-    .line-type.dash-dot {
-      background-position: 50% -186px;
-    }
-    .line-type.long-dash {
-      background-position: 50% -236px;
-    }
-    .line-type.long-dash-dot {
-      background-position: 50% -286px;
-    }
-    .line-type.long-dash-dot-dot {
-      background-position: 50% -336px;
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-select
-      name=${name}
-      @change=${(e) => {
-    console.log(e.target.value);
-}}
-      placeholder=${placeholder}
-      .value=${value}
-      ?disabled=${disabled}
-    >
-      ${slot}
-    </ox-select>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    placeholder: 'single select',
-    name: 'label',
-    value: '',
-    slot: html `
-    <div class="line-type dash" slot="label"></div>
-    <ox-popup-list align-left nowrap>
-      <div class="line-type solid" value="solid" option></div>
-      <div class="line-type round-dot" value="round-dot" option></div>
-      <div class="line-type square-dot" value="square-dot" option></div>
-      <div class="line-type dash" value="dash" option></div>
-      <div class="line-type dash-dot" value="dash-dot" option></div>
-      <div class="line-type long-dash" value="long-dash" option></div>
-      <div class="line-type long-dash-dot" value="long-dash-dot" option></div>
-      <div class="line-type long-dash-dot-dot" value="long-dash-dot-dot" option></div>
-    </ox-popup-list>
-  `
-};
-//# sourceMappingURL=ox-select-images.stories.js.map

package/dist/stories/ox-select-images.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-select-images.stories.js","sourceRoot":"","sources":["../../stories/ox-select-images.stories.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,WAAW,GAAG,UAAU,EACxB,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAsDlB,IAAI;gBACD,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;oBACa,WAAW;eAChB,KAAK;kBACF,QAAQ;;QAElB,IAAI;;;CAGX,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,eAAe;IAC5B,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,IAAI,CAAA;;;;;;;;;;;;GAYT;CACF,CAAA","sourcesContent":["import '../src/ox-select.js'\nimport '../src/ox-checkbox.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-select-images',\n  component: 'ox-select',\n  argTypes: {\n    placeholder: { control: 'text' },\n    name: { control: 'text' },\n    disabled: { 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  placeholder?: string\n  name?: string\n  value?: object | string\n  slot?: TemplateResult\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  placeholder = 'Checkbox',\n  name = 'hello',\n  value = '',\n  slot,\n  disabled\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 250px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    ox-select {\n      width: 160px;\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: 24px;\n      padding: 3px 7px;\n    }\n\n    .line-type.solid {\n      background-position: 50% 14px;\n    }\n    .line-type.round-dot {\n      background-position: 50% -36px;\n    }\n    .line-type.square-dot {\n      background-position: 50% -86px;\n    }\n    .line-type.dash {\n      background-position: 50% -136px;\n    }\n    .line-type.dash-dot {\n      background-position: 50% -186px;\n    }\n    .line-type.long-dash {\n      background-position: 50% -236px;\n    }\n    .line-type.long-dash-dot {\n      background-position: 50% -286px;\n    }\n    .line-type.long-dash-dot-dot {\n      background-position: 50% -336px;\n    }\n  </style>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-select\n      name=${name}\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      placeholder=${placeholder}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n      ${slot}\n    </ox-select>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  placeholder: 'single select',\n  name: 'label',\n  value: '',\n  slot: html`\n    <div class=\"line-type dash\" slot=\"label\"></div>\n    <ox-popup-list align-left nowrap>\n      <div class=\"line-type solid\" value=\"solid\" option></div>\n      <div class=\"line-type round-dot\" value=\"round-dot\" option></div>\n      <div class=\"line-type square-dot\" value=\"square-dot\" option></div>\n      <div class=\"line-type dash\" value=\"dash\" option></div>\n      <div class=\"line-type dash-dot\" value=\"dash-dot\" option></div>\n      <div class=\"line-type long-dash\" value=\"long-dash\" option></div>\n      <div class=\"line-type long-dash-dot\" value=\"long-dash-dot\" option></div>\n      <div class=\"line-type long-dash-dot-dot\" value=\"long-dash-dot-dot\" option></div>\n    </ox-popup-list>\n  `\n}\n"]}

package/dist/stories/ox-select-set-options.stories.d.ts

@@ -1,48 +0,0 @@
-import '../src/ox-select.js';
-import '../src/ox-checkbox.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        placeholder: {
-            control: string;
-        };
-        name: {
-            control: string;
-        };
-        options: {
-            control: string;
-        };
-        multiple: {
-            control: string;
-        };
-        withSearch: {
-            control: string;
-        };
-        disabled: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    placeholder?: string;
-    name?: string;
-    value?: object | string;
-    options?: string[] | {
-        display: string;
-        value: string;
-    }[];
-    multiple?: boolean;
-    withSearch?: boolean;
-    disabled?: boolean;
-}
-export declare const Regular: Story<ArgTypes>;
-export declare const MultipleSelect: Story<ArgTypes>;
-export declare const MultipleWithCheckbox: Story<ArgTypes>;

package/dist/stories/ox-select-set-options.stories.js

@@ -1,178 +0,0 @@
-import '../src/ox-select.js';
-import '../src/ox-checkbox.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'ox-select-set-options',
-    component: 'ox-select',
-    argTypes: {
-        placeholder: { control: 'text' },
-        name: { control: 'text' },
-        options: { control: 'object' },
-        multiple: { control: 'boolean' },
-        withSearch: { control: 'boolean' },
-        disabled: { control: 'boolean' }
-    }
-};
-const Template = ({ placeholder = 'Checkbox', name = 'hello', value = '', options = [], multiple, withSearch, disabled }) => 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 {
-      height: 500px;
-      text-align: center;
-      padding: 20px;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-select
-      name=${name}
-      @change=${(e) => {
-    console.log(e.target.value);
-}}
-      placeholder=${placeholder}
-      .value=${value}
-      ?disabled=${disabled}
-    >
-    </ox-select>
-
-    <input
-      type="button"
-      value="set options"
-      @click=${() => {
-    const select = document.querySelector('ox-select');
-    select.setOptions(options, { multiple, withSearch });
-    select.value = JSON.parse(JSON.stringify(value));
-}}
-    />
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    placeholder: 'single select',
-    name: 'label',
-    value: '',
-    multiple: false,
-    options: [
-        {
-            value: 'A',
-            display: 'LABEL-A'
-        },
-        {
-            value: 'B',
-            display: 'LABEL-B'
-        },
-        {
-            value: 'C',
-            display: 'LABEL-C'
-        },
-        {
-            value: 'TOO LONG VALUE',
-            display: 'LABEL-TOO LONG VALUE'
-        }
-    ]
-};
-export const MultipleSelect = Template.bind({});
-MultipleSelect.args = {
-    placeholder: 'multiple select',
-    name: 'multiple',
-    multiple: true,
-    withSearch: true,
-    value: ['B', 'TOO LONG VALUE'],
-    options: [
-        'A',
-        'B',
-        'C',
-        'D',
-        'E',
-        'F',
-        'G',
-        'H',
-        'I',
-        'J',
-        'K',
-        'L',
-        'M',
-        'O',
-        'P',
-        'Q',
-        'R',
-        'S',
-        'T',
-        'U',
-        'V',
-        'W',
-        'X',
-        'Y',
-        'Z',
-        'TOO LONG VALUE'
-    ]
-};
-export const MultipleWithCheckbox = Template.bind({});
-MultipleWithCheckbox.args = {
-    placeholder: 'multiple with checkbox',
-    name: 'multiple',
-    multiple: true,
-    withSearch: true,
-    value: ['B', 'C', 'F'],
-    options: [
-        {
-            value: 'A',
-            display: 'A'
-        },
-        {
-            value: 'B',
-            display: 'B'
-        },
-        {
-            value: 'C',
-            display: 'C'
-        },
-        {
-            value: 'D',
-            display: 'D'
-        },
-        {
-            value: 'E',
-            display: 'E'
-        },
-        {
-            value: 'F',
-            display: 'F'
-        },
-        {
-            value: 'G',
-            display: 'G'
-        },
-        {
-            value: 'TOO LONG VALUE',
-            display: 'TOO LONG VALUE'
-        }
-    ]
-};
-//# sourceMappingURL=ox-select-set-options.stories.js.map

package/dist/stories/ox-select-set-options.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-select-set-options.stories.js","sourceRoot":"","sources":["../../stories/ox-select-set-options.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/ox-select.js'\nimport '../src/ox-checkbox.js'\n\nimport { OxSelect } from '../src/ox-select.js'\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-select-set-options',\n  component: 'ox-select',\n  argTypes: {\n    placeholder: { control: 'text' },\n    name: { control: 'text' },\n    options: { control: 'object' },\n    multiple: { control: 'boolean' },\n    withSearch: { control: 'boolean' },\n    disabled: { 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  placeholder?: string\n  name?: string\n  value?: object | string\n  options?: string[] | { display: string; value: string }[]\n  multiple?: boolean\n  withSearch?: boolean\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  placeholder = 'Checkbox',\n  name = 'hello',\n  value = '',\n  options = [],\n  multiple,\n  withSearch,\n  disabled\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\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 class=\"container md-typescale-body-large-prominent\">\n    <ox-select\n      name=${name}\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      placeholder=${placeholder}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-select>\n\n    <input\n      type=\"button\"\n      value=\"set options\"\n      @click=${() => {\n        const select = document.querySelector('ox-select') as OxSelect\n        select.setOptions(options, { multiple, withSearch })\n        select.value = JSON.parse(JSON.stringify(value))\n      }}\n    />\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  placeholder: 'single select',\n  name: 'label',\n  value: '',\n  multiple: false,\n  options: [\n    {\n      value: 'A',\n      display: 'LABEL-A'\n    },\n    {\n      value: 'B',\n      display: 'LABEL-B'\n    },\n    {\n      value: 'C',\n      display: 'LABEL-C'\n    },\n    {\n      value: 'TOO LONG VALUE',\n      display: 'LABEL-TOO LONG VALUE'\n    }\n  ]\n}\n\nexport const MultipleSelect = Template.bind({})\nMultipleSelect.args = {\n  placeholder: 'multiple select',\n  name: 'multiple',\n  multiple: true,\n  withSearch: true,\n  value: ['B', 'TOO LONG VALUE'],\n  options: [\n    'A',\n    'B',\n    'C',\n    'D',\n    'E',\n    'F',\n    'G',\n    'H',\n    'I',\n    'J',\n    'K',\n    'L',\n    'M',\n    'O',\n    'P',\n    'Q',\n    'R',\n    'S',\n    'T',\n    'U',\n    'V',\n    'W',\n    'X',\n    'Y',\n    'Z',\n    'TOO LONG VALUE'\n  ]\n}\n\nexport const MultipleWithCheckbox = Template.bind({})\nMultipleWithCheckbox.args = {\n  placeholder: 'multiple with checkbox',\n  name: 'multiple',\n  multiple: true,\n  withSearch: true,\n  value: ['B', 'C', 'F'],\n  options: [\n    {\n      value: 'A',\n      display: 'A'\n    },\n    {\n      value: 'B',\n      display: 'B'\n    },\n    {\n      value: 'C',\n      display: 'C'\n    },\n    {\n      value: 'D',\n      display: 'D'\n    },\n    {\n      value: 'E',\n      display: 'E'\n    },\n    {\n      value: 'F',\n      display: 'F'\n    },\n    {\n      value: 'G',\n      display: 'G'\n    },\n    {\n      value: 'TOO LONG VALUE',\n      display: 'TOO LONG VALUE'\n    }\n  ]\n}\n"]}