@operato/input 2.0.0-alpha.145 → 2.0.0-alpha.148

package/stories/ox-input-value-map.stories.ts

@@ -1,6 +1,7 @@
 import '../src/ox-input-value-map.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-value-map',
@@ -10,7 +11,8 @@ export default {
     value: { control: 'object' },
     keytype: { control: 'select', options: ['string', 'number'] },
     valuetype: { control: 'select', options: ['string', 'boolean', 'number', 'color', 'date'] },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -26,6 +28,7 @@ interface ArgTypes {
   valuetype?: string
   keytype?: string
   disabled?: boolean
+  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -33,9 +36,14 @@ const Template: Story<ArgTypes> = ({
   value = {},
   keytype = 'string',
   valuetype = 'string',
-  disabled
+  disabled,
+  theme = 'light'
 }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <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"
@@ -49,22 +57,39 @@ const Template: Story<ArgTypes> = ({
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
   <style>
-    body {
+    ${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>
 
-  <ox-input-value-map
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-    keytype=${keytype}
-    valuetype=${valuetype}
-    ?disabled=${disabled}
-  >
-  </ox-input-value-map>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-value-map
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      keytype=${keytype}
+      valuetype=${valuetype}
+      ?disabled=${disabled}
+    >
+    </ox-input-value-map>
+  </div>
 `
 
 export const Regular = Template.bind({})

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

@@ -1,6 +1,7 @@
 import '../src/ox-input-value-ranges.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-value-ranges',
@@ -10,7 +11,8 @@ export default {
     value: { control: 'object' },
     keytype: { control: 'select', options: ['string', 'number'] },
     valuetype: { control: 'select', options: ['string', 'boolean', 'number', 'color', 'date'] },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -26,6 +28,7 @@ interface ArgTypes {
   valuetype?: string
   keytype?: string
   disabled?: boolean
+  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -33,9 +36,14 @@ const Template: Story<ArgTypes> = ({
   value = {},
   keytype = 'string',
   valuetype = 'string',
-  disabled
+  disabled,
+  theme = 'light'
 }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <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"
@@ -49,22 +57,39 @@ const Template: Story<ArgTypes> = ({
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
   <style>
-    body {
+    ${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>
 
-  <ox-input-value-ranges
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-    keytype=${keytype}
-    valuetype=${valuetype}
-    ?disabled=${disabled}
-  >
-  </ox-input-value-ranges>
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-value-ranges
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      keytype=${keytype}
+      valuetype=${valuetype}
+      ?disabled=${disabled}
+    >
+    </ox-input-value-ranges>
+  </div>
 `
 
 export const Regular = Template.bind({})

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

@@ -2,6 +2,7 @@ import '../src/ox-input-work-shift.js'
 import '../src/locale/locale-picker.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-input-work-shift',
@@ -9,7 +10,8 @@ export default {
   argTypes: {
     value: { control: 'object' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -23,10 +25,15 @@ interface ArgTypes {
   name?: string
   value?: object
   disabled?: boolean
+  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'work-shift', value = [], disabled }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+const Template: Story<ArgTypes> = ({ name = 'work-shift', value = [], disabled, theme = 'light' }: ArgTypes) => 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"
@@ -40,23 +47,40 @@ const Template: Story<ArgTypes> = ({ name = 'work-shift', value = [], disabled }
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
     rel="stylesheet"
   />
+
   <style>
-    body {
+    ${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>
 
-  <locale-picker></locale-picker>
-  <br /><br />
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <locale-picker></locale-picker>
+    <br /><br />
 
-  <ox-input-work-shift
-    @change=${(e: Event) => {
-      console.log((e.target as HTMLInputElement).value)
-    }}
-    name=${name}
-    .value=${value}
-    ?disabled=${disabled}
-  >
-  </ox-input-work-shift>
+    <ox-input-work-shift
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-work-shift>
+  </div>
 `
 
 export const Regular = Template.bind({})

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

@@ -0,0 +1,215 @@
+import '../src/ox-select.js'
+import '../src/ox-checkbox.js'
+
+import { OxSelect } from '../src/ox-select.js'
+import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
+
+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' },
+    theme: { control: 'select', options: ['light', 'dark'] }
+  }
+}
+
+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
+  theme?: string
+}
+
+const Template: Story<ArgTypes> = ({
+  placeholder = 'Checkbox',
+  name = 'hello',
+  value = '',
+  options = [],
+  multiple,
+  withSearch,
+  disabled,
+  theme = 'light'
+}: ArgTypes) => 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>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-select
+      name=${name}
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      placeholder=${placeholder}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-select>
+
+    <input
+      type="button"
+      value="set options"
+      @click=${() => {
+        const select = document.querySelector('ox-select') as OxSelect
+        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'
+    }
+  ]
+}

package/stories/ox-select.stories.ts

@@ -2,6 +2,7 @@ import '../src/ox-select.js'
 import '../src/ox-checkbox.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-select',
@@ -9,7 +10,8 @@ export default {
   argTypes: {
     placeholder: { control: 'text' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' }
+    disabled: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -25,6 +27,7 @@ interface ArgTypes {
   value?: object | string
   slot?: TemplateResult
   disabled?: boolean
+  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -32,9 +35,14 @@ const Template: Story<ArgTypes> = ({
   name = 'hello',
   value = '',
   slot,
-  disabled
+  disabled,
+  theme = 'light'
 }: ArgTypes) => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <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"
@@ -49,7 +57,26 @@ const Template: Story<ArgTypes> = ({
     rel="stylesheet"
   />
 
-  <div style="height: 300px">
+  <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>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
     <ox-select
       name=${name}
       @change=${(e: Event) => {
@@ -124,12 +151,15 @@ MultipleWithCheckbox.args = {
   slot: html`
     <ox-popup-list attr-selected="checked" multiple with-search>
       <ox-checkbox
-        option
         @change=${(e: Event) => {
           const target = e.target as HTMLInputElement
-          const options = target.parentElement!.querySelectorAll('[option]')
-          console.log(options)
+          const options = Array.from(target.parentElement!.querySelectorAll('[option]')).filter(
+            option => !option.hasAttribute('hidden')
+          )
           options.forEach(option => ((option as HTMLInputElement).checked = target.checked))
+          ;(target.closest('ox-select') as any)!.value = options
+            .map(option => ((option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined))
+            .filter(Boolean)
         }}
         >set all</ox-checkbox
       >