@operato/form 1.0.0-beta.7 → 1.0.0

package/dist/src/filters/ox-filters-form-base.js

@@ -0,0 +1,238 @@
+import { __decorate } from "tslib";
+import '@operato/input/ox-checkbox.js';
+import '@operato/input/ox-select.js';
+import '@operato/popup/ox-popup-list.js';
+import '@operato/input/ox-input-search.js';
+import json5 from 'json5';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, queryAsync } from 'lit/decorators.js';
+import { FilterStyles } from './filter-styles.js';
+import { getFilterRenderer } from './registry.js';
+let FiltersFormBase = class FiltersFormBase extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = [];
+        this.filters = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.renderRoot.addEventListener('change', async (e) => {
+            this.dispatchEvent(new CustomEvent('filters-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    filters: await this.getQueryFilters(),
+                    from: 'filters-form'
+                }
+            }));
+        });
+    }
+    render() {
+        return html `
+      <form
+        @submit=${(e) => {
+            e.preventDefault();
+        }}
+      >
+        ${this.filters.map((filter) => {
+            var _a, _b;
+            const { name, label, type, operator } = filter;
+            const idx = operator === 'between' ? 1 : 0;
+            const renderer = getFilterRenderer(operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'
+                ? 'text'
+                : type)[idx];
+            const value = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.find(filter => filter.name == name)) === null || _b === void 0 ? void 0 : _b.value;
+            if (!renderer) {
+                return html ``;
+            }
+            return type === 'search'
+                ? html `<ox-input-search name="search" .value=${value}></ox-input-search>`
+                : type !== 'select'
+                    ? html ` <label filter-title><span>${label}</span> ${renderer(filter, value, this)} </label> `
+                    : operator === 'in'
+                        ? html `
+                <ox-select
+                  name=${name}
+                  placeholder=${label}
+                  .value=${value}
+                  @change=${(e) => {
+                            var _a;
+                            return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
+                                detail: {
+                                    name,
+                                    operator,
+                                    value: e.detail
+                                }
+                            }));
+                        }}
+                >
+                  <ox-popup-list multiple attr-selected="checked" with-search>
+                    ${renderer(filter, value, this)}
+                  </ox-popup-list>
+                </ox-select>
+              `
+                        : html `
+                <ox-select
+                  name=${name}
+                  placeholder=${label}
+                  .value=${value}
+                  @change=${(e) => {
+                            var _a;
+                            return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
+                                detail: {
+                                    name,
+                                    operator,
+                                    value: e.detail
+                                }
+                            }));
+                        }}
+                >
+                  <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>
+                </ox-select>
+              `;
+        })}
+      </form>
+    `;
+    }
+    async updated(changes) {
+        if (changes.has('urlParamsSensitive')) {
+            if (this.urlParamsSensitive) {
+                this._popstateEventHandler = () => {
+                    const queryString = window.location.search;
+                    const urlParams = new URLSearchParams(queryString);
+                    var filters = urlParams.get('filters');
+                    if (filters) {
+                        try {
+                            this.value = json5.parse(filters);
+                            this.dispatchEvent(new CustomEvent('filters-change', {
+                                bubbles: true,
+                                composed: true,
+                                detail: {
+                                    filters: json5.parse(filters),
+                                    from: 'url-parameter'
+                                }
+                            }));
+                        }
+                        catch (e) {
+                            console.error(`invalid filters params on URL query string : ${e}`);
+                        }
+                    }
+                };
+                //@ts-ignore
+                this._popstateEventHandler(); // call for the first time
+                window.addEventListener('popstate', this._popstateEventHandler);
+                this._filtersChangeHandler = (e) => {
+                    const urlParams = new URLSearchParams(window.location.search);
+                    const { filters, from } = e.detail || {};
+                    if (from === 'url-parameter') {
+                        return;
+                    }
+                    if (filters.length > 0) {
+                        urlParams.set('filters', json5.stringify(filters));
+                    }
+                    else {
+                        urlParams.delete('filters');
+                    }
+                    const queryString = String(urlParams);
+                    const url = `${window.location.pathname}${queryString ? `?${queryString}` : ''}`;
+                    history.pushState({}, document.title, url);
+                };
+                this.addEventListener('filters-change', this._filtersChangeHandler);
+            }
+            else {
+                if (this._popstateEventHandler) {
+                    window.removeEventListener('popstate', this._popstateEventHandler);
+                }
+                if (this._filtersChangeHandler) {
+                    this.removeEventListener('popstate', this._filtersChangeHandler);
+                }
+            }
+        }
+    }
+    async getQueryFilters() {
+        const formData = new FormData(await this.form);
+        var filters = this.filters
+            .map((filter) => {
+            const { name, type, operator } = filter;
+            var value = formData.getAll(name);
+            if (value.length == 0) {
+                return;
+            }
+            if (-1 === value.findIndex(v => v !== '')) {
+                return;
+            }
+            const filterValue = value.map(v => {
+                const value = v.toString();
+                /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */
+                switch (type) {
+                    case 'integer':
+                    case 'float':
+                    case 'number':
+                    case 'progress':
+                    case 'checkbox':
+                    case 'boolean':
+                        return !value ? undefined : JSON.parse(value);
+                    default:
+                        return value;
+                }
+            });
+            return {
+                name,
+                operator,
+                value: filterValue.length === 1 ? filterValue[0] : filterValue
+            };
+        })
+            .filter(result => result !== undefined);
+        return filters;
+    }
+};
+FiltersFormBase.styles = [
+    FilterStyles,
+    css `
+      :host {
+        display: flex;
+      }
+
+      form {
+        flex: 1;
+
+        display: flex;
+        flex-flow: row wrap;
+        gap: var(--ox-filters-form-gap);
+      }
+
+      form > * {
+        display: flex;
+        align-items: center;
+      }
+
+      @media only screen and (max-width: 460px) {
+        form {
+          flex-direction: column;
+        }
+
+        label,
+        label span,
+        ox-select {
+          display: block;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], FiltersFormBase.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], FiltersFormBase.prototype, "filters", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'url-params-sensitive' })
+], FiltersFormBase.prototype, "urlParamsSensitive", void 0);
+__decorate([
+    queryAsync('form')
+], FiltersFormBase.prototype, "form", void 0);
+FiltersFormBase = __decorate([
+    customElement('ox-filters-form-base')
+], FiltersFormBase);
+export { FiltersFormBase };
+//# sourceMappingURL=ox-filters-form-base.js.map

package/dist/src/filters/ox-filters-form-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-filters-form-base.js","sourceRoot":"","sources":["../../../src/filters/ox-filters-form-base.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport json5 from 'json5'\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, queryAsync } from 'lit/decorators.js'\n\nimport { FilterStyles } from './filter-styles.js'\nimport { getFilterRenderer } from './registry.js'\nimport { FilterConfig, FilterOperator, FilterValue } from './types.js'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n  name: string\n  operator: FilterOperator\n  value: any\n}\n\n@customElement('ox-filters-form-base')\nexport class FiltersFormBase extends LitElement {\n  static styles = [\n    FilterStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-flow: row wrap;\n        gap: var(--ox-filters-form-gap);\n      }\n\n      form > * {\n        display: flex;\n        align-items: center;\n      }\n\n      @media only screen and (max-width: 460px) {\n        form {\n          flex-direction: column;\n        }\n\n        label,\n        label span,\n        ox-select {\n          display: block;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: FilterValue[] = []\n  @property({ type: Object }) filters: FilterConfig[] = []\n  @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean\n\n  @queryAsync('form') form!: HTMLFormElement\n\n  private _popstateEventHandler?: EventListener\n  private _filtersChangeHandler?: EventListener\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.renderRoot.addEventListener('change', async (e: Event) => {\n      this.dispatchEvent(\n        new CustomEvent('filters-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            filters: await this.getQueryFilters(),\n            from: 'filters-form'\n          }\n        })\n      )\n    })\n  }\n\n  render(): TemplateResult {\n    return html`\n      <form\n        @submit=${(e: Event) => {\n          e.preventDefault()\n        }}\n      >\n        ${this.filters.map((filter: FilterConfig) => {\n          const { name, label, type, operator } = filter\n          const idx = operator === 'between' ? 1 : 0\n          const renderer = getFilterRenderer(\n            operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n              ? 'text'\n              : type\n          )[idx]\n          const value = this.value?.find(filter => filter.name == name)?.value\n\n          if (!renderer) {\n            return html``\n          }\n\n          return type === 'search'\n            ? html`<ox-input-search name=\"search\" .value=${value}></ox-input-search>`\n            : type !== 'select'\n            ? html` <label filter-title><span>${label}</span> ${renderer(filter, value, this)} </label> `\n            : operator === 'in'\n            ? html`\n                <ox-select\n                  name=${name}\n                  placeholder=${label}\n                  .value=${value}\n                  @change=${(e: CustomEvent) =>\n                    e.target?.dispatchEvent(\n                      new CustomEvent('filter-change', {\n                        detail: {\n                          name,\n                          operator,\n                          value: e.detail\n                        }\n                      })\n                    )}\n                >\n                  <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                    ${renderer(filter, value, this)}\n                  </ox-popup-list>\n                </ox-select>\n              `\n            : html`\n                <ox-select\n                  name=${name}\n                  placeholder=${label}\n                  .value=${value}\n                  @change=${(e: CustomEvent) =>\n                    e.target?.dispatchEvent(\n                      new CustomEvent('filter-change', {\n                        detail: {\n                          name,\n                          operator,\n                          value: e.detail\n                        }\n                      })\n                    )}\n                >\n                  <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>\n                </ox-select>\n              `\n        })}\n      </form>\n    `\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('urlParamsSensitive')) {\n      if (this.urlParamsSensitive) {\n        this._popstateEventHandler = () => {\n          const queryString = window.location.search\n          const urlParams = new URLSearchParams(queryString)\n          var filters = urlParams.get('filters')\n\n          if (filters) {\n            try {\n              this.value = json5.parse(filters)\n              this.dispatchEvent(\n                new CustomEvent('filters-change', {\n                  bubbles: true,\n                  composed: true,\n                  detail: {\n                    filters: json5.parse(filters),\n                    from: 'url-parameter'\n                  }\n                })\n              )\n            } catch (e) {\n              console.error(`invalid filters params on URL query string : ${e}`)\n            }\n          }\n        }\n\n        //@ts-ignore\n        this._popstateEventHandler() // call for the first time\n\n        window.addEventListener('popstate', this._popstateEventHandler)\n\n        this._filtersChangeHandler = (e: Event) => {\n          const urlParams = new URLSearchParams(window.location.search)\n          const { filters, from } = (e as CustomEvent).detail || {}\n\n          if (from === 'url-parameter') {\n            return\n          }\n\n          if (filters.length > 0) {\n            urlParams.set('filters', json5.stringify(filters))\n          } else {\n            urlParams.delete('filters')\n          }\n          const queryString = String(urlParams)\n          const url = `${window.location.pathname}${queryString ? `?${queryString}` : ''}`\n\n          history.pushState({}, document.title, url)\n        }\n\n        this.addEventListener('filters-change', this._filtersChangeHandler)\n      } else {\n        if (this._popstateEventHandler) {\n          window.removeEventListener('popstate', this._popstateEventHandler)\n        }\n        if (this._filtersChangeHandler) {\n          this.removeEventListener('popstate', this._filtersChangeHandler)\n        }\n      }\n    }\n  }\n\n  async getQueryFilters(): Promise<QueryFilter[]> {\n    const formData = new FormData(await this.form)\n\n    var filters = this.filters\n      .map((filter: FilterConfig) => {\n        const { name, type, operator } = filter\n\n        var value = formData.getAll(name)\n        if (value.length == 0) {\n          return\n        }\n\n        if (-1 === value.findIndex(v => v !== '')) {\n          return\n        }\n\n        const filterValue = value.map(v => {\n          const value = v.toString()\n\n          /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n          switch (type) {\n            case 'integer':\n            case 'float':\n            case 'number':\n            case 'progress':\n            case 'checkbox':\n            case 'boolean':\n              return !value ? undefined : JSON.parse(value)\n            default:\n              return value\n          }\n        })\n\n        return {\n          name,\n          operator,\n          value: filterValue.length === 1 ? filterValue[0] : filterValue\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n\n    return filters\n  }\n}\n"]}

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

@@ -0,0 +1,7 @@
+import { FilterSelectRenderer } from './types.js';
+export declare function registerFilterRenderer(type: string, renderer: FilterSelectRenderer[]): void;
+export declare function unregisterFilterRenderer(type: string): void;
+export declare function getFilterRenderers(): {
+    [name: string]: FilterSelectRenderer[];
+};
+export declare function getFilterRenderer(type: string): FilterSelectRenderer[];

package/dist/src/filters/registry.js

@@ -0,0 +1,46 @@
+import { FilterCheckbox } from './filter-checkbox.js';
+import { FilterInputBarcode } from './filter-input-barcode.js';
+import { FilterInput } from './filter-input.js';
+import { FilterRangeDate } from './filter-range-date.js';
+import { FilterRangeNumber } from './filter-range-number.js';
+import { FilterSelect } from './filter-select.js';
+var RENDERERS = {
+    string: [FilterInput],
+    text: [FilterInput],
+    email: [FilterInput],
+    tel: [FilterInput],
+    integer: [FilterInput, FilterRangeNumber],
+    float: [FilterInput, FilterRangeNumber],
+    number: [FilterInput, FilterRangeNumber],
+    select: [FilterSelect],
+    boolean: [FilterCheckbox],
+    checkbox: [FilterCheckbox],
+    month: [FilterInput, FilterRangeDate],
+    week: [FilterInput, FilterRangeDate],
+    date: [FilterInput, FilterRangeDate],
+    time: [FilterInput, FilterRangeDate],
+    datetime: [FilterInput, FilterRangeDate],
+    color: [FilterInput],
+    progress: [FilterInput, FilterRangeNumber],
+    link: [FilterInput],
+    image: [FilterInput],
+    json5: [FilterInput],
+    scanner: [FilterInputBarcode],
+    barcode: [FilterInputBarcode]
+};
+export function registerFilterRenderer(type, renderer) {
+    RENDERERS[type] = renderer;
+}
+export function unregisterFilterRenderer(type) {
+    delete RENDERERS[type];
+}
+export function getFilterRenderers() {
+    return { ...RENDERERS };
+}
+export function getFilterRenderer(type) {
+    if (typeof type == 'function') {
+        return type;
+    }
+    return RENDERERS[type || 'text'] || [FilterInput];
+}
+//# sourceMappingURL=registry.js.map

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