@operato/input 7.0.0-rc.9 → 7.0.0

package/dist/stories/ox-input-value-ranges.stories.d.ts

@@ -21,10 +21,6 @@ declare const _default: {
         disabled: {
             control: string;
         };
-        theme: {
-            control: string;
-            options: string[];
-        };
     };
 };
 export default _default;
@@ -39,6 +35,5 @@ interface ArgTypes {
     valuetype?: string;
     keytype?: string;
     disabled?: boolean;
-    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-input-value-ranges.stories.js

@@ -9,11 +9,10 @@ export default {
         value: { control: 'object' },
         keytype: { control: 'select', options: ['string', 'number'] },
         valuetype: { control: 'select', options: ['string', 'boolean', 'number', 'color', 'date'] },
-        disabled: { control: 'boolean' },
-        theme: { control: 'select', options: ['light', 'dark'] }
+        disabled: { control: 'boolean' }
     }
 };
-const Template = ({ name = 'values', value = {}, keytype = 'string', valuetype = 'string', disabled, theme = 'light' }) => html `
+const Template = ({ name = 'values', value = {}, keytype = 'string', valuetype = 'string', 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" />
@@ -48,10 +47,6 @@ const Template = ({ name = 'values', value = {}, keytype = 'string', valuetype =
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-value-ranges
       @change=${(e) => {

package/dist/stories/ox-input-value-ranges.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-value-ranges.stories.js","sourceRoot":"","sources":["../../stories/ox-input-value-ranges.stories.ts"],"names":[],"mappings":"AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,uBAAuB;IAClC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE;QAC7D,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE;QAC3F,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAiBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,QAAQ,EAClB,SAAS,GAAG,QAAQ,EACpB,QAAQ,EACR,KAAK,GAAG,OAAO,EACN,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;gBAKxB,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;gBACJ,OAAO;kBACL,SAAS;kBACT,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,EAAE;CACV,CAAA","sourcesContent":["import '../src/ox-input-value-ranges.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-input-value-ranges',\n  component: 'ox-input-value-ranges',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    keytype: { control: 'select', options: ['string', 'number'] },\n    valuetype: { control: 'select', options: ['string', 'boolean', 'number', 'color', 'date'] },\n    disabled: { control: 'boolean' },\n    theme: { control: 'select', options: ['light', 'dark'] }\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  valuetype?: string\n  keytype?: string\n  disabled?: boolean\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'values',\n  value = {},\n  keytype = 'string',\n  valuetype = 'string',\n  disabled,\n  theme = 'light'\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  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-input-value-ranges\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      keytype=${keytype}\n      valuetype=${valuetype}\n      ?disabled=${disabled}\n    >\n    </ox-input-value-ranges>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'values',\n  value: {}\n}\n"]}
+{"version":3,"file":"ox-input-value-ranges.stories.js","sourceRoot":"","sources":["../../stories/ox-input-value-ranges.stories.ts"],"names":[],"mappings":"AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,uBAAuB;IAClC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE;QAC7D,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE;QAC3F,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,EAAE,EACV,OAAO,GAAG,QAAQ,EAClB,SAAS,GAAG,QAAQ,EACpB,QAAQ,EACC,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;gBAgBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;gBACJ,OAAO;kBACL,SAAS;kBACT,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,EAAE;CACV,CAAA","sourcesContent":["import '../src/ox-input-value-ranges.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-input-value-ranges',\n  component: 'ox-input-value-ranges',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    keytype: { control: 'select', options: ['string', 'number'] },\n    valuetype: { control: 'select', options: ['string', 'boolean', 'number', 'color', 'date'] },\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  valuetype?: string\n  keytype?: string\n  disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'values',\n  value = {},\n  keytype = 'string',\n  valuetype = 'string',\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-input-value-ranges\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      keytype=${keytype}\n      valuetype=${valuetype}\n      ?disabled=${disabled}\n    >\n    </ox-input-value-ranges>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'values',\n  value: {}\n}\n"]}

package/dist/stories/ox-input-work-shift.stories.d.ts

@@ -14,10 +14,6 @@ declare const _default: {
         disabled: {
             control: string;
         };
-        theme: {
-            control: string;
-            options: string[];
-        };
     };
 };
 export default _default;
@@ -30,6 +26,5 @@ interface ArgTypes {
     name?: string;
     value?: object;
     disabled?: boolean;
-    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;

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

@@ -8,11 +8,10 @@ export default {
     argTypes: {
         value: { control: 'object' },
         name: { control: 'text' },
-        disabled: { control: 'boolean' },
-        theme: { control: 'select', options: ['light', 'dark'] }
+        disabled: { control: 'boolean' }
     }
 };
-const Template = ({ name = 'work-shift', value = [], disabled, theme = 'light' }) => html `
+const Template = ({ name = 'work-shift', value = [], 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" />
@@ -47,10 +46,6 @@ const Template = ({ name = 'work-shift', value = [], disabled, theme = 'light' }
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <locale-picker></locale-picker>
     <br /><br />

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

@@ -1 +1 @@
-{"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,8CAA8C,CAAA;AAE1F,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;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqB9G,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;;;;gBAQxB,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'\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    theme: { control: 'select', options: ['light', 'dark'] }\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  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'work-shift', value = [], disabled, theme = 'light' }: 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  <script>\n    document.body.classList.add('${theme}')\n  </script>\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"]}
+{"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,8CAA8C,CAAA;AAE1F,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'\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-set-options.stories.d.ts

@@ -23,10 +23,6 @@ declare const _default: {
         disabled: {
             control: string;
         };
-        theme: {
-            control: string;
-            options: string[];
-        };
     };
 };
 export default _default;
@@ -46,7 +42,6 @@ interface ArgTypes {
     multiple?: boolean;
     withSearch?: boolean;
     disabled?: boolean;
-    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;
 export declare const MultipleSelect: Story<ArgTypes>;

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

@@ -11,11 +11,10 @@ export default {
         options: { control: 'object' },
         multiple: { control: 'boolean' },
         withSearch: { control: 'boolean' },
-        disabled: { control: 'boolean' },
-        theme: { control: 'select', options: ['light', 'dark'] }
+        disabled: { control: 'boolean' }
     }
 };
-const Template = ({ placeholder = 'Checkbox', name = 'hello', value = '', options = [], multiple, withSearch, disabled, theme = 'light' }) => html `
+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" />
@@ -50,10 +49,6 @@ const Template = ({ placeholder = 'Checkbox', name = 'hello', value = '', option
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-select
       name=${name}

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

@@ -1 +1 @@
-{"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'\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    theme: { control: 'select', options: ['light', 'dark'] }\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  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({\n  placeholder = 'Checkbox',\n  name = 'hello',\n  value = '',\n  options = [],\n  multiple,\n  withSearch,\n  disabled,\n  theme = 'light'\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  <script>\n    document.body.classList.add('${theme}')\n  </script>\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"]}
+{"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'\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

@@ -14,10 +14,6 @@ declare const _default: {
         disabled: {
             control: string;
         };
-        theme: {
-            control: string;
-            options: string[];
-        };
     };
 };
 export default _default;
@@ -32,7 +28,6 @@ interface ArgTypes {
     value?: object | string;
     slot?: TemplateResult;
     disabled?: boolean;
-    theme?: string;
 }
 export declare const Regular: Story<ArgTypes>;
 export declare const MultipleSelect: Story<ArgTypes>;

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

@@ -8,11 +8,10 @@ export default {
     argTypes: {
         placeholder: { control: 'text' },
         name: { control: 'text' },
-        disabled: { control: 'boolean' },
-        theme: { control: 'select', options: ['light', 'dark'] }
+        disabled: { control: 'boolean' }
     }
 };
-const Template = ({ placeholder = 'Checkbox', name = 'hello', value = '', slot, disabled, theme = 'light' }) => html `
+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" />
@@ -47,10 +46,6 @@ const Template = ({ placeholder = 'Checkbox', name = 'hello', value = '', slot,
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-select
       name=${name}

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

@@ -1 +1 @@
-{"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'\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    theme: { control: 'select', options: ['light', 'dark'] }\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  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({\n  placeholder = 'Checkbox',\n  name = 'hello',\n  value = '',\n  slot,\n  disabled,\n  theme = 'light'\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  <script>\n    document.body.classList.add('${theme}')\n  </script>\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          ;(target.closest('ox-select') as any)!.value = options\n            .map(option => ((option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined))\n            .filter(Boolean)\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"]}
+{"version":3,"file":"ox-select.stories.js","sourceRoot":"","sources":["../../stories/ox-select.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,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,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;;;;;;;;;;;;;;;;aAgBlB,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;;;;;;;GAOT;CACF,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG;IACpB,WAAW,EAAE,iBAAiB;IAC9B,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,CAAC,GAAG,EAAE,gBAAgB,CAAC;IAC9B,IAAI,EAAE,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BT;CACF,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACrD,oBAAoB,CAAC,IAAI,GAAG;IAC1B,WAAW,EAAE,wBAAwB;IACrC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;IACtB,IAAI,EAAE,IAAI,CAAA;;;kBAGM,CAAC,CAAQ,EAAE,EAAE;QACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC3C,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAc,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CACnF,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CACzC,CAAA;QACD,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAE,MAA2B,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CACjF;QAAC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAU,CAAC,KAAK,GAAG,OAAO;aACnD,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAE,MAA2B,CAAC,OAAO,CAAC,CAAC,CAAE,MAA2B,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;aACtG,MAAM,CAAC,OAAO,CAAC,CAAA;IACpB,CAAC;;;;;;;;;;;;GAYN;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'\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: 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      ${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          ;(target.closest('ox-select') as any)!.value = options\n            .map(option => ((option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined))\n            .filter(Boolean)\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"]}