@operato/input 9.0.0-beta.7 → 9.0.0-beta.70

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-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"]}

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

@@ -1,34 +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>;
-export declare const MultipleSelect: Story<ArgTypes>;
-export declare const MultipleWithCheckbox: Story<ArgTypes>;

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

@@ -1,151 +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',
-    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: 300px;
-    }
-  </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 `
-    <ox-popup-list align-left nowrap>
-      <div option value="A">LABEL-A</div>
-      <div option value="B">LABEL-B</div>
-      <div option value="C">LABEL-C</div>
-      <div option value="TOO LONG VALUE">LABEL-TOO LONG VALUE</div>
-    </ox-popup-list>
-  `
-};
-export const MultipleSelect = Template.bind({});
-MultipleSelect.args = {
-    placeholder: 'multiple select',
-    name: 'multiple',
-    value: ['B', 'TOO LONG VALUE'],
-    slot: html `
-    <ox-popup-list multiple  with-search>
-      <div option value="A">A</div>
-      <div option value="B">B</div>
-      <div option value="C">C</div>
-      <div option value="D">D</div>
-      <div option value="E">E</div>
-      <div option value="F">F</div>
-      <div option value="G">G</div>
-      <div option value="H">H</div>
-      <div option value="I">I</div>
-      <div option value="J">J</div>
-      <div option value="K">K</div>
-      <div option value="L">L</div>
-      <div option value="M">M</div>
-      <div option value="O">O</div>
-      <div option value="P">P</div>
-      <div option value="Q">Q</div>
-      <div option value="R">R</div>
-      <div option value="S">S</div>
-      <div option value="T">T</div>
-      <div option value="U">U</div>
-      <div option value="V">V</div>
-      <div option value="W">W</div>
-      <div option value="X">X</div>
-      <div option value="Y">Y</div>
-      <div option value="Z">Z</div>
-      <div option value="TOO LONG VALUE" />TOO LONG VALUE</div>
-    </ox-popup-list>
-  `
-};
-export const MultipleWithCheckbox = Template.bind({});
-MultipleWithCheckbox.args = {
-    placeholder: 'multiple with checkbox',
-    name: 'multiple',
-    value: ['B', 'C', 'F'],
-    slot: html `
-    <ox-popup-list attr-selected="checked" multiple with-search>
-      <ox-checkbox
-        @change=${(e) => {
-        const target = e.target;
-        const options = Array.from(target.parentElement.querySelectorAll('[option]')).filter(option => !option.hasAttribute('hidden'));
-        options.forEach(option => (option.checked = target.checked));
-        const value = options
-            .map(option => (option.checked ? option.value : undefined))
-            .filter(Boolean);
-        target.closest('ox-popup-list').dispatchEvent(new CustomEvent('select', {
-            bubbles: true,
-            composed: true,
-            detail: value
-        }));
-    }}
-        >set all</ox-checkbox
-      >
-      <ox-checkbox option value="A">LABEL-A</ox-checkbox>
-      <ox-checkbox option value="B">LABEL-B</ox-checkbox>
-      <ox-checkbox option value="C" checked>LABEL-C</ox-checkbox>
-      <ox-checkbox option value="D">LABEL-D</ox-checkbox>
-      <ox-checkbox option value="E">LABEL-E</ox-checkbox>
-      <ox-checkbox option value="F">LABEL-F</ox-checkbox>
-      <ox-checkbox option value="G">LABEL-G</ox-checkbox>
-      <ox-checkbox option value="TOO LONG VALUE">TOO LONG VALUE</ox-checkbox>
-    </ox-popup-list>
-  `
-};
-//# sourceMappingURL=ox-select.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ox-select.stories.js","sourceRoot":"","sources":["../../stories/ox-select.stories.ts"],"names":[],"mappings":"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","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',\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: 300px;\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    <ox-popup-list align-left nowrap>\n      <div option value=\"A\">LABEL-A</div>\n      <div option value=\"B\">LABEL-B</div>\n      <div option value=\"C\">LABEL-C</div>\n      <div option value=\"TOO LONG VALUE\">LABEL-TOO LONG VALUE</div>\n    </ox-popup-list>\n  `\n}\n\nexport const MultipleSelect = Template.bind({})\nMultipleSelect.args = {\n  placeholder: 'multiple select',\n  name: 'multiple',\n  value: ['B', 'TOO LONG VALUE'],\n  slot: html`\n    <ox-popup-list multiple  with-search>\n      <div option value=\"A\">A</div>\n      <div option value=\"B\">B</div>\n      <div option value=\"C\">C</div>\n      <div option value=\"D\">D</div>\n      <div option value=\"E\">E</div>\n      <div option value=\"F\">F</div>\n      <div option value=\"G\">G</div>\n      <div option value=\"H\">H</div>\n      <div option value=\"I\">I</div>\n      <div option value=\"J\">J</div>\n      <div option value=\"K\">K</div>\n      <div option value=\"L\">L</div>\n      <div option value=\"M\">M</div>\n      <div option value=\"O\">O</div>\n      <div option value=\"P\">P</div>\n      <div option value=\"Q\">Q</div>\n      <div option value=\"R\">R</div>\n      <div option value=\"S\">S</div>\n      <div option value=\"T\">T</div>\n      <div option value=\"U\">U</div>\n      <div option value=\"V\">V</div>\n      <div option value=\"W\">W</div>\n      <div option value=\"X\">X</div>\n      <div option value=\"Y\">Y</div>\n      <div option value=\"Z\">Z</div>\n      <div option value=\"TOO LONG VALUE\" />TOO LONG VALUE</div>\n    </ox-popup-list>\n  `\n}\n\nexport const MultipleWithCheckbox = Template.bind({})\nMultipleWithCheckbox.args = {\n  placeholder: 'multiple with checkbox',\n  name: 'multiple',\n  value: ['B', 'C', 'F'],\n  slot: html`\n    <ox-popup-list attr-selected=\"checked\" multiple with-search>\n      <ox-checkbox\n        @change=${(e: Event) => {\n          const target = e.target as HTMLInputElement\n          const options = Array.from(target.parentElement!.querySelectorAll('[option]')).filter(\n            option => !option.hasAttribute('hidden')\n          )\n          options.forEach(option => ((option as HTMLInputElement).checked = target.checked))\n          const value = options\n            .map(option => ((option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined))\n            .filter(Boolean)\n\n          ;(target.closest('ox-popup-list') as any)!.dispatchEvent(\n            new CustomEvent('select', {\n              bubbles: true,\n              composed: true,\n              detail: value\n            })\n          )\n        }}\n        >set all</ox-checkbox\n      >\n      <ox-checkbox option value=\"A\">LABEL-A</ox-checkbox>\n      <ox-checkbox option value=\"B\">LABEL-B</ox-checkbox>\n      <ox-checkbox option value=\"C\" checked>LABEL-C</ox-checkbox>\n      <ox-checkbox option value=\"D\">LABEL-D</ox-checkbox>\n      <ox-checkbox option value=\"E\">LABEL-E</ox-checkbox>\n      <ox-checkbox option value=\"F\">LABEL-F</ox-checkbox>\n      <ox-checkbox option value=\"G\">LABEL-G</ox-checkbox>\n      <ox-checkbox option value=\"TOO LONG VALUE\">TOO LONG VALUE</ox-checkbox>\n    </ox-popup-list>\n  `\n}\n"]}