@operato/form 1.0.0-beta.4 → 1.0.0-beta.43

package/dist/src/filters/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/filters/registry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAGjD,IAAI,SAAS,GAET;IACF,MAAM,EAAE,CAAC,WAAW,CAAC;IACrB,IAAI,EAAE,CAAC,WAAW,CAAC;IACnB,KAAK,EAAE,CAAC,WAAW,CAAC;IACpB,GAAG,EAAE,CAAC,WAAW,CAAC;IAClB,OAAO,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC;IACzC,KAAK,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC;IACvC,MAAM,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC;IACxC,MAAM,EAAE,CAAC,YAAY,CAAC;IACtB,OAAO,EAAE,CAAC,cAAc,CAAC;IACzB,QAAQ,EAAE,CAAC,cAAc,CAAC;IAC1B,KAAK,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC;IACrC,IAAI,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC;IACpC,IAAI,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC;IACpC,IAAI,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC;IACpC,QAAQ,EAAE,CAAC,WAAW,EAAE,eAAe,CAAC;IACxC,KAAK,EAAE,CAAC,WAAW,CAAC;IACpB,QAAQ,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC;IAC1C,IAAI,EAAE,CAAC,WAAW,CAAC;IACnB,KAAK,EAAE,CAAC,WAAW,CAAC;IACpB,KAAK,EAAE,CAAC,WAAW,CAAC;IACpB,OAAO,EAAE,CAAC,kBAAkB,CAAC;IAC7B,OAAO,EAAE,CAAC,kBAAkB,CAAC;CAC9B,CAAA;AAED,MAAM,UAAU,sBAAsB,CAAC,IAAY,EAAE,QAAgC;IACnF,SAAS,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAA;AAC5B,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,IAAY;IACnD,OAAO,SAAS,CAAC,IAAI,CAAC,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,kBAAkB;IAChC,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;AACzB,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,IAAY;IAC5C,IAAI,OAAO,IAAI,IAAI,UAAU,EAAE;QAC7B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,SAAS,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;AACnD,CAAC","sourcesContent":["import { FilterCheckbox } from './filter-checkbox.js'\nimport { FilterInputBarcode } from './filter-input-barcode.js'\nimport { FilterInput } from './filter-input.js'\nimport { FilterRangeDate } from './filter-range-date.js'\nimport { FilterRangeNumber } from './filter-range-number.js'\nimport { FilterSelect } from './filter-select.js'\nimport { FilterSelectRenderer } from './types.js'\n\nvar RENDERERS: {\n  [name: string]: FilterSelectRenderer[]\n} = {\n  string: [FilterInput],\n  text: [FilterInput],\n  email: [FilterInput],\n  tel: [FilterInput],\n  integer: [FilterInput, FilterRangeNumber],\n  float: [FilterInput, FilterRangeNumber],\n  number: [FilterInput, FilterRangeNumber],\n  select: [FilterSelect],\n  boolean: [FilterCheckbox],\n  checkbox: [FilterCheckbox],\n  month: [FilterInput, FilterRangeDate],\n  week: [FilterInput, FilterRangeDate],\n  date: [FilterInput, FilterRangeDate],\n  time: [FilterInput, FilterRangeDate],\n  datetime: [FilterInput, FilterRangeDate],\n  color: [FilterInput],\n  progress: [FilterInput, FilterRangeNumber],\n  link: [FilterInput],\n  image: [FilterInput],\n  json5: [FilterInput],\n  scanner: [FilterInputBarcode],\n  barcode: [FilterInputBarcode]\n}\n\nexport function registerFilterRenderer(type: string, renderer: FilterSelectRenderer[]) {\n  RENDERERS[type] = renderer\n}\n\nexport function unregisterFilterRenderer(type: string): void {\n  delete RENDERERS[type]\n}\n\nexport function getFilterRenderers(): { [name: string]: FilterSelectRenderer[] } {\n  return { ...RENDERERS }\n}\n\nexport function getFilterRenderer(type: string): FilterSelectRenderer[] {\n  if (typeof type == 'function') {\n    return type\n  }\n\n  return RENDERERS[type || 'text'] || [FilterInput]\n}\n"]}

package/dist/src/filters/types.d.ts

@@ -0,0 +1,17 @@
+import { TemplateResult } from 'lit-html';
+export declare type FilterOperator = 'search' | 'eq' | 'between' | 'gte' | 'lte' | 'is_not_true' | 'in' | 'like' | 'i_like' | 'noteq' | 'is_empty_num_id' | 'is_blank' | 'is_present' | 'is_not_false' | 'is_true' | 'is_false' | 'is_not_null' | 'is_null' | 'notin_with_null' | 'notin' | 'gt' | 'lt' | 'i_nlike' | 'nlike';
+export declare type FilterConfig = {
+    name: string;
+    label: string;
+    type: string;
+    operator?: FilterOperator;
+    options?: {
+        [key: string]: any;
+    };
+};
+export declare type FilterValue = {
+    name: string;
+    operator: FilterOperator;
+    value: string | number | boolean | string[] | number[] | undefined;
+};
+export declare type FilterSelectRenderer = (filter: FilterConfig, value: string | number | boolean | string[] | number[] | any | undefined, owner: Element) => TemplateResult | string | void;

package/dist/src/filters/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/src/filters/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/filters/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit-html'\n\nexport type FilterOperator =\n  | 'search'\n  | 'eq'\n  | 'between'\n  | 'gte'\n  | 'lte'\n  | 'is_not_true'\n  | 'in'\n  | 'like'\n  | 'i_like'\n  | 'noteq'\n  | 'is_empty_num_id'\n  | 'is_blank'\n  | 'is_present'\n  | 'is_not_false'\n  | 'is_true'\n  | 'is_false'\n  | 'is_not_null'\n  | 'is_null'\n  | 'notin_with_null'\n  | 'notin'\n  | 'gt'\n  | 'lt'\n  | 'i_nlike'\n  | 'nlike'\n\nexport type FilterConfig = {\n  name: string\n  label: string\n  type: string\n  operator?: FilterOperator\n  options?: { [key: string]: any }\n}\n\nexport type FilterValue = {\n  name: string\n  operator: FilterOperator\n  value: string | number | boolean | string[] | number[] | undefined\n}\n\nexport type FilterSelectRenderer = (\n  filter: FilterConfig,\n  value: string | number | boolean | string[] | number[] | any | undefined,\n  owner: Element\n) => TemplateResult | string | void\n"]}

package/dist/src/index.d.ts

@@ -1,3 +1,4 @@
 export * from './styles';
 export * from './components/ox-search-form';
 export * from './components/ox-file-uploader';
+export * from './filters';

package/dist/src/index.js

@@ -1,4 +1,5 @@
 export * from './styles';
 export * from './components/ox-search-form';
 export * from './components/ox-file-uploader';
+export * from './filters';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,6BAA6B,CAAA;AAC3C,cAAc,+BAA+B,CAAA","sourcesContent":["export * from './styles'\nexport * from './components/ox-search-form'\nexport * from './components/ox-file-uploader'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,6BAA6B,CAAA;AAC3C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,WAAW,CAAA","sourcesContent":["export * from './styles'\nexport * from './components/ox-search-form'\nexport * from './components/ox-file-uploader'\nexport * from './filters'\n"]}

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

@@ -0,0 +1,29 @@
+import '../src/filters/ox-filters-form-base.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        value: {
+            control: string;
+        };
+        filters: {
+            control: string;
+        };
+        urlParamsSensitive: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    value?: object;
+    filters?: object;
+    urlParamsSensitive: boolean;
+}
+export declare const Regular: Story<ArgTypes>;

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

@@ -0,0 +1,82 @@
+import '../src/filters/ox-filters-form-base.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-filters-form-barcode',
+    component: 'ox-filters-form-barcode',
+    argTypes: {
+        value: { control: 'object' },
+        filters: { control: 'object' },
+        urlParamsSensitive: { control: 'boolean' }
+    }
+};
+const Template = ({ value, filters, urlParamsSensitive }) => html `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/form-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-filters-form-base
+    .value=${value}
+    .filters=${filters}
+    ?url-params-sensitive=${urlParamsSensitive}
+    @filters-change=${(e) => {
+    console.log('filters changed', e.detail);
+}}
+  >
+  </ox-filters-form-base>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    filters: [
+        {
+            name: 'test',
+            type: 'barcode',
+            label: 'name',
+            operator: 'eq'
+        },
+        {
+            name: 'active',
+            type: 'boolean',
+            label: 'active',
+            operator: 'eq'
+        },
+        {
+            name: 'sss',
+            type: 'select',
+            label: 'sss',
+            operator: 'eq',
+            options: () => {
+                return [
+                    {
+                        display: '',
+                        value: ''
+                    },
+                    {
+                        display: 'ABC',
+                        value: 'ABC'
+                    },
+                    {
+                        display: 'DEF',
+                        value: 'DEF'
+                    }
+                ];
+            }
+        },
+        {
+            name: 'range',
+            type: 'number',
+            label: 'range',
+            operator: 'between'
+        },
+        {
+            name: 'date-range',
+            type: 'datetime',
+            label: 'date',
+            operator: 'between'
+        }
+    ]
+};
+//# sourceMappingURL=ox-filter-form-barcode.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-filter-form-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-filter-form-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,yBAAyB;IACpC,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;;;;;;;;;;aAU/E,KAAK;eACH,OAAO;4BACM,kBAAkB;sBACxB,CAAC,CAAc,EAAE,EAAE;IACnC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAC1C,CAAC;;;CAGJ,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 '../src/filters/ox-filters-form-base.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-filters-form-barcode',\n  component: 'ox-filters-form-barcode',\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=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    body {\n    }\n  </style>\n\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`\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-filter-form-base.stories.d.ts

@@ -0,0 +1,29 @@
+import '../src/filters/ox-filters-form-base.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        value: {
+            control: string;
+        };
+        filters: {
+            control: string;
+        };
+        urlParamsSensitive: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    value?: object;
+    filters?: object;
+    urlParamsSensitive: boolean;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-filter-form-base.stories.js

@@ -0,0 +1,82 @@
+import '../src/filters/ox-filters-form-base.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-filters-form-base',
+    component: 'ox-filters-form-base',
+    argTypes: {
+        value: { control: 'object' },
+        filters: { control: 'object' },
+        urlParamsSensitive: { control: 'boolean' }
+    }
+};
+const Template = ({ value, filters, urlParamsSensitive }) => html `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/form-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-filters-form-base
+    .value=${value}
+    .filters=${filters}
+    ?url-params-sensitive=${urlParamsSensitive}
+    @filters-change=${(e) => {
+    console.log('filters changed', e.detail);
+}}
+  >
+  </ox-filters-form-base>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    filters: [
+        {
+            name: 'test',
+            type: 'string',
+            label: 'name',
+            operator: 'eq'
+        },
+        {
+            name: 'active',
+            type: 'boolean',
+            label: 'active',
+            operator: 'eq'
+        },
+        {
+            name: 'sss',
+            type: 'select',
+            label: 'sss',
+            operator: 'eq',
+            options: () => {
+                return [
+                    {
+                        display: '',
+                        value: ''
+                    },
+                    {
+                        display: 'ABC',
+                        value: 'ABC'
+                    },
+                    {
+                        display: 'DEF',
+                        value: 'DEF'
+                    }
+                ];
+            }
+        },
+        {
+            name: 'range',
+            type: 'number',
+            label: 'range',
+            operator: 'between'
+        },
+        {
+            name: 'date-range',
+            type: 'datetime',
+            label: 'date',
+            operator: 'between'
+        }
+    ]
+};
+//# sourceMappingURL=ox-filter-form-base.stories.js.map

package/dist/stories/ox-filter-form-base.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-filter-form-base.stories.js","sourceRoot":"","sources":["../../stories/ox-filter-form-base.stories.ts"],"names":[],"mappings":"AAAA,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,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;;;;;;;;;;aAU/E,KAAK;eACH,OAAO;4BACM,kBAAkB;sBACxB,CAAC,CAAc,EAAE,EAAE;IACnC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAC1C,CAAC;;;CAGJ,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,QAAQ;YACd,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 '../src/filters/ox-filters-form-base.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-filters-form-base',\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=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    body {\n    }\n  </style>\n\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`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  filters: [\n    {\n      name: 'test',\n      type: 'string',\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"]}