@operato/form 7.0.0-rc.9 → 7.0.0

package/.storybook/preview.js

@@ -0,0 +1,52 @@
+import { i18next } from '@operato/i18n'
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'ko', right: '🇰🇷', title: '한국어' },
+        { value: 'zh', right: '🇨🇳', title: '中文' },
+        { value: 'ja', right: '🇯🇵', title: '日本語' },
+        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
+      ],
+      showName: true
+    }
+  },
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'light', title: 'Light' },
+        { value: 'dark', title: 'Dark' }
+      ],
+      showName: true
+    }
+  }
+}
+
+export const decorators = [
+  (Story, context) => {
+    const { locale, theme } = context.globals
+
+    if (locale) {
+      i18next.changeLanguage(locale)
+    }
+
+    // Set the theme class for the document
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark')
+      document.documentElement.classList.remove('light')
+    } else {
+      document.documentElement.classList.add('light')
+      document.documentElement.classList.remove('dark')
+    }
+
+    return Story()
+  }
+]

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.0](https://github.com/hatiolab/operato/compare/v7.0.0-rc.13...v7.0.0) (2024-06-30)
+
+**Note:** Version bump only for package @operato/form
+
+
+
+
+
+## [7.0.0-rc.13](https://github.com/hatiolab/operato/compare/v7.0.0-rc.12...v7.0.0-rc.13) (2024-06-30)
+
+
+### :bug: Bug Fix
+
+* storybook preview.js ([84d7682](https://github.com/hatiolab/operato/commit/84d7682af452554e8b0e83aa683bdc3726e264bb))
+* storybook preview.js ([c2e4f7b](https://github.com/hatiolab/operato/commit/c2e4f7babc46067fef8c0d47481ee2351fe77917))
+
+
+
+## [7.0.0-rc.12](https://github.com/hatiolab/operato/compare/v7.0.0-rc.11...v7.0.0-rc.12) (2024-06-29)
+
+
+### :bug: Bug Fix
+
+* search-form search icon position ([2cb69e8](https://github.com/hatiolab/operato/commit/2cb69e897c4a2b2201bce685e20dca4fa75bcbfa))
+
+
+
+## [7.0.0-rc.11](https://github.com/hatiolab/operato/compare/v7.0.0-rc.10...v7.0.0-rc.11) (2024-06-29)
+
+
+### :bug: Bug Fix
+
+* material design token ([bf70a97](https://github.com/hatiolab/operato/commit/bf70a9783aacfd6f58e945515d25120ace1ad1f3))
+
+
+
+## [7.0.0-rc.10](https://github.com/hatiolab/operato/compare/v7.0.0-rc.9...v7.0.0-rc.10) (2024-06-29)
+
+
+### :bug: Bug Fix
+
+* header styles for data-grid ([f561e38](https://github.com/hatiolab/operato/commit/f561e38a25904057bfb91a728a8eed0e7c4e2533))
+* search form style ([c445c56](https://github.com/hatiolab/operato/commit/c445c5680c7b03ef8ed8ca4bbc506cc76dd0bbf0))
+
+
+
 ## [7.0.0-rc.9](https://github.com/hatiolab/operato/compare/v7.0.0-rc.8...v7.0.0-rc.9) (2024-06-29)
 
 

package/dist/src/filters/filter-styles.js

@@ -52,6 +52,7 @@ export const FilterStyles = css `
     font: var(--ox-filters-input-font);
     color: var(--ox-filters-input-color, var(--md-sys-color-on-surface-variant));
     background-color: var(--ox-filters-input-background-color, transparent);
+    vertical-align: middle;
   }
 
   ox-select:focus,

package/dist/src/filters/filter-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-styles.js","sourceRoot":"","sources":["../../../src/filters/filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2H9B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const FilterStyles = css`\n  :host {\n    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--md-sys-color-on-surface-variant));\n\n    --ox-filters-input-border: var(--input-border, 1px solid var(--md-sys-color-outline));\n    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--md-sys-color-primary));\n    --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));\n    --ox-filters-input-color: var(--input-color, var(--md-sys-color-on-surface));\n    --ox-filters-input-focus-color: var(--input-focus-color, var(--md-sys-color-on-surface-variant));\n    --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));\n    --ox-filters-label-color: var(--label-color, var(--md-sys-color-on-surface));\n    --ox-filters-input-background-color: transparent;\n\n    --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n    --ox-filters-input-padding: 0 var(--spacing-small);\n\n    --ox-select-padding: var(--ox-filters-input-padding);\n    --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);\n\n    --md-sys-color-on-primary: transparent;\n    --form-element-height-medium: var(--form-element-height-small);\n  }\n\n  label {\n    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n    color: var(--md-sys-color-primary);\n  }\n\n  span {\n    text-transform: capitalize;\n  }\n\n  input::placeholder {\n    color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-on-surface-variant));\n    opacity: 0.7;\n  }\n\n  input,\n  ox-input-search,\n  [filter-input] {\n    padding: var(--ox-filters-input-padding);\n    height: var(--form-element-height-medium);\n  }\n\n  ox-select,\n  ox-input-search,\n  input,\n  [filter-input] {\n    border: none;\n    border-bottom: var(--ox-filters-input-border, var(--md-sys-color-outline));\n    font: var(--ox-filters-input-font);\n    color: var(--ox-filters-input-color, var(--md-sys-color-on-surface-variant));\n    background-color: var(--ox-filters-input-background-color, transparent);\n  }\n\n  ox-select:focus,\n  input:focus,\n  [filter-input]:focus {\n    outline: none;\n    border-bottom: var(--ox-filters-input-focus-border);\n    color: var(--ox-filters-input-focus-color, var(--md-sys-color-primary));\n  }\n\n  ox-select {\n    min-width: 90px;\n    max-width: 170px;\n  }\n\n  ox-input-search {\n    max-width: 150px;\n  }\n\n  input[type='number'] {\n    max-width: 90px;\n  }\n\n  input[type*='date'],\n  input[type*='time'],\n  input[type='week'],\n  input[type='month'] {\n    max-width: 170px;\n  }\n\n  [filter-input] {\n    min-width: 140px;\n    max-width: 170px;\n  }\n\n  @media only screen and (max-width: 460px) {\n    :host {\n      --ox-filters-form-label-font: bold 13px var(--theme-font);\n      --ox-filters-input-font: normal 16px var(--theme-font);\n    }\n\n    ox-input-barcode {\n      max-width: unset;\n      flex: 1;\n    }\n\n    ox-input-search {\n      max-width: unset;\n    }\n\n    ox-select {\n      max-width: unset;\n    }\n\n    ox-checkbox {\n      max-width: unset;\n    }\n\n    input[type='number'] {\n      max-width: unset;\n    }\n\n    input {\n      flex: 1;\n    }\n\n    [readonly] {\n      background-color: #f0f0f0;\n    }\n  }\n`\n"]}
+{"version":3,"file":"filter-styles.js","sourceRoot":"","sources":["../../../src/filters/filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4H9B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const FilterStyles = css`\n  :host {\n    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--md-sys-color-on-surface-variant));\n\n    --ox-filters-input-border: var(--input-border, 1px solid var(--md-sys-color-outline));\n    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--md-sys-color-primary));\n    --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));\n    --ox-filters-input-color: var(--input-color, var(--md-sys-color-on-surface));\n    --ox-filters-input-focus-color: var(--input-focus-color, var(--md-sys-color-on-surface-variant));\n    --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));\n    --ox-filters-label-color: var(--label-color, var(--md-sys-color-on-surface));\n    --ox-filters-input-background-color: transparent;\n\n    --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n    --ox-filters-input-padding: 0 var(--spacing-small);\n\n    --ox-select-padding: var(--ox-filters-input-padding);\n    --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);\n\n    --md-sys-color-on-primary: transparent;\n    --form-element-height-medium: var(--form-element-height-small);\n  }\n\n  label {\n    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n    color: var(--md-sys-color-primary);\n  }\n\n  span {\n    text-transform: capitalize;\n  }\n\n  input::placeholder {\n    color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-on-surface-variant));\n    opacity: 0.7;\n  }\n\n  input,\n  ox-input-search,\n  [filter-input] {\n    padding: var(--ox-filters-input-padding);\n    height: var(--form-element-height-medium);\n  }\n\n  ox-select,\n  ox-input-search,\n  input,\n  [filter-input] {\n    border: none;\n    border-bottom: var(--ox-filters-input-border, var(--md-sys-color-outline));\n    font: var(--ox-filters-input-font);\n    color: var(--ox-filters-input-color, var(--md-sys-color-on-surface-variant));\n    background-color: var(--ox-filters-input-background-color, transparent);\n    vertical-align: middle;\n  }\n\n  ox-select:focus,\n  input:focus,\n  [filter-input]:focus {\n    outline: none;\n    border-bottom: var(--ox-filters-input-focus-border);\n    color: var(--ox-filters-input-focus-color, var(--md-sys-color-primary));\n  }\n\n  ox-select {\n    min-width: 90px;\n    max-width: 170px;\n  }\n\n  ox-input-search {\n    max-width: 150px;\n  }\n\n  input[type='number'] {\n    max-width: 90px;\n  }\n\n  input[type*='date'],\n  input[type*='time'],\n  input[type='week'],\n  input[type='month'] {\n    max-width: 170px;\n  }\n\n  [filter-input] {\n    min-width: 140px;\n    max-width: 170px;\n  }\n\n  @media only screen and (max-width: 460px) {\n    :host {\n      --ox-filters-form-label-font: bold 13px var(--theme-font);\n      --ox-filters-input-font: normal 16px var(--theme-font);\n    }\n\n    ox-input-barcode {\n      max-width: unset;\n      flex: 1;\n    }\n\n    ox-input-search {\n      max-width: unset;\n    }\n\n    ox-select {\n      max-width: unset;\n    }\n\n    ox-checkbox {\n      max-width: unset;\n    }\n\n    input[type='number'] {\n      max-width: unset;\n    }\n\n    input {\n      flex: 1;\n    }\n\n    [readonly] {\n      background-color: #f0f0f0;\n    }\n  }\n`\n"]}

package/dist/src/styles/multi-column-form-styles.js

@@ -130,7 +130,7 @@ export const MultiColumnFormStyles = css `
     .multi-column-form [options-wrap] {
       grid-column: span 12 / auto;
       display: grid;
-      grid-gap: var(--padding-default, var(--spacing-small)) var(--padding-narrow, var(--spacing-small));
+      grid-gap: var(--padding-default, var(--spacing-small)) var(--spacing-small, var(--spacing-small));
       grid-template-columns: repeat(12, 1fr);
     }
     .multi-column-form [options-wrap] input[type='checkbox'] + label,

package/dist/src/styles/multi-column-form-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-column-form-styles.js","sourceRoot":"","sources":["../../../src/styles/multi-column-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LvC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MultiColumnFormStyles = css`\n  :host {\n    overflow: auto;\n    padding: var(--form-container-padding);\n  }\n\n  .multi-column-form {\n    display: grid;\n    grid-template-columns: repeat(24, 1fr);\n    grid-gap: var(--form-grid-gap);\n    grid-auto-rows: minmax(24px, auto);\n    max-width: var(--form-multi-column-max-width);\n    margin: var(--form-margin);\n  }\n  .multi-column-form fieldset {\n    display: contents;\n  }\n  .multi-column-form legend {\n    grid-column: span 24;\n    text-transform: capitalize;\n\n    padding: var(--legend-padding);\n    font: var(--legend-font);\n    color: var(--legend-text-color, var(--md-sys-color-on-surface-variant));\n    border-bottom: var(--legend-border-bottom);\n  }\n\n  .multi-column-form label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n    align-self: center;\n\n    color: var(--label-color, var(--md-sys-color-on-surface));\n    font: var(--label-font);\n  }\n\n  .multi-column-form input,\n  .multi-column-form table,\n  .multi-column-form select,\n  .multi-column-form textarea,\n  .multi-column-form [custom-input] {\n    grid-column: span 9;\n\n    border: var(--input-field-border);\n    border-radius: var(--input-field-border-radius);\n    padding: var(--input-field-padding);\n    font: var(--input-field-font);\n    max-width: 85%;\n  }\n  .multi-column-form select {\n    min-height: 25px;\n    max-width: calc(85% + 18px);\n  }\n\n  .multi-column-form input[type='checkbox'],\n  .multi-column-form input[type='radio'] {\n    justify-self: end;\n    align-self: center;\n    grid-column: span 3 / auto;\n    position: relative;\n    left: 17px;\n  }\n\n  .multi-column-form input[type='checkbox'] + label,\n  .multi-column-form input[type='radio'] + label {\n    padding-left: 17px;\n    text-align: left;\n    align-self: center;\n    grid-column: span 9 / auto;\n\n    font: var(--form-sublabel-font);\n    color: var(--form-sublabel-color, var(--md-sys-color-secondary));\n  }\n  .multi-column-form [options-wrap] {\n    grid-column: span 21 / auto;\n  }\n\n  input:focus {\n    outline: none;\n    border: 1px solid var(--focus-background-color, var(--md-sys-color-surface-variant));\n  }\n  input[type='checkbox'] {\n    margin: 0;\n  }\n\n  @media screen and (max-width: 460px) {\n    .multi-column-form {\n      max-width: 100%;\n      grid-template-columns: repeat(12, 1fr);\n      grid-gap: 5px;\n    }\n    .multi-column-form legend {\n      grid-column: span 12;\n    }\n    .multi-column-form label {\n      grid-column: span 4 / auto;\n      text-align: left;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    }\n    .multi-column-form input,\n    .multi-column-form table,\n    .multi-column-form select,\n    .multi-column-form textarea,\n    .multi-column-form [custom-input] {\n      grid-column: span 8 / auto;\n      max-width: initial;\n      padding: var(--padding-default, var(--spacing-medium));\n      font: normal 15px var(--theme-font);\n    }\n    .multi-column-form input[type='checkbox'],\n    .multi-column-form input[type='radio'] {\n      justify-self: left;\n      align-self: center;\n      grid-column: span 1 / auto;\n      left: 0;\n      zoom: 1.4;\n    }\n\n    .multi-column-form input[type='checkbox'] + label,\n    .multi-column-form input[type='radio'] + label {\n      grid-column: span 11 / auto;\n      align-self: center;\n      position: relative;\n      left: -25px;\n    }\n    .multi-column-form [options-wrap] {\n      grid-column: span 12 / auto;\n      display: grid;\n      grid-gap: var(--padding-default, var(--spacing-small)) var(--padding-narrow, var(--spacing-small));\n      grid-template-columns: repeat(12, 1fr);\n    }\n    .multi-column-form [options-wrap] input[type='checkbox'] + label,\n    .multi-column-form [options-wrap] input[type='radio'] + label {\n      grid-column: span 5 / auto;\n      align-self: left;\n      left: -4%;\n      margin-right: 0;\n    }\n  }\n  @media (min-width: 481px) and (max-width: 1024px) {\n    .multi-column-form select {\n      max-width: calc(85% + 10px);\n    }\n  }\n  @media screen and (min-width: 1201px) and (max-width: 2000px) {\n    .multi-column-form {\n      grid-template-columns: repeat(36, 1fr);\n    }\n    .multi-column-form legend {\n      grid-column: span 36;\n    }\n    .multi-column-form input,\n    .multi-column-form table,\n    .multi-column-form select,\n    .multi-column-form textarea,\n    .multi-column-form [custom-input] {\n      max-width: 90%;\n    }\n    .multi-column-form select {\n      max-width: calc(90% + 18px);\n    }\n    .multi-column-form [options-wrap] {\n      grid-column: span 33 / auto;\n    }\n  }\n  @media screen and (min-width: 2001px) {\n    .multi-column-form {\n      grid-template-columns: repeat(48, 1fr);\n    }\n    .multi-column-form legend {\n      grid-column: span 48;\n    }\n    .multi-column-form input,\n    .multi-column-form table,\n    .multi-column-form select,\n    .multi-column-form textarea,\n    .multi-column-form [custom-input] {\n      max-width: 90%;\n    }\n    .multi-column-form select {\n      max-width: calc(90% + 18px);\n    }\n    .multi-column-form [options-wrap] {\n      grid-column: span 45 / auto;\n    }\n  }\n`\n"]}
+{"version":3,"file":"multi-column-form-styles.js","sourceRoot":"","sources":["../../../src/styles/multi-column-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LvC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MultiColumnFormStyles = css`\n  :host {\n    overflow: auto;\n    padding: var(--form-container-padding);\n  }\n\n  .multi-column-form {\n    display: grid;\n    grid-template-columns: repeat(24, 1fr);\n    grid-gap: var(--form-grid-gap);\n    grid-auto-rows: minmax(24px, auto);\n    max-width: var(--form-multi-column-max-width);\n    margin: var(--form-margin);\n  }\n  .multi-column-form fieldset {\n    display: contents;\n  }\n  .multi-column-form legend {\n    grid-column: span 24;\n    text-transform: capitalize;\n\n    padding: var(--legend-padding);\n    font: var(--legend-font);\n    color: var(--legend-text-color, var(--md-sys-color-on-surface-variant));\n    border-bottom: var(--legend-border-bottom);\n  }\n\n  .multi-column-form label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n    align-self: center;\n\n    color: var(--label-color, var(--md-sys-color-on-surface));\n    font: var(--label-font);\n  }\n\n  .multi-column-form input,\n  .multi-column-form table,\n  .multi-column-form select,\n  .multi-column-form textarea,\n  .multi-column-form [custom-input] {\n    grid-column: span 9;\n\n    border: var(--input-field-border);\n    border-radius: var(--input-field-border-radius);\n    padding: var(--input-field-padding);\n    font: var(--input-field-font);\n    max-width: 85%;\n  }\n  .multi-column-form select {\n    min-height: 25px;\n    max-width: calc(85% + 18px);\n  }\n\n  .multi-column-form input[type='checkbox'],\n  .multi-column-form input[type='radio'] {\n    justify-self: end;\n    align-self: center;\n    grid-column: span 3 / auto;\n    position: relative;\n    left: 17px;\n  }\n\n  .multi-column-form input[type='checkbox'] + label,\n  .multi-column-form input[type='radio'] + label {\n    padding-left: 17px;\n    text-align: left;\n    align-self: center;\n    grid-column: span 9 / auto;\n\n    font: var(--form-sublabel-font);\n    color: var(--form-sublabel-color, var(--md-sys-color-secondary));\n  }\n  .multi-column-form [options-wrap] {\n    grid-column: span 21 / auto;\n  }\n\n  input:focus {\n    outline: none;\n    border: 1px solid var(--focus-background-color, var(--md-sys-color-surface-variant));\n  }\n  input[type='checkbox'] {\n    margin: 0;\n  }\n\n  @media screen and (max-width: 460px) {\n    .multi-column-form {\n      max-width: 100%;\n      grid-template-columns: repeat(12, 1fr);\n      grid-gap: 5px;\n    }\n    .multi-column-form legend {\n      grid-column: span 12;\n    }\n    .multi-column-form label {\n      grid-column: span 4 / auto;\n      text-align: left;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    }\n    .multi-column-form input,\n    .multi-column-form table,\n    .multi-column-form select,\n    .multi-column-form textarea,\n    .multi-column-form [custom-input] {\n      grid-column: span 8 / auto;\n      max-width: initial;\n      padding: var(--padding-default, var(--spacing-medium));\n      font: normal 15px var(--theme-font);\n    }\n    .multi-column-form input[type='checkbox'],\n    .multi-column-form input[type='radio'] {\n      justify-self: left;\n      align-self: center;\n      grid-column: span 1 / auto;\n      left: 0;\n      zoom: 1.4;\n    }\n\n    .multi-column-form input[type='checkbox'] + label,\n    .multi-column-form input[type='radio'] + label {\n      grid-column: span 11 / auto;\n      align-self: center;\n      position: relative;\n      left: -25px;\n    }\n    .multi-column-form [options-wrap] {\n      grid-column: span 12 / auto;\n      display: grid;\n      grid-gap: var(--padding-default, var(--spacing-small)) var(--spacing-small, var(--spacing-small));\n      grid-template-columns: repeat(12, 1fr);\n    }\n    .multi-column-form [options-wrap] input[type='checkbox'] + label,\n    .multi-column-form [options-wrap] input[type='radio'] + label {\n      grid-column: span 5 / auto;\n      align-self: left;\n      left: -4%;\n      margin-right: 0;\n    }\n  }\n  @media (min-width: 481px) and (max-width: 1024px) {\n    .multi-column-form select {\n      max-width: calc(85% + 10px);\n    }\n  }\n  @media screen and (min-width: 1201px) and (max-width: 2000px) {\n    .multi-column-form {\n      grid-template-columns: repeat(36, 1fr);\n    }\n    .multi-column-form legend {\n      grid-column: span 36;\n    }\n    .multi-column-form input,\n    .multi-column-form table,\n    .multi-column-form select,\n    .multi-column-form textarea,\n    .multi-column-form [custom-input] {\n      max-width: 90%;\n    }\n    .multi-column-form select {\n      max-width: calc(90% + 18px);\n    }\n    .multi-column-form [options-wrap] {\n      grid-column: span 33 / auto;\n    }\n  }\n  @media screen and (min-width: 2001px) {\n    .multi-column-form {\n      grid-template-columns: repeat(48, 1fr);\n    }\n    .multi-column-form legend {\n      grid-column: span 48;\n    }\n    .multi-column-form input,\n    .multi-column-form table,\n    .multi-column-form select,\n    .multi-column-form textarea,\n    .multi-column-form [custom-input] {\n      max-width: 90%;\n    }\n    .multi-column-form select {\n      max-width: calc(90% + 18px);\n    }\n    .multi-column-form [options-wrap] {\n      grid-column: span 45 / auto;\n    }\n  }\n`\n"]}

package/dist/src/styles/search-form-styles.js

@@ -2,7 +2,8 @@ import { css } from 'lit';
 export const SearchFormStyles = css `
   :host {
     overflow: auto;
-    background-color: transparent;
+    background-color: var(--search-form-background-color, var(--md-sys-color-surface));
+    padding: var(--spacing-medium);
   }
 
   .search-form {
@@ -11,7 +12,6 @@ export const SearchFormStyles = css `
     grid-template-columns: repeat(24, 1fr);
     grid-gap: var(--form-grid-gap, var(--spacing-medium));
     grid-auto-rows: minmax(24px, auto);
-    background-color: var(--search-form-background-color, var(--md-sys-color-surface));
   }
   .search-form label {
     grid-column: span 3;
@@ -34,7 +34,7 @@ export const SearchFormStyles = css `
     font: var(--input-field-font);
     max-width: 85%;
     color: var(--input-field-color, var(--md-sys-color-on-surface-variant));
-    background-color: transparent;
+    background-color: var(--md-sys-color-surface-container-lowest);
   }
 
   .search-form select {
@@ -72,8 +72,8 @@ export const SearchFormStyles = css `
 
   [search] {
     position: absolute;
-    right: 1%;
-    bottom: 15px;
+    right: var(--spacing-small);
+    bottom: var(--spacing-none);
     color: var(--search-form-icon-color, var(--md-sys-color-primary));
   }
 
@@ -86,7 +86,6 @@ export const SearchFormStyles = css `
     .search-form {
       grid-template-columns: repeat(12, 1fr);
       grid-gap: var(--spacing-medium) var(--spacing-medium);
-      background-color: transparent;
 
       max-height: 100%;
       overflow-y: auto;
@@ -120,7 +119,7 @@ export const SearchFormStyles = css `
     }
 
     [search] {
-      right: 3%;
+      right: var(--spacing-tiny);
       color: var(--md-sys-color-on-surface);
     }
   }

package/dist/src/styles/search-form-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-form-styles.js","sourceRoot":"","sources":["../../../src/styles/search-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8JlC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const SearchFormStyles = css`\n  :host {\n    overflow: auto;\n    background-color: transparent;\n  }\n\n  .search-form {\n    position: relative;\n    display: grid;\n    grid-template-columns: repeat(24, 1fr);\n    grid-gap: var(--form-grid-gap, var(--spacing-medium));\n    grid-auto-rows: minmax(24px, auto);\n    background-color: var(--search-form-background-color, var(--md-sys-color-surface));\n  }\n  .search-form label {\n    grid-column: span 3;\n    text-align: right;\n    align-self: center;\n    text-transform: capitalize;\n\n    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n    color: var(--md-sys-color-on-primary-container);\n  }\n\n  .search-form input,\n  .search-form select {\n    grid-column: span 9;\n\n    border: var(--input-field-border);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n    border-radius: var(--input-field-border-radius);\n    padding: var(--input-field-padding, var(--spacing-tiny));\n    font: var(--input-field-font);\n    max-width: 85%;\n    color: var(--input-field-color, var(--md-sys-color-on-surface-variant));\n    background-color: transparent;\n  }\n\n  .search-form select {\n    min-height: 25px;\n    max-width: calc(85% + 18px);\n  }\n\n  .search-form input[type='checkbox'],\n  .search-form input[type='radio'] {\n    justify-self: end;\n    align-self: center;\n    grid-column: span 3 / auto;\n    position: relative;\n    left: 17px;\n  }\n\n  .search-form input[type='checkbox'] + label,\n  .search-form input[type='radio'] + label {\n    padding-left: 17px;\n    text-align: left;\n    align-self: center;\n    grid-column: span 9 / auto;\n\n    font: var(--form-sublabel-font);\n    color: var(--form-sublabel-color, var(--md-sys-color-secondary));\n  }\n\n  input:focus {\n    outline: none;\n  }\n\n  input[type='checkbox'] {\n    margin: 0;\n  }\n\n  [search] {\n    position: absolute;\n    right: 1%;\n    bottom: 15px;\n    color: var(--search-form-icon-color, var(--md-sys-color-primary));\n  }\n\n  input[readonly],\n  select[readonly] {\n    background-color: #f0f0f0;\n  }\n\n  @media screen and (max-width: 460px) {\n    .search-form {\n      grid-template-columns: repeat(12, 1fr);\n      grid-gap: var(--spacing-medium) var(--spacing-medium);\n      background-color: transparent;\n\n      max-height: 100%;\n      overflow-y: auto;\n    }\n    .search-form label {\n      grid-column: span 3;\n      padding-right: 5px;\n      align-self: center;\n      color: var(--md-sys-color-on-surface);\n    }\n    .search-form input,\n    .search-form select {\n      grid-column: span 8;\n      max-width: 100%;\n      color: var(--md-sys-color-on-surface);\n    }\n    .search-form input[type='checkbox'],\n    .search-form input[type='radio'] {\n      justify-self: end;\n      align-self: center;\n      grid-column: span 3 / auto;\n    }\n\n    .search-form input[type='checkbox'] + label,\n    .search-form input[type='radio'] + label {\n      grid-column: span 8 / auto;\n      align-self: center;\n      position: relative;\n      left: 5px;\n      color: var(--md-sys-color-on-surface);\n    }\n\n    [search] {\n      right: 3%;\n      color: var(--md-sys-color-on-surface);\n    }\n  }\n  @media (min-width: 461px) and (max-width: 1024px) {\n    .search-form select {\n      max-width: calc(85% + 10px);\n    }\n  }\n  @media screen and (min-width: 1201px) and (max-width: 2000px) {\n    .search-form {\n      grid-template-columns: repeat(36, 1fr);\n    }\n    .search-form input,\n    .search-form select {\n      max-width: 90%;\n    }\n    .search-form select {\n      max-width: calc(90% + 18px);\n    }\n  }\n\n  @media screen and (min-width: 2001px) {\n    .search-form {\n      grid-template-columns: repeat(48, 1fr);\n    }\n    .search-form input,\n    .search-form select {\n      max-width: 90%;\n    }\n    .search-form select {\n      max-width: calc(90% + 18px);\n    }\n    [search] {\n      right: 0.8%;\n    }\n  }\n`\n"]}
+{"version":3,"file":"search-form-styles.js","sourceRoot":"","sources":["../../../src/styles/search-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6JlC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const SearchFormStyles = css`\n  :host {\n    overflow: auto;\n    background-color: var(--search-form-background-color, var(--md-sys-color-surface));\n    padding: var(--spacing-medium);\n  }\n\n  .search-form {\n    position: relative;\n    display: grid;\n    grid-template-columns: repeat(24, 1fr);\n    grid-gap: var(--form-grid-gap, var(--spacing-medium));\n    grid-auto-rows: minmax(24px, auto);\n  }\n  .search-form label {\n    grid-column: span 3;\n    text-align: right;\n    align-self: center;\n    text-transform: capitalize;\n\n    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n    color: var(--md-sys-color-on-primary-container);\n  }\n\n  .search-form input,\n  .search-form select {\n    grid-column: span 9;\n\n    border: var(--input-field-border);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n    border-radius: var(--input-field-border-radius);\n    padding: var(--input-field-padding, var(--spacing-tiny));\n    font: var(--input-field-font);\n    max-width: 85%;\n    color: var(--input-field-color, var(--md-sys-color-on-surface-variant));\n    background-color: var(--md-sys-color-surface-container-lowest);\n  }\n\n  .search-form select {\n    min-height: 25px;\n    max-width: calc(85% + 18px);\n  }\n\n  .search-form input[type='checkbox'],\n  .search-form input[type='radio'] {\n    justify-self: end;\n    align-self: center;\n    grid-column: span 3 / auto;\n    position: relative;\n    left: 17px;\n  }\n\n  .search-form input[type='checkbox'] + label,\n  .search-form input[type='radio'] + label {\n    padding-left: 17px;\n    text-align: left;\n    align-self: center;\n    grid-column: span 9 / auto;\n\n    font: var(--form-sublabel-font);\n    color: var(--form-sublabel-color, var(--md-sys-color-secondary));\n  }\n\n  input:focus {\n    outline: none;\n  }\n\n  input[type='checkbox'] {\n    margin: 0;\n  }\n\n  [search] {\n    position: absolute;\n    right: var(--spacing-small);\n    bottom: var(--spacing-none);\n    color: var(--search-form-icon-color, var(--md-sys-color-primary));\n  }\n\n  input[readonly],\n  select[readonly] {\n    background-color: #f0f0f0;\n  }\n\n  @media screen and (max-width: 460px) {\n    .search-form {\n      grid-template-columns: repeat(12, 1fr);\n      grid-gap: var(--spacing-medium) var(--spacing-medium);\n\n      max-height: 100%;\n      overflow-y: auto;\n    }\n    .search-form label {\n      grid-column: span 3;\n      padding-right: 5px;\n      align-self: center;\n      color: var(--md-sys-color-on-surface);\n    }\n    .search-form input,\n    .search-form select {\n      grid-column: span 8;\n      max-width: 100%;\n      color: var(--md-sys-color-on-surface);\n    }\n    .search-form input[type='checkbox'],\n    .search-form input[type='radio'] {\n      justify-self: end;\n      align-self: center;\n      grid-column: span 3 / auto;\n    }\n\n    .search-form input[type='checkbox'] + label,\n    .search-form input[type='radio'] + label {\n      grid-column: span 8 / auto;\n      align-self: center;\n      position: relative;\n      left: 5px;\n      color: var(--md-sys-color-on-surface);\n    }\n\n    [search] {\n      right: var(--spacing-tiny);\n      color: var(--md-sys-color-on-surface);\n    }\n  }\n  @media (min-width: 461px) and (max-width: 1024px) {\n    .search-form select {\n      max-width: calc(85% + 10px);\n    }\n  }\n  @media screen and (min-width: 1201px) and (max-width: 2000px) {\n    .search-form {\n      grid-template-columns: repeat(36, 1fr);\n    }\n    .search-form input,\n    .search-form select {\n      max-width: 90%;\n    }\n    .search-form select {\n      max-width: calc(90% + 18px);\n    }\n  }\n\n  @media screen and (min-width: 2001px) {\n    .search-form {\n      grid-template-columns: repeat(48, 1fr);\n    }\n    .search-form input,\n    .search-form select {\n      max-width: 90%;\n    }\n    .search-form select {\n      max-width: calc(90% + 18px);\n    }\n    [search] {\n      right: 0.8%;\n    }\n  }\n`\n"]}

package/dist/stories/ox-filters-form-barcode.stories.d.ts

@@ -13,10 +13,6 @@ declare const _default: {
         urlParamsSensitive: {
             control: string;
         };
-        theme: {
-            control: string;
-            options: string[];
-        };
     };
 };
 export default _default;
@@ -29,6 +25,5 @@ interface ArgTypes {
     value?: object;
     filters?: object;
     urlParamsSensitive: boolean;
-    theme: 'light' | 'dark';
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-filters-form-barcode.stories.js

@@ -8,11 +8,10 @@ export default {
     argTypes: {
         value: { control: 'object' },
         filters: { control: 'object' },
-        urlParamsSensitive: { control: 'boolean' },
-        theme: { control: 'select', options: ['light', 'dark'] }
+        urlParamsSensitive: { control: 'boolean' }
     }
 };
-const Template = ({ value, filters, urlParamsSensitive, theme = 'light' }) => html `
+const Template = ({ value, filters, urlParamsSensitive }) => 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" />
@@ -58,10 +57,6 @@ const Template = ({ value, filters, urlParamsSensitive, theme = 'light' }) => ht
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="header">
     <div class="filters">
       <ox-filters-form-base

package/dist/stories/ox-filters-form-barcode.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-filters-form-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;MAsBvG,iBAAiB,CAAC,OAAO;;;;MAIzB,kBAAkB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;mCAqBG,KAAK;;;;;;iBAMvB,KAAK;mBACH,OAAO;gCACM,kBAAkB;0BACxB,CAAC,CAAc,EAAE,EAAE;IACnC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAC1C,CAAC;;;;;CAKR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE;QACP;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,IAAI;SACf;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACf;QACD;YACE,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO;oBACL;wBACE,OAAO,EAAE,EAAE;wBACX,KAAK,EAAE,EAAE;qBACV;oBACD;wBACE,OAAO,EAAE,KAAK;wBACd,KAAK,EAAE,KAAK;qBACb;oBACD;wBACE,OAAO,EAAE,KAAK;wBACd,KAAK,EAAE,KAAK;qBACb;iBACF,CAAA;YACH,CAAC;SACF;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,SAAS;SACpB;QACD;YACE,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,SAAS;SACpB;KACF;CACF,CAAA","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport '../src/filters/ox-filters-form-base.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-filters-form-barcode',\n  component: 'ox-filters-form-base',\n  argTypes: {\n    value: { control: 'object' },\n    filters: { control: 'object' },\n    urlParamsSensitive: { 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  value?: object\n  filters?: object\n  urlParamsSensitive: boolean\n  theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive, 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  <link href=\"/themes/form-theme.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    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <style>\n    body {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    .header {\n      padding: var(--spacing-small) var(--spacing-medium);\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=\"header\">\n    <div class=\"filters\">\n      <ox-filters-form-base\n        .value=${value}\n        .filters=${filters}\n        ?url-params-sensitive=${urlParamsSensitive}\n        @filters-change=${(e: CustomEvent) => {\n          console.log('filters changed', e.detail)\n        }}\n      >\n      </ox-filters-form-base>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  filters: [\n    {\n      name: 'test',\n      type: 'barcode',\n      label: 'name',\n      operator: 'eq'\n    },\n    {\n      name: 'active',\n      type: 'boolean',\n      label: 'active',\n      operator: 'eq'\n    },\n    {\n      name: 'sss',\n      type: 'select',\n      label: 'sss',\n      operator: 'eq',\n      options: () => {\n        return [\n          {\n            display: '',\n            value: ''\n          },\n          {\n            display: 'ABC',\n            value: 'ABC'\n          },\n          {\n            display: 'DEF',\n            value: 'DEF'\n          }\n        ]\n      }\n    },\n    {\n      name: 'range',\n      type: 'number',\n      label: 'range',\n      operator: 'between'\n    },\n    {\n      name: 'date-range',\n      type: 'datetime',\n      label: 'date',\n      operator: 'between'\n    }\n  ]\n}\n"]}
+{"version":3,"file":"ox-filters-form-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;MAsBtF,iBAAiB,CAAC,OAAO;;;;MAIzB,kBAAkB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;iBAuBf,KAAK;mBACH,OAAO;gCACM,kBAAkB;0BACxB,CAAC,CAAc,EAAE,EAAE;IACnC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAC1C,CAAC;;;;;CAKR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE;QACP;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,IAAI;SACf;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACf;QACD;YACE,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO;oBACL;wBACE,OAAO,EAAE,EAAE;wBACX,KAAK,EAAE,EAAE;qBACV;oBACD;wBACE,OAAO,EAAE,KAAK;wBACd,KAAK,EAAE,KAAK;qBACb;oBACD;wBACE,OAAO,EAAE,KAAK;wBACd,KAAK,EAAE,KAAK;qBACb;iBACF,CAAA;YACH,CAAC;SACF;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,SAAS;SACpB;QACD;YACE,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,SAAS;SACpB;KACF;CACF,CAAA","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport '../src/filters/ox-filters-form-base.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-filters-form-barcode',\n  component: 'ox-filters-form-base',\n  argTypes: {\n    value: { control: 'object' },\n    filters: { control: 'object' },\n    urlParamsSensitive: { 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  value?: object\n  filters?: object\n  urlParamsSensitive: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: 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  <link href=\"/themes/form-theme.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    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <style>\n    body {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    .header {\n      padding: var(--spacing-small) var(--spacing-medium);\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=\"header\">\n    <div class=\"filters\">\n      <ox-filters-form-base\n        .value=${value}\n        .filters=${filters}\n        ?url-params-sensitive=${urlParamsSensitive}\n        @filters-change=${(e: CustomEvent) => {\n          console.log('filters changed', e.detail)\n        }}\n      >\n      </ox-filters-form-base>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  filters: [\n    {\n      name: 'test',\n      type: 'barcode',\n      label: 'name',\n      operator: 'eq'\n    },\n    {\n      name: 'active',\n      type: 'boolean',\n      label: 'active',\n      operator: 'eq'\n    },\n    {\n      name: 'sss',\n      type: 'select',\n      label: 'sss',\n      operator: 'eq',\n      options: () => {\n        return [\n          {\n            display: '',\n            value: ''\n          },\n          {\n            display: 'ABC',\n            value: 'ABC'\n          },\n          {\n            display: 'DEF',\n            value: 'DEF'\n          }\n        ]\n      }\n    },\n    {\n      name: 'range',\n      type: 'number',\n      label: 'range',\n      operator: 'between'\n    },\n    {\n      name: 'date-range',\n      type: 'datetime',\n      label: 'date',\n      operator: 'between'\n    }\n  ]\n}\n"]}

package/dist/stories/ox-filters-form-base-bounded.stories.d.ts

@@ -14,10 +14,6 @@ declare const _default: {
         urlParamsSensitive: {
             control: string;
         };
-        theme: {
-            control: string;
-            options: string[];
-        };
     };
 };
 export default _default;
@@ -30,6 +26,5 @@ interface ArgTypes {
     value?: FilterValue[];
     filters?: FilterConfig[];
     urlParamsSensitive: boolean;
-    theme: 'light' | 'dark';
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-filters-form-base-bounded.stories.js

@@ -9,11 +9,10 @@ export default {
     argTypes: {
         value: { control: 'object' },
         filters: { control: 'object' },
-        urlParamsSensitive: { control: 'boolean' },
-        theme: { control: 'select', options: ['light', 'dark'] }
+        urlParamsSensitive: { control: 'boolean' }
     }
 };
-const Template = ({ value, filters, urlParamsSensitive, theme = 'light' }) => html `
+const Template = ({ value, filters, urlParamsSensitive }) => 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" />
@@ -59,10 +58,6 @@ const Template = ({ value, filters, urlParamsSensitive, theme = 'light' }) => ht
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="header">
     <div class="filters">
       <ox-filters-form-base

package/dist/stories/ox-filters-form-base-bounded.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-filters-form-base-bounded.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base-bounded.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\nimport '../src/filters/ox-filters-form-base.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'\n\nexport default {\n  title: 'ox-filters-form-base bounded',\n  component: 'ox-filters-form-base',\n  argTypes: {\n    value: { control: 'object' },\n    filters: { control: 'object' },\n    urlParamsSensitive: { 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  value?: FilterValue[]\n  filters?: FilterConfig[]\n  urlParamsSensitive: boolean\n  theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive, 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  <link href=\"/themes/form-theme.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    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <style>\n    body {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    .header {\n      padding: var(--spacing-medium);\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=\"header\">\n    <div class=\"filters\">\n      <ox-filters-form-base\n        .value=${value!}\n        .filters=${filters!}\n        ?url-params-sensitive=${urlParamsSensitive}\n        @filters-change=${(e: CustomEvent) => {}}\n      >\n      </ox-filters-form-base>\n    </div>\n  </div>\n`\n\nconst WAREHOUSE = [\n  {\n    id: '01',\n    name: '제 1 창고',\n    zones: [\n      {\n        id: 'W1Z001',\n        name: 'Zone 01-001',\n        locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']\n      },\n      {\n        id: 'W1Z002',\n        name: 'Zone 01-002',\n        locations: ['L01-002-01', 'L01-002-02', 'L01-002-03', 'L01-002-04', 'L01-002-05']\n      }\n    ]\n  },\n  {\n    id: '02',\n    name: '제 2 창고',\n    zones: [\n      {\n        id: 'W2Z001',\n        name: 'Zone 02-001',\n        locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']\n      },\n      {\n        id: 'W2Z002',\n        name: 'Zone 02-002',\n        locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']\n      }\n    ]\n  }\n]\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  filters: [\n    {\n      name: 'warehouse',\n      type: 'select',\n      label: 'warehouse',\n      operator: 'eq',\n      value: '01',\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        return [\n          {\n            display: '',\n            value: ''\n          }\n        ].concat(\n          WAREHOUSE.map(w => {\n            return {\n              display: w.name,\n              value: w.id\n            }\n          })\n        )\n      }\n    },\n    {\n      name: 'zone',\n      type: 'select',\n      label: 'zone',\n      operator: 'eq',\n      value: 'W1Z001',\n      boundTo: ['warehouse'],\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        const formData = new FormData(await form.form)\n        const warehouse = formData?.get('warehouse')\n        console.log('warehouse', warehouse)\n\n        const targetWH = warehouse && WAREHOUSE.find(w => w.id == warehouse)\n        const zones = targetWH\n          ? targetWH.zones\n          : WAREHOUSE.reduce((sum, warehouse) => {\n              sum = sum.concat(warehouse.zones)\n              return sum\n            }, [] as any[])\n\n        return [\n          {\n            display: '',\n            value: ''\n          }\n        ].concat(\n          zones.map((z: any) => {\n            return {\n              display: z.name,\n              value: z.id\n            }\n          })\n        )\n      }\n    },\n    {\n      name: 'location',\n      type: 'select',\n      label: 'location',\n      operator: 'eq',\n      value: '',\n      boundTo: ['warehouse', 'zone'],\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        const formData = new FormData(await form.form)\n        const warehouse = formData?.get('warehouse')\n        const zone = formData?.get('zone')\n        console.log('warehouse, zone', warehouse, zone)\n\n        const targetWH = (warehouse && WAREHOUSE.find(w => w.id == warehouse)) || null\n        const targetZone = zone && targetWH?.zones.find(z => z.id == zone)\n        return targetZone ? ['', ...targetZone.locations] : []\n      }\n    }\n  ]\n}\n"]}
+{"version":3,"file":"ox-filters-form-base-bounded.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base-bounded.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\nimport '../src/filters/ox-filters-form-base.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'\n\nexport default {\n  title: 'ox-filters-form-base bounded',\n  component: 'ox-filters-form-base',\n  argTypes: {\n    value: { control: 'object' },\n    filters: { control: 'object' },\n    urlParamsSensitive: { 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  value?: FilterValue[]\n  filters?: FilterConfig[]\n  urlParamsSensitive: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: 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  <link href=\"/themes/form-theme.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    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <style>\n    body {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    .header {\n      padding: var(--spacing-medium);\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=\"header\">\n    <div class=\"filters\">\n      <ox-filters-form-base\n        .value=${value!}\n        .filters=${filters!}\n        ?url-params-sensitive=${urlParamsSensitive}\n        @filters-change=${(e: CustomEvent) => {}}\n      >\n      </ox-filters-form-base>\n    </div>\n  </div>\n`\n\nconst WAREHOUSE = [\n  {\n    id: '01',\n    name: '제 1 창고',\n    zones: [\n      {\n        id: 'W1Z001',\n        name: 'Zone 01-001',\n        locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']\n      },\n      {\n        id: 'W1Z002',\n        name: 'Zone 01-002',\n        locations: ['L01-002-01', 'L01-002-02', 'L01-002-03', 'L01-002-04', 'L01-002-05']\n      }\n    ]\n  },\n  {\n    id: '02',\n    name: '제 2 창고',\n    zones: [\n      {\n        id: 'W2Z001',\n        name: 'Zone 02-001',\n        locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']\n      },\n      {\n        id: 'W2Z002',\n        name: 'Zone 02-002',\n        locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']\n      }\n    ]\n  }\n]\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  filters: [\n    {\n      name: 'warehouse',\n      type: 'select',\n      label: 'warehouse',\n      operator: 'eq',\n      value: '01',\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        return [\n          {\n            display: '',\n            value: ''\n          }\n        ].concat(\n          WAREHOUSE.map(w => {\n            return {\n              display: w.name,\n              value: w.id\n            }\n          })\n        )\n      }\n    },\n    {\n      name: 'zone',\n      type: 'select',\n      label: 'zone',\n      operator: 'eq',\n      value: 'W1Z001',\n      boundTo: ['warehouse'],\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        const formData = new FormData(await form.form)\n        const warehouse = formData?.get('warehouse')\n        console.log('warehouse', warehouse)\n\n        const targetWH = warehouse && WAREHOUSE.find(w => w.id == warehouse)\n        const zones = targetWH\n          ? targetWH.zones\n          : WAREHOUSE.reduce((sum, warehouse) => {\n              sum = sum.concat(warehouse.zones)\n              return sum\n            }, [] as any[])\n\n        return [\n          {\n            display: '',\n            value: ''\n          }\n        ].concat(\n          zones.map((z: any) => {\n            return {\n              display: z.name,\n              value: z.id\n            }\n          })\n        )\n      }\n    },\n    {\n      name: 'location',\n      type: 'select',\n      label: 'location',\n      operator: 'eq',\n      value: '',\n      boundTo: ['warehouse', 'zone'],\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        const formData = new FormData(await form.form)\n        const warehouse = formData?.get('warehouse')\n        const zone = formData?.get('zone')\n        console.log('warehouse, zone', warehouse, zone)\n\n        const targetWH = (warehouse && WAREHOUSE.find(w => w.id == warehouse)) || null\n        const targetZone = zone && targetWH?.zones.find(z => z.id == zone)\n        return targetZone ? ['', ...targetZone.locations] : []\n      }\n    }\n  ]\n}\n"]}

package/dist/stories/ox-filters-form-base-change-handler.stories.d.ts

@@ -14,10 +14,6 @@ declare const _default: {
         urlParamsSensitive: {
             control: string;
         };
-        theme: {
-            control: string;
-            options: string[];
-        };
     };
 };
 export default _default;
@@ -30,6 +26,5 @@ interface ArgTypes {
     value?: FilterValue[];
     filters?: FilterConfig[];
     urlParamsSensitive: boolean;
-    theme: 'light' | 'dark';
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-filters-form-base-change-handler.stories.js

@@ -9,11 +9,10 @@ export default {
     argTypes: {
         value: { control: 'object' },
         filters: { control: 'object' },
-        urlParamsSensitive: { control: 'boolean' },
-        theme: { control: 'select', options: ['light', 'dark'] }
+        urlParamsSensitive: { control: 'boolean' }
     }
 };
-const Template = ({ value, filters, urlParamsSensitive, theme = 'light' }) => html `
+const Template = ({ value, filters, urlParamsSensitive }) => 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" />
@@ -59,10 +58,6 @@ const Template = ({ value, filters, urlParamsSensitive, theme = 'light' }) => ht
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="header">
     <div class="filters">
       <ox-filters-form-base

package/dist/stories/ox-filters-form-base-change-handler.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-filters-form-base-change-handler.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base-change-handler.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\nimport '../src/filters/ox-filters-form-base.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'\n\nexport default {\n  title: 'ox-filters-form-base change-handler',\n  component: 'ox-filters-form-base',\n  argTypes: {\n    value: { control: 'object' },\n    filters: { control: 'object' },\n    urlParamsSensitive: { 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  value?: FilterValue[]\n  filters?: FilterConfig[]\n  urlParamsSensitive: boolean\n  theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive, 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  <link href=\"/themes/form-theme.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    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <style>\n    body {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    .header {\n      padding: var(--spacing-medium);\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=\"header\">\n    <div class=\"filters\">\n      <ox-filters-form-base\n        .value=${value!}\n        .filters=${filters!}\n        ?url-params-sensitive=${urlParamsSensitive}\n        @filters-change=${(e: CustomEvent) => {\n          const { filters } = e.detail\n          const { value } = e.currentTarget as any\n          console.log('filters-change event fired', filters, value, e.currentTarget)\n        }}\n      >\n      </ox-filters-form-base>\n    </div>\n  </div>\n`\n\nconst WAREHOUSE = [\n  {\n    id: '01',\n    name: '제 1 창고',\n    zones: [\n      {\n        id: 'W1Z001',\n        name: 'Zone 01-001',\n        locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']\n      },\n      {\n        id: 'W1Z002',\n        name: 'Zone 01-002',\n        locations: ['L01-002-01', 'L01-002-02', 'L01-002-03', 'L01-002-04', 'L01-002-05']\n      }\n    ]\n  },\n  {\n    id: '02',\n    name: '제 2 창고',\n    zones: [\n      {\n        id: 'W2Z001',\n        name: 'Zone 02-001',\n        locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']\n      },\n      {\n        id: 'W2Z002',\n        name: 'Zone 02-002',\n        locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']\n      }\n    ]\n  }\n]\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  filters: [\n    {\n      name: 'warehouse',\n      type: 'select',\n      label: 'warehouse',\n      operator: 'eq',\n      value: '01',\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        return [\n          {\n            display: '',\n            value: ''\n          }\n        ].concat(\n          WAREHOUSE.map(w => {\n            return {\n              display: w.name,\n              value: w.id\n            }\n          })\n        )\n      },\n      onchange: async (value: any, form: OxFiltersFormBase) => {\n        await sleep(1000)\n        console.log(\"won't submit..\")\n        return false\n      }\n    },\n    {\n      name: 'zone',\n      type: 'select',\n      label: 'zone',\n      operator: 'eq',\n      value: 'W1Z001',\n      boundTo: ['warehouse'],\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        const formData = new FormData(await form.form)\n        const warehouse = formData?.get('warehouse')\n        console.log('warehouse', warehouse)\n\n        const targetWH = warehouse && WAREHOUSE.find(w => w.id == warehouse)\n        const zones = targetWH\n          ? targetWH.zones\n          : WAREHOUSE.reduce((sum, warehouse) => {\n              sum = sum.concat(warehouse.zones)\n              return sum\n            }, [] as any[])\n\n        return [\n          {\n            display: '',\n            value: ''\n          }\n        ].concat(\n          zones.map((z: any) => {\n            return {\n              display: z.name,\n              value: z.id\n            }\n          })\n        )\n      },\n      onchange: () => {\n        return false\n      }\n    },\n    {\n      name: 'location',\n      type: 'select',\n      label: 'location',\n      operator: 'eq',\n      value: '',\n      boundTo: ['warehouse', 'zone'],\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        const formData = new FormData(await form.form)\n        const warehouse = formData?.get('warehouse')\n        const zone = formData?.get('zone')\n        console.log('warehouse, zone', warehouse, zone)\n\n        const targetWH = (warehouse && WAREHOUSE.find(w => w.id == warehouse)) || null\n        const targetZone = zone && targetWH?.zones.find(z => z.id == zone)\n        return targetZone ? ['', ...targetZone.locations] : []\n      }\n    }\n  ]\n}\n"]}
+{"version":3,"file":"ox-filters-form-base-change-handler.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base-change-handler.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\nimport '../src/filters/ox-filters-form-base.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'\n\nexport default {\n  title: 'ox-filters-form-base change-handler',\n  component: 'ox-filters-form-base',\n  argTypes: {\n    value: { control: 'object' },\n    filters: { control: 'object' },\n    urlParamsSensitive: { 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  value?: FilterValue[]\n  filters?: FilterConfig[]\n  urlParamsSensitive: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: 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  <link href=\"/themes/form-theme.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    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <style>\n    body {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    .header {\n      padding: var(--spacing-medium);\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=\"header\">\n    <div class=\"filters\">\n      <ox-filters-form-base\n        .value=${value!}\n        .filters=${filters!}\n        ?url-params-sensitive=${urlParamsSensitive}\n        @filters-change=${(e: CustomEvent) => {\n          const { filters } = e.detail\n          const { value } = e.currentTarget as any\n          console.log('filters-change event fired', filters, value, e.currentTarget)\n        }}\n      >\n      </ox-filters-form-base>\n    </div>\n  </div>\n`\n\nconst WAREHOUSE = [\n  {\n    id: '01',\n    name: '제 1 창고',\n    zones: [\n      {\n        id: 'W1Z001',\n        name: 'Zone 01-001',\n        locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']\n      },\n      {\n        id: 'W1Z002',\n        name: 'Zone 01-002',\n        locations: ['L01-002-01', 'L01-002-02', 'L01-002-03', 'L01-002-04', 'L01-002-05']\n      }\n    ]\n  },\n  {\n    id: '02',\n    name: '제 2 창고',\n    zones: [\n      {\n        id: 'W2Z001',\n        name: 'Zone 02-001',\n        locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']\n      },\n      {\n        id: 'W2Z002',\n        name: 'Zone 02-002',\n        locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']\n      }\n    ]\n  }\n]\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  filters: [\n    {\n      name: 'warehouse',\n      type: 'select',\n      label: 'warehouse',\n      operator: 'eq',\n      value: '01',\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        return [\n          {\n            display: '',\n            value: ''\n          }\n        ].concat(\n          WAREHOUSE.map(w => {\n            return {\n              display: w.name,\n              value: w.id\n            }\n          })\n        )\n      },\n      onchange: async (value: any, form: OxFiltersFormBase) => {\n        await sleep(1000)\n        console.log(\"won't submit..\")\n        return false\n      }\n    },\n    {\n      name: 'zone',\n      type: 'select',\n      label: 'zone',\n      operator: 'eq',\n      value: 'W1Z001',\n      boundTo: ['warehouse'],\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        const formData = new FormData(await form.form)\n        const warehouse = formData?.get('warehouse')\n        console.log('warehouse', warehouse)\n\n        const targetWH = warehouse && WAREHOUSE.find(w => w.id == warehouse)\n        const zones = targetWH\n          ? targetWH.zones\n          : WAREHOUSE.reduce((sum, warehouse) => {\n              sum = sum.concat(warehouse.zones)\n              return sum\n            }, [] as any[])\n\n        return [\n          {\n            display: '',\n            value: ''\n          }\n        ].concat(\n          zones.map((z: any) => {\n            return {\n              display: z.name,\n              value: z.id\n            }\n          })\n        )\n      },\n      onchange: () => {\n        return false\n      }\n    },\n    {\n      name: 'location',\n      type: 'select',\n      label: 'location',\n      operator: 'eq',\n      value: '',\n      boundTo: ['warehouse', 'zone'],\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        const formData = new FormData(await form.form)\n        const warehouse = formData?.get('warehouse')\n        const zone = formData?.get('zone')\n        console.log('warehouse, zone', warehouse, zone)\n\n        const targetWH = (warehouse && WAREHOUSE.find(w => w.id == warehouse)) || null\n        const targetZone = zone && targetWH?.zones.find(z => z.id == zone)\n        return targetZone ? ['', ...targetZone.locations] : []\n      }\n    }\n  ]\n}\n"]}

package/dist/stories/ox-filters-form-base-page-preference.stories.js

@@ -15,9 +15,9 @@ export default {
 const Template = ({ value, filters, urlParamsSensitive }) => html `
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/form-theme.css" rel="stylesheet" />
-  <link href="/themes/input-theme.css" 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="/themes/form-theme.css" rel="stylesheet" />
 
   <link
@@ -40,24 +40,6 @@ const Template = ({ value, filters, urlParamsSensitive }) => html `
   </style>
 
   <style>
-    ox-filters-form-base {
-      --input-gap-vertical: 8px;
-      --input-gap-horizontal: 16px;
-
-      --ox-filters-input-placeholder-color: var(--primary-color);
-
-      --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
-      --ox-filters-input-focus-border: 1px solid var(--primary-color);
-      --ox-filters-input-font: normal 14px var(--theme-font);
-      --ox-filters-input-color: var(--primary-text-color);
-      --ox-filters-input-focus-color: var(--primary-color);
-      --ox-filters-label-font: normal 14px var(--theme-font);
-      --ox-filters-label-color: var(--primary-text-color);
-
-      --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
-      --ox-filters-input-padding: 6px 2px;
-    }
-
     div.filters {
       position: relative;
     }

package/dist/stories/ox-filters-form-base-page-preference.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-filters-form-base-page-preference.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base-page-preference.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/filters/ox-filters-form-base.js'\nimport '../src/filters/ox-filter-personalizer.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { sleep } from '@operato/utils'\nimport { CommonHeaderStyles } from '@operato/styles'\n\nimport { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'\nimport { PersonalFilterPreference } from '../src/types.js'\n\nexport default {\n  title: 'ox-filters-form-base page-preference',\n  component: 'ox-filters-form-base',\n  argTypes: {\n    value: { control: 'object' },\n    filters: { control: 'object' },\n    urlParamsSensitive: { 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  value?: FilterValue[]\n  filters?: FilterConfig[]\n  urlParamsSensitive: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: 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/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/input-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.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    body {\n      height: 500px;\n    }\n  </style>\n\n  <style>\n    ox-filters-form-base {\n      --input-gap-vertical: 8px;\n      --input-gap-horizontal: 16px;\n\n      --ox-filters-input-placeholder-color: var(--primary-color);\n\n      --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n      --ox-filters-input-focus-border: 1px solid var(--primary-color);\n      --ox-filters-input-font: normal 14px var(--theme-font);\n      --ox-filters-input-color: var(--primary-text-color);\n      --ox-filters-input-focus-color: var(--primary-color);\n      --ox-filters-label-font: normal 14px var(--theme-font);\n      --ox-filters-label-color: var(--primary-text-color);\n\n      --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n      --ox-filters-input-padding: 6px 2px;\n    }\n\n    div.filters {\n      position: relative;\n    }\n\n    ox-filter-personalizer {\n      position: absolute;\n      top: 0;\n      right: 0;\n    }\n\n    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <div class=\"header\">\n    <div class=\"filters\">\n      <ox-filters-form-base\n        .value=${value!}\n        .filters=${filters!}\n        ?url-params-sensitive=${urlParamsSensitive}\n        .personalConfigProvider=${{\n          async load() {\n            await sleep(1000)\n            return {\n              filters: [\n                { name: 'name', hidden: false, value: 'abc' },\n                { name: 'description', hidden: true }\n              ]\n            }\n          },\n          async save(preference: PersonalFilterPreference) {\n            await sleep(1000)\n            console.log('saving preference', preference)\n            return preference\n          },\n          async reset() {\n            await sleep(1000)\n          }\n        }}\n        @filters-change=${(e: CustomEvent) => {\n          console.log('filters changed', e.detail)\n        }}\n      >\n        <ox-filter-personalizer slot=\"setting\"></ox-filter-personalizer>\n      </ox-filters-form-base>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  filters: [\n    {\n      name: 'search',\n      type: 'search',\n      label: 'search',\n      operator: 'eq'\n    },\n    {\n      name: 'test',\n      type: 'string',\n      label: 'name',\n      operator: 'eq',\n      value: 'No Name'\n    },\n    {\n      name: 'active',\n      type: 'boolean',\n      label: 'active',\n      operator: 'eq',\n      value: true,\n      onchange: (value, formBase: OxFiltersFormBase) => {\n        const sss = formBase.getFieldByName('sss') as HTMLInputElement\n        sss.value = value ? 'DEF' : 'ABC'\n\n        return false\n      }\n    },\n    {\n      name: 'sss',\n      type: 'select',\n      label: 'sss',\n      operator: 'eq',\n      options: () => {\n        return [\n          {\n            display: '',\n            value: ''\n          },\n          {\n            display: 'ABC',\n            value: 'ABC'\n          },\n          {\n            display: 'DEF',\n            value: 'DEF'\n          }\n        ]\n      }\n    },\n    {\n      name: 'range',\n      type: 'number',\n      label: 'range',\n      operator: 'between'\n    },\n    {\n      name: 'date-range',\n      type: 'date',\n      label: 'date',\n      operator: 'between',\n      value: [\n        { name: 'week', params: { relativeWeeks: -1 } },\n        { name: 'today', params: { relativeDays: +1 } }\n      ]\n    }\n  ]\n}\n"]}
+{"version":3,"file":"ox-filters-form-base-page-preference.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base-page-preference.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/filters/ox-filters-form-base.js'\nimport '../src/filters/ox-filter-personalizer.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { sleep } from '@operato/utils'\nimport { CommonHeaderStyles } from '@operato/styles'\n\nimport { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'\nimport { PersonalFilterPreference } from '../src/types.js'\n\nexport default {\n  title: 'ox-filters-form-base page-preference',\n  component: 'ox-filters-form-base',\n  argTypes: {\n    value: { control: 'object' },\n    filters: { control: 'object' },\n    urlParamsSensitive: { 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  value?: FilterValue[]\n  filters?: FilterConfig[]\n  urlParamsSensitive: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: 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  <link href=\"/themes/form-theme.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    body {\n      height: 500px;\n    }\n  </style>\n\n  <style>\n    div.filters {\n      position: relative;\n    }\n\n    ox-filter-personalizer {\n      position: absolute;\n      top: 0;\n      right: 0;\n    }\n\n    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <div class=\"header\">\n    <div class=\"filters\">\n      <ox-filters-form-base\n        .value=${value!}\n        .filters=${filters!}\n        ?url-params-sensitive=${urlParamsSensitive}\n        .personalConfigProvider=${{\n          async load() {\n            await sleep(1000)\n            return {\n              filters: [\n                { name: 'name', hidden: false, value: 'abc' },\n                { name: 'description', hidden: true }\n              ]\n            }\n          },\n          async save(preference: PersonalFilterPreference) {\n            await sleep(1000)\n            console.log('saving preference', preference)\n            return preference\n          },\n          async reset() {\n            await sleep(1000)\n          }\n        }}\n        @filters-change=${(e: CustomEvent) => {\n          console.log('filters changed', e.detail)\n        }}\n      >\n        <ox-filter-personalizer slot=\"setting\"></ox-filter-personalizer>\n      </ox-filters-form-base>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  filters: [\n    {\n      name: 'search',\n      type: 'search',\n      label: 'search',\n      operator: 'eq'\n    },\n    {\n      name: 'test',\n      type: 'string',\n      label: 'name',\n      operator: 'eq',\n      value: 'No Name'\n    },\n    {\n      name: 'active',\n      type: 'boolean',\n      label: 'active',\n      operator: 'eq',\n      value: true,\n      onchange: (value, formBase: OxFiltersFormBase) => {\n        const sss = formBase.getFieldByName('sss') as HTMLInputElement\n        sss.value = value ? 'DEF' : 'ABC'\n\n        return false\n      }\n    },\n    {\n      name: 'sss',\n      type: 'select',\n      label: 'sss',\n      operator: 'eq',\n      options: () => {\n        return [\n          {\n            display: '',\n            value: ''\n          },\n          {\n            display: 'ABC',\n            value: 'ABC'\n          },\n          {\n            display: 'DEF',\n            value: 'DEF'\n          }\n        ]\n      }\n    },\n    {\n      name: 'range',\n      type: 'number',\n      label: 'range',\n      operator: 'between'\n    },\n    {\n      name: 'date-range',\n      type: 'date',\n      label: 'date',\n      operator: 'between',\n      value: [\n        { name: 'week', params: { relativeWeeks: -1 } },\n        { name: 'today', params: { relativeDays: +1 } }\n      ]\n    }\n  ]\n}\n"]}