@operato/data-grist 9.0.0-beta.61 → 9.0.0-beta.63

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

@@ -0,0 +1,41 @@
+import '@operato/input/ox-checkbox.js';
+import { html } from 'lit-html';
+export const FilterCheckbox = (column, value, owner) => {
+    const { name, header, label, filter } = column;
+    const { label: filterLabel, operator } = filter;
+    const labelText = filterLabel !== undefined
+        ? filterLabel
+        : typeof label === 'object' && label.renderer
+            ? label.renderer(column)
+            : header.renderer(column) || name;
+    // 텍스트 형태로 받았을시 의도가 boolean이면 boolean 타입으로 변환
+    if (value === 'false') {
+        value = false;
+    }
+    else if (value === 'true') {
+        value = true;
+    }
+    return html `
+    <ox-checkbox
+      name=${column.name}
+      ?checked=${value}
+      indeterminatable
+      ?indeterminate=${value === undefined}
+      left-label
+      @change=${(e) => {
+        ;
+        e.target.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name,
+                operator,
+                value: e.target.checked
+            }
+        }));
+    }}
+      ><label filter-title><span>${labelText}</span></label></ox-checkbox
+    >
+  `;
+};
+//# sourceMappingURL=filter-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-checkbox.js","sourceRoot":"","sources":["../../../src/filters/filter-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,cAAc,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC3E,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;IAE9C,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,MAA6B,CAAA;IAEtE,MAAM,SAAS,GACb,WAAW,KAAK,SAAS;QACvB,CAAC,CAAC,WAAW;QACb,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ;YAC3C,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC;YACxB,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI,CAAA;IAEvC,6CAA6C;IAC7C,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;QACtB,KAAK,GAAG,KAAK,CAAC;IAChB,CAAC;SAAM,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;QAC5B,KAAK,GAAG,IAAI,CAAC;IACf,CAAC;IAED,OAAO,IAAI,CAAA;;aAEA,MAAM,CAAC,IAAI;iBACP,KAAK;;uBAEC,KAAK,KAAK,SAAS;;gBAE1B,CAAC,CAAc,EAAE,EAAE;QAC3B,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI;gBACJ,QAAQ;gBACR,KAAK,EAAG,CAAC,CAAC,MAAqD,CAAC,OAAO;aACxE;SACF,CAAC,CACH,CAAA;IACH,CAAC;mCAC4B,SAAS;;GAEzC,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types.js'\n\nexport const FilterCheckbox: FilterSelectRenderer = (column, value, owner) => {\n  const { name, header, label, filter } = column\n\n  const { label: filterLabel, operator } = filter! as FilterConfigObject\n\n  const labelText =\n    filterLabel !== undefined\n      ? filterLabel\n      : typeof label === 'object' && label.renderer\n        ? label.renderer(column)\n        : header.renderer(column) || name\n\n  // 텍스트 형태로 받았을시 의도가 boolean이면 boolean 타입으로 변환\n  if (value === 'false') {\n    value = false;\n  } else if (value === 'true') {\n    value = true;\n  }\n\n  return html`\n    <ox-checkbox\n      name=${column.name}\n      ?checked=${value}\n      indeterminatable\n      ?indeterminate=${value === undefined}\n      left-label\n      @change=${(e: CustomEvent) => {\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name,\n              operator,\n              value: (e.target as Element & { checked: boolean | undefined }).checked\n            }\n          })\n        )\n      }}\n      ><label filter-title><span>${labelText}</span></label></ox-checkbox\n    >\n  `\n}\n"]}

package/dist/src/filters/filter-input-barcode.d.ts

@@ -0,0 +1,3 @@
+import '@operato/input/ox-input-barcode.js';
+import { FilterSelectRenderer } from '../types.js';
+export declare const FilterInputBarcode: FilterSelectRenderer;

package/dist/src/filters/filter-input-barcode.js

@@ -0,0 +1,28 @@
+import '@operato/input/ox-input-barcode.js';
+import { html } from 'lit-html';
+export const FilterInputBarcode = (column, value, owner) => {
+    const filter = column.filter;
+    const { englishOnly, selectAfterChange } = filter.options || {};
+    return html `
+    <ox-input-barcode
+      name=${column.name}
+      ?english-only=${englishOnly}
+      ?select-after-change=${selectAfterChange}
+      .value=${value == null ? '' : value}
+      @change=${(e) => {
+        const input = e.target;
+        input.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name: column.name,
+                operator: filter.operator,
+                value: input.value
+            }
+        }));
+    }}
+      filter-input
+    ></ox-input-barcode>
+  `;
+};
+//# sourceMappingURL=filter-input-barcode.js.map

package/dist/src/filters/filter-input-barcode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-input-barcode.js","sourceRoot":"","sources":["../../../src/filters/filter-input-barcode.ts"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,kBAAkB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC/E,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAE/D,OAAO,IAAI,CAAA;;aAEA,MAAM,CAAC,IAAI;sBACF,WAAW;6BACJ,iBAAiB;eAC/B,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gBACzB,CAAC,CAAc,EAAE,EAAE;QAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,KAAK;aACnB;SACF,CAAC,CACH,CAAA;IACH,CAAC;;;GAGJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-input-barcode.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types.js'\n\nexport const FilterInputBarcode: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const { englishOnly, selectAfterChange } = filter.options || {}\n\n  return html`\n    <ox-input-barcode\n      name=${column.name}\n      ?english-only=${englishOnly}\n      ?select-after-change=${selectAfterChange}\n      .value=${value == null ? '' : value}\n      @change=${(e: CustomEvent) => {\n        const input = e.target as HTMLInputElement\n        input.dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: input.value\n            }\n          })\n        )\n      }}\n      filter-input\n    ></ox-input-barcode>\n  `\n}\n"]}

package/dist/src/filters/filter-input.d.ts

@@ -0,0 +1,2 @@
+import { FilterSelectRenderer } from '../types.js';
+export declare const FilterInput: FilterSelectRenderer;

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

@@ -0,0 +1,25 @@
+import { html } from 'lit-html';
+export const FilterInput = (column, value, owner) => {
+    const filter = column.filter;
+    const type = (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
+    return html `
+    <input
+      type=${type}
+      name=${column.name}
+      .value=${value == null ? '' : value}
+      @change=${(e) => {
+        const input = e.target;
+        input.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name: column.name,
+                operator: filter.operator,
+                value: input.value
+            }
+        }));
+    }}
+    />
+  `;
+};
+//# sourceMappingURL=filter-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-input.js","sourceRoot":"","sources":["../../../src/filters/filter-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACxE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,IAAI,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAExC,OAAO,IAAI,CAAA;;aAEA,IAAW;aACX,MAAM,CAAC,IAAI;eACT,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gBACzB,CAAC,CAAc,EAAE,EAAE;QAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,KAAK;aACnB;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types.js'\n\nexport const FilterInput: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const type = filter?.type || column.type\n\n  return html`\n    <input\n      type=${type as any}\n      name=${column.name}\n      .value=${value == null ? '' : value}\n      @change=${(e: CustomEvent) => {\n        const input = e.target as HTMLInputElement\n        input.dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: input.value\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}

package/dist/src/filters/filter-range-date.d.ts

@@ -0,0 +1,2 @@
+import { FilterSelectRenderer } from '../types.js';
+export declare const FilterRangeDate: FilterSelectRenderer;

package/dist/src/filters/filter-range-date.js

@@ -0,0 +1,66 @@
+import { html } from 'lit-html';
+function formatDate(type, date) {
+    var year = date.getFullYear();
+    var month = ('0' + (date.getMonth() + 1)).slice(-2);
+    var day = ('0' + date.getDate()).slice(-2);
+    var hours = ('0' + date.getHours()).slice(-2);
+    var minutes = ('0' + date.getMinutes()).slice(-2);
+    var formatDate = year + '-' + month + '-' + day;
+    return type == 'date' ? formatDate : formatDate + 'T' + hours + ':' + minutes;
+}
+export const FilterRangeDate = (column, value, owner) => {
+    const filter = column.filter;
+    var [from, to] = value instanceof Array ? value : [];
+    var type = (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
+    if (type === 'datetime') {
+        type = 'datetime-local';
+    }
+    from = formatDate(type, new Date(from));
+    to = formatDate(type, new Date(to));
+    return html `
+    <input
+      name=${column.name}
+      type=${type}
+      .value=${from}
+      from
+      @keyup=${(e) => {
+        if (e.key !== 'Enter') {
+            return;
+        }
+        ;
+        e.target.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name: column.name,
+                operator: filter.operator,
+                value: Array.from(e.target.parentElement.querySelectorAll('input[from], input[to]')).map(input => input.value)
+            }
+        }));
+    }}
+    />
+    ~
+    <input
+      name=${column.name}
+      type=${type}
+      .value=${to}
+      to
+      @keyup=${(e) => {
+        if (e.key !== 'Enter') {
+            return;
+        }
+        ;
+        e.target.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name: column.name,
+                operator: filter.operator,
+                value: Array.from(e.target.parentElement.querySelectorAll('input[from], input[to]')).map(input => input.value)
+            }
+        }));
+    }}
+    />
+  `;
+};
+//# sourceMappingURL=filter-range-date.js.map

package/dist/src/filters/filter-range-date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-range-date.js","sourceRoot":"","sources":["../../../src/filters/filter-range-date.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,SAAS,UAAU,CAAC,IAAY,EAAE,IAAU;IAC1C,IAAI,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;IAC7B,IAAI,KAAK,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IACnD,IAAI,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IAC1C,IAAI,KAAK,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IAC7C,IAAI,OAAO,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IAEjD,IAAI,UAAU,GAAG,IAAI,GAAG,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,GAAG,CAAA;IAE/C,OAAO,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,GAAG,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,OAAO,CAAA;AAC/E,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC5E,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAElD,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAEpD,IAAI,IAAI,GAAQ,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAC3C,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;QACxB,IAAI,GAAG,gBAAgB,CAAA;IACzB,CAAC;IAED,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvC,EAAE,GAAG,UAAU,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;IAEnC,OAAO,IAAI,CAAA;;aAEA,MAAM,CAAC,IAAI;aACX,IAAI;eACF,IAAI;;eAEJ,CAAC,CAAgB,EAAE,EAAE;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,OAAM;QACR,CAAC;QACD,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,IAAI,CACd,CAAC,CAAC,MAAsB,CAAC,aAAc,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CACpF,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAE,KAA0B,CAAC,KAAK,CAAC;aAClD;SACF,CAAC,CACH,CAAA;IACH,CAAC;;;;aAIM,MAAM,CAAC,IAAI;aACX,IAAI;eACF,EAAE;;eAEF,CAAC,CAAgB,EAAE,EAAE;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,OAAM;QACR,CAAC;QACD,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,IAAI,CACd,CAAC,CAAC,MAAsB,CAAC,aAAc,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CACpF,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAE,KAA0B,CAAC,KAAK,CAAC;aAClD;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types.js'\n\nfunction formatDate(type: string, date: Date) {\n  var year = date.getFullYear()\n  var month = ('0' + (date.getMonth() + 1)).slice(-2)\n  var day = ('0' + date.getDate()).slice(-2)\n  var hours = ('0' + date.getHours()).slice(-2)\n  var minutes = ('0' + date.getMinutes()).slice(-2)\n\n  var formatDate = year + '-' + month + '-' + day\n\n  return type == 'date' ? formatDate : formatDate + 'T' + hours + ':' + minutes\n}\n\nexport const FilterRangeDate: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n\n  var [from, to] = value instanceof Array ? value : []\n\n  var type: any = filter?.type || column.type\n  if (type === 'datetime') {\n    type = 'datetime-local'\n  }\n\n  from = formatDate(type, new Date(from))\n  to = formatDate(type, new Date(to))\n\n  return html`\n    <input\n      name=${column.name}\n      type=${type}\n      .value=${from}\n      from\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n    ~\n    <input\n      name=${column.name}\n      type=${type}\n      .value=${to}\n      to\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}

package/dist/src/filters/filter-range-number.d.ts

@@ -0,0 +1,2 @@
+import { FilterSelectRenderer } from '../types.js';
+export declare const FilterRangeNumber: FilterSelectRenderer;

package/dist/src/filters/filter-range-number.js

@@ -0,0 +1,54 @@
+import { html } from 'lit-html';
+export const FilterRangeNumber = (column, value, owner) => {
+    const filter = column.filter;
+    const type = (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
+    const [from, to] = value instanceof Array ? value : [];
+    return html `
+    <input
+      name=${column.name}
+      type="number"
+      placeholder="minimum"
+      .value=${from}
+      from
+      @keyup=${(e) => {
+        if (e.key !== 'Enter') {
+            return;
+        }
+        ;
+        e.target.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name: column.name,
+                operator: filter.operator,
+                value: Array.from(e.target.parentElement.querySelectorAll('input[from], input[to]')).map(input => input.value)
+            }
+        }));
+    }}
+    />
+    ~
+    <input
+      name=${column.name}
+      type="number"
+      placeholder="maximum"
+      .value=${to}
+      to
+      @keyup=${(e) => {
+        if (e.key !== 'Enter') {
+            return;
+        }
+        ;
+        e.target.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name: column.name,
+                operator: filter.operator,
+                value: Array.from(e.target.parentElement.querySelectorAll('input[from], input[to]')).map(input => input.value)
+            }
+        }));
+    }}
+    />
+  `;
+};
+//# sourceMappingURL=filter-range-number.js.map

package/dist/src/filters/filter-range-number.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-range-number.js","sourceRoot":"","sources":["../../../src/filters/filter-range-number.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,iBAAiB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC9E,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,IAAI,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAExC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAEtD,OAAO,IAAI,CAAA;;aAEA,MAAM,CAAC,IAAI;;;eAGT,IAAI;;eAEJ,CAAC,CAAgB,EAAE,EAAE;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,OAAM;QACR,CAAC;QACD,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,IAAI,CACd,CAAC,CAAC,MAAsB,CAAC,aAAc,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CACpF,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAE,KAA0B,CAAC,KAAK,CAAC;aAClD;SACF,CAAC,CACH,CAAA;IACH,CAAC;;;;aAIM,MAAM,CAAC,IAAI;;;eAGT,EAAE;;eAEF,CAAC,CAAgB,EAAE,EAAE;QAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,OAAM;QACR,CAAC;QACD,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,IAAI,CACd,CAAC,CAAC,MAAsB,CAAC,aAAc,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CACpF,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAE,KAA0B,CAAC,KAAK,CAAC;aAClD;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types.js'\n\nexport const FilterRangeNumber: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const type = filter?.type || column.type\n\n  const [from, to] = value instanceof Array ? value : []\n\n  return html`\n    <input\n      name=${column.name}\n      type=\"number\"\n      placeholder=\"minimum\"\n      .value=${from}\n      from\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n    ~\n    <input\n      name=${column.name}\n      type=\"number\"\n      placeholder=\"maximum\"\n      .value=${to}\n      to\n      @keyup=${(e: KeyboardEvent) => {\n        if (e.key !== 'Enter') {\n          return\n        }\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: Array.from(\n                (e.target as HTMLElement).parentElement!.querySelectorAll('input[from], input[to]')\n              ).map(input => (input as HTMLInputElement).value)\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}

package/dist/src/filters/filter-select-buttons.d.ts

@@ -0,0 +1,3 @@
+import '@operato/input/ox-input-select-buttons.js';
+import { FilterSelectRenderer } from '../types.js';
+export declare const FilterSelectButtons: FilterSelectRenderer;

package/dist/src/filters/filter-select-buttons.js

@@ -0,0 +1,50 @@
+import '@operato/input/ox-input-select-buttons.js';
+import { html } from 'lit-html';
+export const FilterSelectButtons = (column, value, owner) => {
+    const filter = column.filter;
+    const operator = filter === null || filter === void 0 ? void 0 : filter.operator;
+    var options = (filter === null || filter === void 0 ? void 0 : filter.options) || column.record.options || [];
+    if (typeof options === 'function') {
+        if (!(filter === null || filter === void 0 ? void 0 : filter.options)) {
+            console.warn('ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.');
+        }
+        options = options.call(column, owner);
+    }
+    options = options.map((option) => {
+        switch (typeof option) {
+            case 'string':
+                return {
+                    display: option,
+                    value: option
+                };
+            case 'object':
+                return {
+                    display: option.display,
+                    value: option.value
+                };
+            default:
+                return option;
+        }
+    });
+    return html `
+    <ox-input-select-buttons
+      name=${column.name}
+      .value=${value}
+      .options=${options}
+      ?multiple=${operator === 'in'}
+      @change=${(e) => {
+        ;
+        e.target.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name: column.name,
+                operator: filter.operator,
+                value: e.target.value
+            }
+        }));
+    }}
+    ></ox-input-select-buttons>
+  `;
+};
+//# sourceMappingURL=filter-select-buttons.js.map

package/dist/src/filters/filter-select-buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-select-buttons.js","sourceRoot":"","sources":["../../../src/filters/filter-select-buttons.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAA;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,mBAAmB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAChF,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,QAAQ,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAA;IAEjC,IAAI,OAAO,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,KAAI,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAE5D,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE,CAAC;QAClC,IAAI,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAA,EAAE,CAAC;YACrB,OAAO,CAAC,IAAI,CACV,oGAAoG,CACrG,CAAA;QACH,CAAC;QACD,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;IACvC,CAAC;IAED,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE;QACpC,QAAQ,OAAO,MAAM,EAAE,CAAC;YACtB,KAAK,QAAQ;gBACX,OAAO;oBACL,OAAO,EAAE,MAAM;oBACf,KAAK,EAAE,MAAM;iBACd,CAAA;YACH,KAAK,QAAQ;gBACX,OAAO;oBACL,OAAO,EAAE,MAAM,CAAC,OAAO;oBACvB,KAAK,EAAE,MAAM,CAAC,KAAK;iBACpB,CAAA;YACH;gBACE,OAAO,MAAM,CAAA;QACjB,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,IAAI,CAAA;;aAEA,MAAM,CAAC,IAAI;eACT,KAAK;iBACH,OAAO;kBACN,QAAQ,KAAK,IAAI;gBACnB,CAAC,CAAc,EAAE,EAAE;QAC3B,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK;aAC5C;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-input-select-buttons.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types.js'\n\nexport const FilterSelectButtons: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const operator = filter?.operator\n\n  var options = filter?.options || column.record.options || []\n\n  if (typeof options === 'function') {\n    if (!filter?.options) {\n      console.warn(\n        'ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.'\n      )\n    }\n    options = options.call(column, owner)\n  }\n\n  options = options.map((option: any) => {\n    switch (typeof option) {\n      case 'string':\n        return {\n          display: option,\n          value: option\n        }\n      case 'object':\n        return {\n          display: option.display,\n          value: option.value\n        }\n      default:\n        return option\n    }\n  })\n\n  return html`\n    <ox-input-select-buttons\n      name=${column.name}\n      .value=${value}\n      .options=${options}\n      ?multiple=${operator === 'in'}\n      @change=${(e: CustomEvent) => {\n        ;(e.target as HTMLElement).dispatchEvent(\n          new CustomEvent('filter-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              name: column.name,\n              operator: filter.operator,\n              value: (e.target as HTMLInputElement).value\n            }\n          })\n        )\n      }}\n    ></ox-input-select-buttons>\n  `\n}\n"]}

package/dist/src/filters/filter-select.d.ts

@@ -0,0 +1,3 @@
+import '@operato/input/ox-checkbox.js';
+import { FilterSelectRenderer } from '../types.js';
+export declare const FilterSelect: FilterSelectRenderer;

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

@@ -0,0 +1,52 @@
+import '@operato/input/ox-checkbox.js';
+import { html } from 'lit';
+import { until } from 'lit/directives/until.js';
+import { OxFiltersForm } from './filters-form.js';
+function buildOptions(options, operator) {
+    const selectOptionObjects = options.map(option => {
+        switch (typeof option) {
+            case 'string':
+                return {
+                    display: option,
+                    value: option
+                };
+            case 'object':
+                return {
+                    display: option.display || option.name,
+                    value: option.value
+                };
+            default:
+                return option;
+        }
+    });
+    return operator === 'in'
+        ? html `
+        ${selectOptionObjects === null || selectOptionObjects === void 0 ? void 0 : selectOptionObjects.filter(option => !!option).map(({ value, display, name }) => html ` <ox-checkbox option value=${value}>${display || name}</ox-checkbox> `)}
+      `
+        : html `
+        ${selectOptionObjects === null || selectOptionObjects === void 0 ? void 0 : selectOptionObjects.map(({ value, display, name }) => html ` <div option value=${value}>${display || name}&nbsp;</div> `)}
+      `;
+}
+export const FilterSelect = (column, value, owner) => {
+    /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
+    const filter = column.filter;
+    const operator = filter === null || filter === void 0 ? void 0 : filter.operator;
+    const form = owner;
+    var options = (filter === null || filter === void 0 ? void 0 : filter.options) || column.record.options || [];
+    if (typeof options === 'function') {
+        if (!(filter === null || filter === void 0 ? void 0 : filter.options)) {
+            console.warn('ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.');
+        }
+        options = options.call(null, value, column, form instanceof OxFiltersForm ? form.getFormObjectValue() : {}, owner);
+        if (options instanceof Promise) {
+            return html `${until(options.then(options => buildOptions(options, operator)))}`;
+        }
+        else {
+            return buildOptions((options || []), operator);
+        }
+    }
+    else {
+        return buildOptions((options || []), operator);
+    }
+};
+//# sourceMappingURL=filter-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-select.js","sourceRoot":"","sources":["../../../src/filters/filter-select.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit'\nimport { until } from 'lit/directives/until.js'\n\nimport { FilterConfigObject, FilterOperator, FilterSelectRenderer, SelectOption, SelectOptionObject } from '../types.js'\nimport { OxFiltersForm } from './filters-form.js'\nimport { DataGridHeader } from '../data-grid/data-grid-header.js'\n\nfunction buildOptions(options: SelectOption[], operator?: FilterOperator) {\n  const selectOptionObjects = options.map(option => {\n    switch (typeof option) {\n      case 'string':\n        return {\n          display: option,\n          value: option\n        }\n      case 'object':\n        return {\n          display: option.display || option.name,\n          value: option.value\n        }\n      default:\n        return option\n    }\n  }) as SelectOptionObject[]\n\n  return operator === 'in'\n    ? html`\n        ${selectOptionObjects\n          ?.filter(option => !!option)\n          .map(\n            ({ value, display, name }) => html` <ox-checkbox option value=${value}>${display || name}</ox-checkbox> `\n          )}\n      `\n    : html`\n        ${selectOptionObjects?.map(\n          ({ value, display, name }) => html` <div option value=${value}>${display || name}&nbsp;</div> `\n        )}\n      `\n}\n\nexport const FilterSelect: FilterSelectRenderer = (column, value, owner) => {\n  /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */\n  const filter = column.filter as FilterConfigObject\n  const operator = filter?.operator\n  const form = owner as OxFiltersForm | DataGridHeader\n\n  var options = filter?.options || column.record.options || []\n\n  if (typeof options === 'function') {\n    if (!filter?.options) {\n      console.warn(\n        'ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.'\n      )\n    }\n\n    options = options.call(null, value, column, form instanceof OxFiltersForm ? form.getFormObjectValue() : {}, owner)\n\n    if (options instanceof Promise) {\n      return html`${until(options.then(options => buildOptions(options, operator)))}`\n    } else {\n      return buildOptions((options || []) as SelectOption[], operator)\n    }\n  } else {\n    return buildOptions((options || []) as SelectOption[], operator)\n  }\n}\n"]}

package/dist/src/filters/filter-styles.d.ts

@@ -0,0 +1 @@
+export declare const FilterStyles: import("lit").CSSResult;

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

@@ -0,0 +1,119 @@
+import { css } from 'lit';
+export const FilterStyles = css `
+  :host {
+    --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--md-sys-color-on-surface));
+
+    --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));
+    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--md-sys-color-outline-variant));
+    --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));
+    --ox-filters-input-color: var(--input-color, var(--md-sys-color-on-surface));
+    --ox-filters-input-focus-color: var(--input-focus-color, var(--md-sys-color-on-surface-variant));
+    --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));
+    --ox-filters-label-color: var(--label-color, var(--md-sys-color-on-surface));
+    --ox-filters-input-background-color: transparent;
+
+    --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+    --ox-filters-input-padding: var(--spacing-small, 4px);
+
+    --ox-select-padding: var(--ox-filters-input-padding);
+    --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);
+  }
+
+  label {
+    color: var(--ox-filters-label-color, var(--md-sys-color-on-primary-container));
+  }
+
+  span {
+    font-weight: var(--md-sys-typescale-label-medium-weight);
+    text-transform: capitalize;
+  }
+
+  input::placeholder {
+    color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-surface-dim));
+    opacity: 0.6;
+  }
+
+  input,
+  ox-input-search,
+  [filter-input] {
+    padding: var(--ox-filters-input-padding);
+  }
+
+  ox-select,
+  ox-input-search,
+  input,
+  [filter-input] {
+    border: none;
+    border-bottom: var(--ox-filters-input-border, var(--md-sys-color-outline));
+    font: var(--ox-filters-input-font);
+    color: var(--ox-filters-input-color, var(--md-sys-color-on-surface));
+    background-color: var(--ox-filters-input-background-color, transparent);
+    vertical-align: middle;
+  }
+
+  ox-select:focus,
+  input:focus,
+  [filter-input]:focus {
+    outline: none;
+    border-bottom: var(--ox-filters-input-focus-border, var(--md-sys-color-outline-variant));
+    color: var(--ox-filters-input-focus-color, var(--md-sys-color-on-surface-variant));
+  }
+
+  ox-select {
+    min-width: 90px;
+    max-width: 170px;
+  }
+
+  ox-input-search {
+    max-width: 150px;
+  }
+
+  input[type='number'] {
+    max-width: 90px;
+  }
+
+  input[type*='date'],
+  input[type*='time'],
+  input[type='week'],
+  input[type='month'] {
+    max-width: 170px;
+  }
+
+  [filter-input] {
+    min-width: 140px;
+    max-width: 170px;
+  }
+
+  @media only screen and (max-width: 460px) {
+    :host {
+      --ox-filters-form-label-font: bold 13px var(--theme-font);
+      --ox-filters-input-font: normal 16px var(--theme-font);
+    }
+
+    ox-input-barcode {
+      max-width: unset;
+      flex: 1;
+    }
+
+    ox-input-search {
+      max-width: unset;
+    }
+
+    ox-select {
+      max-width: unset;
+    }
+
+    ox-checkbox {
+      max-width: unset;
+    }
+
+    input[type='number'] {
+      max-width: unset;
+    }
+
+    input {
+      flex: 1;
+    }
+  }
+`;
+//# sourceMappingURL=filter-styles.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoH9B,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));\n\n    --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));\n    --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--md-sys-color-outline-variant));\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: var(--spacing-small, 4px);\n\n    --ox-select-padding: var(--ox-filters-input-padding);\n    --ox-checkbox-background-color: var(--ox-filters-input-background-color, transparent);\n  }\n\n  label {\n    color: var(--ox-filters-label-color, var(--md-sys-color-on-primary-container));\n  }\n\n  span {\n    font-weight: var(--md-sys-typescale-label-medium-weight);\n    text-transform: capitalize;\n  }\n\n  input::placeholder {\n    color: var(--ox-filters-input-placeholder-color, var(--md-sys-color-surface-dim));\n    opacity: 0.6;\n  }\n\n  input,\n  ox-input-search,\n  [filter-input] {\n    padding: var(--ox-filters-input-padding);\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));\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, var(--md-sys-color-outline-variant));\n    color: var(--ox-filters-input-focus-color, var(--md-sys-color-on-surface-variant));\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`\n"]}

package/dist/src/filters/filters-form.d.ts

@@ -0,0 +1,40 @@
+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 { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { PagePreferenceProvider } from '@operato/p13n';
+import { ColumnConfig, FilterPreference, FilterOperator, FilterValue, GristConfig, PersonalGristPreference } from '../types.js';
+export type QueryFilterRangeValue = [from: number, to: number];
+export type QueryFilter = {
+    name: string;
+    operator: FilterOperator;
+    value: any;
+};
+export declare class OxFiltersForm extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value: FilterValue[];
+    withoutSearch: boolean;
+    autofocus: boolean;
+    empty: boolean;
+    personalConfigProvider?: PagePreferenceProvider;
+    personalConfig?: PersonalGristPreference;
+    personalFilters?: FilterPreference[];
+    config: GristConfig;
+    filterColumns: ColumnConfig[];
+    searchColumns: ColumnConfig[];
+    form: HTMLFormElement;
+    private autoUpdateTargetsOnChange;
+    private objectValue?;
+    connectedCallback(): void;
+    buildDefaultValue(operator: FilterOperator, defaultValue: any): any;
+    updated(changes: PropertyValues<this>): Promise<void>;
+    render(): TemplateResult;
+    applyUpdatedConfiguration(): void;
+    getQueryFilters(): Promise<QueryFilter[]>;
+    setInputValue(name: string, value: any): void;
+    getInputValue(name: string): any;
+    private updateObjectValues;
+    getFormObjectValue(): object | undefined;
+    reset(): void;
+}