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

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