@operato/data-grist 1.0.0-beta.11 → 1.0.0-beta.12

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-beta.12](https://github.com/hatiolab/operato/compare/v1.0.0-beta.11...v1.0.0-beta.12) (2022-05-13)
+
+
+### :rocket: New Features
+
+* storybook started ([90c08c9](https://github.com/hatiolab/operato/commit/90c08c9a15e5fe554baaa1becca07793e8434799))
+
+
+
 ## [1.0.0-beta.11](https://github.com/hatiolab/operato/compare/v1.0.0-beta.10...v1.0.0-beta.11) (2022-05-01)
 
 

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

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

package/dist/src/filters/filter-input copy.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 === undefined ? '' : 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%20copy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-input copy.js","sourceRoot":"","sources":["../../../src/filters/filter-input copy.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/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,IAAI;aACJ,MAAM,CAAC,IAAI;eACT,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gBAC/B,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 { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nimport { html } from 'lit-html'\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}\n      name=${column.name}\n      .value=${value === undefined ? '' : 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-mwc-checkbox.d.ts

@@ -0,0 +1,4 @@
+import '@material/mwc-checkbox';
+import '@material/mwc-formfield';
+import { FilterSelectRenderer } from '../types';
+export declare const FilterMwcCheckbox: FilterSelectRenderer;

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

@@ -0,0 +1,30 @@
+import '@material/mwc-checkbox';
+import '@material/mwc-formfield';
+import { html } from 'lit-html';
+export const FilterMwcCheckbox = (column, value, owner) => {
+    const filter = column.filter;
+    const options = filter === null || filter === void 0 ? void 0 : filter.options;
+    return html `
+    <mwc-formfield label=${column.name}>
+      <mwc-checkbox
+        name="${column.name}"
+        ?checked=${value}
+        ?indeterminate=${value === undefined}
+        @change=${(e) => {
+        ;
+        e.target.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name: column.name,
+                operator: filter.operator,
+                value: e.target.checked
+            }
+        }));
+    }}
+      />
+      <mwc-formfield />
+    </mwc-formfield>
+  `;
+};
+//# sourceMappingURL=filter-mwc-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-mwc-checkbox.js","sourceRoot":"","sources":["../../../src/filters/filter-mwc-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAA;AAC/B,OAAO,yBAAyB,CAAA;AAIhC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,MAAM,CAAC,MAAM,iBAAiB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC9E,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,OAAO,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAA;IAE/B,OAAO,IAAI,CAAA;2BACc,MAAM,CAAC,IAAI;;gBAEtB,MAAM,CAAC,IAAI;mBACR,KAAK;yBACC,KAAK,KAAK,SAAS;kBAC1B,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,MAAqD,CAAC,OAAO;aACxE;SACF,CAAC,CACH,CAAA;IACH,CAAC;;;;GAIN,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@material/mwc-checkbox'\nimport '@material/mwc-formfield'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nimport { html } from 'lit-html'\n\nexport const FilterMwcCheckbox: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const options = filter?.options\n\n  return html`\n    <mwc-formfield label=${column.name}>\n      <mwc-checkbox\n        name=\"${column.name}\"\n        ?checked=${value}\n        ?indeterminate=${value === undefined}\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 Element & { checked: boolean | undefined }).checked\n              }\n            })\n          )\n        }}\n      />\n      <mwc-formfield />\n    </mwc-formfield>\n  `\n}\n"]}

package/dist/src/filters/filter-mwc-textfield.d.ts

@@ -0,0 +1,3 @@
+import '@material/mwc-textfield';
+import { FilterSelectRenderer } from '../types';
+export declare const FilterMwcTextField: FilterSelectRenderer;

package/dist/src/filters/filter-mwc-textfield.js

@@ -0,0 +1,27 @@
+import '@material/mwc-textfield';
+import { html } from 'lit-html';
+export const FilterMwcTextField = (column, value, owner) => {
+    const filter = column.filter;
+    const type = (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
+    return html `
+    <mwc-textfield
+      type="${type}"
+      label="${column.name}"
+      name="${column.name}"
+      .value=${value === undefined ? '' : 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
+            }
+        }));
+    }}
+    ></mwc-textfield>
+  `;
+};
+//# sourceMappingURL=filter-mwc-textfield.js.map

package/dist/src/filters/filter-mwc-textfield.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-mwc-textfield.js","sourceRoot":"","sources":["../../../src/filters/filter-mwc-textfield.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAIhC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/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,IAAI,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAExC,OAAO,IAAI,CAAA;;cAEC,IAAI;eACH,MAAM,CAAC,IAAI;cACZ,MAAM,CAAC,IAAI;eACV,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gBAC/B,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 '@material/mwc-textfield'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nimport { html } from 'lit-html'\n\nexport const FilterMwcTextField: FilterSelectRenderer = (column, value, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const type = filter?.type || column.type\n\n  return html`\n    <mwc-textfield\n      type=\"${type}\"\n      label=\"${column.name}\"\n      name=\"${column.name}\"\n      .value=${value === undefined ? '' : 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    ></mwc-textfield>\n  `\n}\n"]}

package/dist/src/filters/grist-filter-registry.d.ts

@@ -0,0 +1,12 @@
+import { ColumnConfig } from '..';
+import { OxGristFilterEditor } from './ox-grist-filter-editor';
+export declare function registerGristFilterEditor(type: string, renderer: {
+    new (): OxGristFilterEditor;
+}): void;
+export declare function unregisterGristFilterEditor(type: string): void;
+export declare function getGristFilterEditors(): {
+    [name: string]: {
+        new (): OxGristFilterEditor;
+    };
+};
+export declare function getGristFilterEditor(type: string): (column: ColumnConfig, value: any, owner: Element) => OxGristFilterEditor;

package/dist/src/filters/grist-filter-registry.js

@@ -0,0 +1,47 @@
+import { OxGristFilterEditorCheckbox } from './ox-grist-filter-editor-checkbox';
+import { OxGristFilterEditorInput } from './ox-grist-filter-editor-input';
+import { OxGristFilterEditorSelect } from './ox-grist-filter-editor-select';
+var EDITORS = {
+    select: OxGristFilterEditorSelect,
+    boolean: OxGristFilterEditorCheckbox,
+    checkbox: OxGristFilterEditorCheckbox,
+    string: OxGristFilterEditorInput,
+    text: OxGristFilterEditorInput,
+    email: OxGristFilterEditorInput,
+    tel: OxGristFilterEditorInput,
+    integer: OxGristFilterEditorInput,
+    float: OxGristFilterEditorInput,
+    number: OxGristFilterEditorInput,
+    month: OxGristFilterEditorInput,
+    week: OxGristFilterEditorInput,
+    date: OxGristFilterEditorInput,
+    time: OxGristFilterEditorInput,
+    datetime: OxGristFilterEditorInput,
+    color: OxGristFilterEditorInput,
+    progress: OxGristFilterEditorInput
+};
+export function registerGristFilterEditor(type, renderer) {
+    EDITORS[type] = renderer;
+}
+export function unregisterGristFilterEditor(type) {
+    delete EDITORS[type];
+}
+export function getGristFilterEditors() {
+    return { ...EDITORS };
+}
+export function getGristFilterEditor(type) {
+    if (typeof type == 'function') {
+        return type;
+    }
+    return function (column, value, owner) {
+        var clazz = EDITORS[type || 'text'] || OxGristFilterEditorInput;
+        var element = new clazz();
+        const { type: columnType, name, filter } = column;
+        var { type = columnType, operator } = filter;
+        element.name = name;
+        element.value = value;
+        element.column = column;
+        return element;
+    };
+}
+//# sourceMappingURL=grist-filter-registry.js.map

package/dist/src/filters/grist-filter-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grist-filter-registry.js","sourceRoot":"","sources":["../../../src/filters/grist-filter-registry.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,2BAA2B,EAAE,MAAM,mCAAmC,CAAA;AAC/E,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAA;AACzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAA;AAE3E,IAAI,OAAO,GAAwD;IACjE,MAAM,EAAE,yBAAyB;IACjC,OAAO,EAAE,2BAA2B;IACpC,QAAQ,EAAE,2BAA2B;IACrC,MAAM,EAAE,wBAAwB;IAChC,IAAI,EAAE,wBAAwB;IAC9B,KAAK,EAAE,wBAAwB;IAC/B,GAAG,EAAE,wBAAwB;IAC7B,OAAO,EAAE,wBAAwB;IACjC,KAAK,EAAE,wBAAwB;IAC/B,MAAM,EAAE,wBAAwB;IAChC,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,wBAAwB;IAC9B,IAAI,EAAE,wBAAwB;IAC9B,IAAI,EAAE,wBAAwB;IAC9B,QAAQ,EAAE,wBAAwB;IAClC,KAAK,EAAE,wBAAwB;IAC/B,QAAQ,EAAE,wBAAwB;CACnC,CAAA;AAED,MAAM,UAAU,yBAAyB,CAAC,IAAY,EAAE,QAAyC;IAC/F,OAAO,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAA;AAC1B,CAAC;AAED,MAAM,UAAU,2BAA2B,CAAC,IAAY;IACtD,OAAO,OAAO,CAAC,IAAI,CAAC,CAAA;AACtB,CAAC;AAED,MAAM,UAAU,qBAAqB;IACnC,OAAO,EAAE,GAAG,OAAO,EAAE,CAAA;AACvB,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,IAAY;IAC/C,IAAI,OAAO,IAAI,IAAI,UAAU,EAAE;QAC7B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,UAAU,MAAoB,EAAE,KAAU,EAAE,KAAc;QAC/D,IAAI,KAAK,GAAG,OAAO,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,wBAAwB,CAAA;QAE/D,IAAI,OAAO,GAAG,IAAI,KAAK,EAAyB,CAAA;QAEhD,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;QACjD,IAAI,EAAE,IAAI,GAAG,UAAU,EAAE,QAAQ,EAAE,GAAG,MAA4B,CAAA;QAElE,OAAO,CAAC,IAAI,GAAG,IAAI,CAAA;QACnB,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;QACrB,OAAO,CAAC,MAAM,GAAG,MAAM,CAAA;QAEvB,OAAO,OAAO,CAAA;IAChB,CAAC,CAAA;AACH,CAAC","sourcesContent":["import { ColumnConfig, FilterConfigObject } from '..'\nimport { OxGristFilterEditor } from './ox-grist-filter-editor'\nimport { OxGristFilterEditorCheckbox } from './ox-grist-filter-editor-checkbox'\nimport { OxGristFilterEditorInput } from './ox-grist-filter-editor-input'\nimport { OxGristFilterEditorSelect } from './ox-grist-filter-editor-select'\n\nvar EDITORS: { [name: string]: { new (): OxGristFilterEditor } } = {\n  select: OxGristFilterEditorSelect,\n  boolean: OxGristFilterEditorCheckbox,\n  checkbox: OxGristFilterEditorCheckbox,\n  string: OxGristFilterEditorInput,\n  text: OxGristFilterEditorInput,\n  email: OxGristFilterEditorInput,\n  tel: OxGristFilterEditorInput,\n  integer: OxGristFilterEditorInput,\n  float: OxGristFilterEditorInput,\n  number: OxGristFilterEditorInput,\n  month: OxGristFilterEditorInput,\n  week: OxGristFilterEditorInput,\n  date: OxGristFilterEditorInput,\n  time: OxGristFilterEditorInput,\n  datetime: OxGristFilterEditorInput,\n  color: OxGristFilterEditorInput,\n  progress: OxGristFilterEditorInput\n}\n\nexport function registerGristFilterEditor(type: string, renderer: { new (): OxGristFilterEditor }) {\n  EDITORS[type] = renderer\n}\n\nexport function unregisterGristFilterEditor(type: string): void {\n  delete EDITORS[type]\n}\n\nexport function getGristFilterEditors(): { [name: string]: { new (): OxGristFilterEditor } } {\n  return { ...EDITORS }\n}\n\nexport function getGristFilterEditor(type: string) {\n  if (typeof type == 'function') {\n    return type\n  }\n\n  return function (column: ColumnConfig, value: any, owner: Element) {\n    var clazz = EDITORS[type || 'text'] || OxGristFilterEditorInput\n\n    var element = new clazz() as OxGristFilterEditor\n\n    const { type: columnType, name, filter } = column\n    var { type = columnType, operator } = filter as FilterConfigObject\n\n    element.name = name\n    element.value = value\n    element.column = column\n\n    return element\n  }\n}\n"]}

package/dist/src/filters/ox-grist-filter-editor-checkbox.d.ts

@@ -0,0 +1,5 @@
+import { OxGristFilterEditor } from './ox-grist-filter-editor.js';
+export declare class OxGristFilterEditorCheckbox extends OxGristFilterEditor {
+    formatFromEditor(e: Event): boolean;
+    get editorTemplate(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/filters/ox-grist-filter-editor-checkbox.js

@@ -0,0 +1,27 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { OxGristFilterEditor } from './ox-grist-filter-editor.js';
+let OxGristFilterEditorCheckbox = class OxGristFilterEditorCheckbox extends OxGristFilterEditor {
+    formatFromEditor(e) {
+        return e.target.checked;
+    }
+    get editorTemplate() {
+        var _a;
+        const { name, filter } = this.column;
+        const indeterminatable = (_a = filter === null || filter === void 0 ? void 0 : filter.options) === null || _a === void 0 ? void 0 : _a.indeterminatable;
+        return html `
+      <ox-checkbox
+        name=${name}
+        ?checked=${this.value}
+        ?indeterminatable=${indeterminatable === false ? false : true}
+        ?indeterminate=${this.value === undefined}
+      />
+    `;
+    }
+};
+OxGristFilterEditorCheckbox = __decorate([
+    customElement('ox-grist-filter-editor-checkbox')
+], OxGristFilterEditorCheckbox);
+export { OxGristFilterEditorCheckbox };
+//# sourceMappingURL=ox-grist-filter-editor-checkbox.js.map

package/dist/src/filters/ox-grist-filter-editor-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-filter-editor-checkbox.js","sourceRoot":"","sources":["../../../src/filters/ox-grist-filter-editor-checkbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAGjE,IAAa,2BAA2B,GAAxC,MAAa,2BAA4B,SAAQ,mBAAmB;IAClE,gBAAgB,CAAC,CAAQ;QACvB,OAAQ,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAA;IAC/C,CAAC;IAED,IAAI,cAAc;;QAChB,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QACpC,MAAM,gBAAgB,GAAG,MAAC,MAA6B,aAA7B,MAAM,uBAAN,MAAM,CAAyB,OAAO,0CAAE,gBAAgB,CAAA;QAElF,OAAO,IAAI,CAAA;;eAEA,IAAI;mBACA,IAAI,CAAC,KAAK;4BACD,gBAAgB,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;yBAC5C,IAAI,CAAC,KAAK,KAAK,SAAS;;KAE5C,CAAA;IACH,CAAC;CACF,CAAA;AAlBY,2BAA2B;IADvC,aAAa,CAAC,iCAAiC,CAAC;GACpC,2BAA2B,CAkBvC;SAlBY,2BAA2B","sourcesContent":["import { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '../types.js'\nimport { OxGristFilterEditor } from './ox-grist-filter-editor.js'\n\n@customElement('ox-grist-filter-editor-checkbox')\nexport class OxGristFilterEditorCheckbox extends OxGristFilterEditor {\n  formatFromEditor(e: Event) {\n    return (e.target as HTMLInputElement).checked\n  }\n\n  get editorTemplate() {\n    const { name, filter } = this.column\n    const indeterminatable = (filter as FilterConfigObject)?.options?.indeterminatable\n\n    return html`\n      <ox-checkbox\n        name=${name}\n        ?checked=${this.value}\n        ?indeterminatable=${indeterminatable === false ? false : true}\n        ?indeterminate=${this.value === undefined}\n      />\n    `\n  }\n}\n"]}

package/dist/src/filters/ox-grist-filter-editor-input.d.ts

@@ -0,0 +1,4 @@
+import { OxGristFilterEditor } from './ox-grist-filter-editor.js';
+export declare class OxGristFilterEditorInput extends OxGristFilterEditor {
+    get editorTemplate(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/filters/ox-grist-filter-editor-input.js

@@ -0,0 +1,54 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { OxGristFilterEditor } from './ox-grist-filter-editor.js';
+let OxGristFilterEditorInput = class OxGristFilterEditorInput extends OxGristFilterEditor {
+    get editorTemplate() {
+        const { type: columnType, name, filter } = this.column;
+        var { type = columnType, operator } = filter;
+        switch (type) {
+            case 'integer':
+            case 'float':
+            case 'number':
+            case 'progress':
+                type = 'number';
+                break;
+            case 'datetime':
+                type = 'datetime-local';
+                break;
+            default:
+        }
+        if (operator === 'between') {
+            var [from, to] = this.value instanceof Array ? this.value : [];
+        }
+        return operator === 'between'
+            ? html ` <input
+            name=${name}
+            type=${type}
+            placeholder="from"
+            .value=${from}
+            from
+            @change=${(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            }}
+            @keyup=${(e) => {
+                if (e.key !== 'Enter') {
+                    return;
+                }
+                this.dispatchEvent(new CustomEvent('change', {
+                    bubbles: true,
+                    detail: this.formatFromEditor(e)
+                }));
+            }}
+          />
+          ~
+          <input name=${name} type=${type} placeholder="to" .value=${to} to />`
+            : html ` <input type=${type} name=${name} .value=${this.value} /> `;
+    }
+};
+OxGristFilterEditorInput = __decorate([
+    customElement('ox-grist-filter-editor-text')
+], OxGristFilterEditorInput);
+export { OxGristFilterEditorInput };
+//# sourceMappingURL=ox-grist-filter-editor-input.js.map

package/dist/src/filters/ox-grist-filter-editor-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-filter-editor-input.js","sourceRoot":"","sources":["../../../src/filters/ox-grist-filter-editor-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAGjE,IAAa,wBAAwB,GAArC,MAAa,wBAAyB,SAAQ,mBAAmB;IAC/D,IAAI,cAAc;QAChB,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QACtD,IAAI,EAAE,IAAI,GAAG,UAAU,EAAE,QAAQ,EAAE,GAAG,MAA4B,CAAA;QAElE,QAAQ,IAAI,EAAE;YACZ,KAAK,SAAS,CAAC;YACf,KAAK,OAAO,CAAC;YACb,KAAK,QAAQ,CAAC;YACd,KAAK,UAAU;gBACb,IAAI,GAAG,QAAQ,CAAA;gBACf,MAAK;YAEP,KAAK,UAAU;gBACb,IAAI,GAAG,gBAAgB,CAAA;gBACvB,MAAK;YAEP,QAAQ;SACT;QAED,IAAI,QAAQ,KAAK,SAAS,EAAE;YAC1B,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;SAC/D;QAED,OAAO,QAAQ,KAAK,SAAS;YAC3B,CAAC,CAAC,IAAI,CAAA;mBACO,IAAI;mBACJ,IAAI;;qBAEF,IAAI;;sBAEH,CAAC,CAAQ,EAAE,EAAE;gBACrB,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,CAAC,CAAC,eAAe,EAAE,CAAA;YACrB,CAAC;qBACQ,CAAC,CAAgB,EAAE,EAAE;gBAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBACrB,OAAM;iBACP;gBACD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACxB,OAAO,EAAE,IAAI;oBACb,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;iBACjC,CAAC,CACH,CAAA;YACH,CAAC;;;wBAGW,IAAI,SAAS,IAAI,4BAA4B,EAAE,QAAQ;YACzE,CAAC,CAAC,IAAI,CAAA,gBAAgB,IAAI,SAAS,IAAI,WAAW,IAAI,CAAC,KAAK,MAAM,CAAA;IACtE,CAAC;CACF,CAAA;AAnDY,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAmDpC;SAnDY,wBAAwB","sourcesContent":["import { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '../types.js'\nimport { OxGristFilterEditor } from './ox-grist-filter-editor.js'\n\n@customElement('ox-grist-filter-editor-text')\nexport class OxGristFilterEditorInput extends OxGristFilterEditor {\n  get editorTemplate() {\n    const { type: columnType, name, filter } = this.column\n    var { type = columnType, operator } = filter as FilterConfigObject\n\n    switch (type) {\n      case 'integer':\n      case 'float':\n      case 'number':\n      case 'progress':\n        type = 'number'\n        break\n\n      case 'datetime':\n        type = 'datetime-local'\n        break\n\n      default:\n    }\n\n    if (operator === 'between') {\n      var [from, to] = this.value instanceof Array ? this.value : []\n    }\n\n    return operator === 'between'\n      ? html` <input\n            name=${name}\n            type=${type}\n            placeholder=\"from\"\n            .value=${from}\n            from\n            @change=${(e: Event) => {\n              e.preventDefault()\n              e.stopPropagation()\n            }}\n            @keyup=${(e: KeyboardEvent) => {\n              if (e.key !== 'Enter') {\n                return\n              }\n              this.dispatchEvent(\n                new CustomEvent('change', {\n                  bubbles: true,\n                  detail: this.formatFromEditor(e)\n                })\n              )\n            }}\n          />\n          ~\n          <input name=${name} type=${type} placeholder=\"to\" .value=${to} to />`\n      : html` <input type=${type} name=${name} .value=${this.value} /> `\n  }\n}\n"]}

package/dist/src/filters/ox-grist-filter-editor-select.d.ts

@@ -0,0 +1,4 @@
+import { OxGristFilterEditor } from './ox-grist-filter-editor.js';
+export declare class OxGristFilterEditorSelect extends OxGristFilterEditor {
+    get editorTemplate(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/filters/ox-grist-filter-editor-select.js

@@ -0,0 +1,46 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { OxGristFilterEditor } from './ox-grist-filter-editor.js';
+let OxGristFilterEditorSelect = class OxGristFilterEditorSelect extends OxGristFilterEditor {
+    get editorTemplate() {
+        /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
+        const { filter, record } = this.column;
+        const { options: filterOptions, operator } = filter;
+        var options = filterOptions || record.options || [];
+        if (typeof options === 'function') {
+            if (!filterOptions) {
+                console.warn('ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.');
+            }
+            options = options.call(this.column, this);
+        }
+        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 operator === 'in'
+            ? html `
+          ${options === null || options === void 0 ? void 0 : options.filter((option) => !!option).map((option) => html ` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `)}
+        `
+            : html `
+          ${options === null || options === void 0 ? void 0 : options.map((option) => html ` <div option value=${option.value}>${option.display}&nbsp;</div> `)}
+        `;
+    }
+};
+OxGristFilterEditorSelect = __decorate([
+    customElement('ox-grist-filter-editor-select')
+], OxGristFilterEditorSelect);
+export { OxGristFilterEditorSelect };
+//# sourceMappingURL=ox-grist-filter-editor-select.js.map

package/dist/src/filters/ox-grist-filter-editor-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-filter-editor-select.js","sourceRoot":"","sources":["../../../src/filters/ox-grist-filter-editor-select.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAGjE,IAAa,yBAAyB,GAAtC,MAAa,yBAA0B,SAAQ,mBAAmB;IAChE,IAAI,cAAc;QAChB,4DAA4D;QAC5D,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAEtC,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,MAA4B,CAAA;QAEzE,IAAI,OAAO,GAAG,aAAa,IAAI,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;QAEnD,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE;YACjC,IAAI,CAAC,aAAa,EAAE;gBAClB,OAAO,CAAC,IAAI,CACV,oGAAoG,CACrG,CAAA;aACF;YACD,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;SAC1C;QAED,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE;YACpC,QAAQ,OAAO,MAAM,EAAE;gBACrB,KAAK,QAAQ;oBACX,OAAO;wBACL,OAAO,EAAE,MAAM;wBACf,KAAK,EAAE,MAAM;qBACd,CAAA;gBACH,KAAK,QAAQ;oBACX,OAAO;wBACL,OAAO,EAAE,MAAM,CAAC,OAAO;wBACvB,KAAK,EAAE,MAAM,CAAC,KAAK;qBACpB,CAAA;gBACH;oBACE,OAAO,MAAM,CAAA;aAChB;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,QAAQ,KAAK,IAAI;YACtB,CAAC,CAAC,IAAI,CAAA;YACA,OAAO,aAAP,OAAO,uBAAP,OAAO,CACL,MAAM,CAAC,CAAC,MAAuC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAC7D,GAAG,CACF,CAAC,MAAuC,EAAE,EAAE,CAC1C,IAAI,CAAA,8BAA8B,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,iBAAiB,CACpF;SACJ;YACH,CAAC,CAAC,IAAI,CAAA;YACA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CACZ,CAAC,MAAuC,EAAE,EAAE,CAC1C,IAAI,CAAA,sBAAsB,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,eAAe,CAC1E;SACF,CAAA;IACP,CAAC;CACF,CAAA;AAnDY,yBAAyB;IADrC,aAAa,CAAC,+BAA+B,CAAC;GAClC,yBAAyB,CAmDrC;SAnDY,yBAAyB","sourcesContent":["import { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '../types.js'\nimport { OxGristFilterEditor } from './ox-grist-filter-editor.js'\n\n@customElement('ox-grist-filter-editor-select')\nexport class OxGristFilterEditorSelect extends OxGristFilterEditor {\n  get editorTemplate() {\n    /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */\n    const { filter, record } = this.column\n\n    const { options: filterOptions, operator } = filter as FilterConfigObject\n\n    var options = filterOptions || record.options || []\n\n    if (typeof options === 'function') {\n      if (!filterOptions) {\n        console.warn(\n          'ox-grist의 column.filter 속성에서는 column.record.options의 함수형 options을 사용할 수 없으므로, filter 속성에서 재지정해야한다.'\n        )\n      }\n      options = options.call(this.column, this)\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 operator === 'in'\n      ? html`\n          ${options\n            ?.filter((option: { display: string; value: any }) => !!option)\n            .map(\n              (option: { display: string; value: any }) =>\n                html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `\n            )}\n        `\n      : html`\n          ${options?.map(\n            (option: { display: string; value: any }) =>\n              html` <div option value=${option.value}>${option.display}&nbsp;</div> `\n          )}\n        `\n  }\n}\n"]}

package/dist/src/filters/ox-grist-filter-editor.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+import { ColumnConfig } from '../types';
+export declare class OxGristFilterEditor extends LitElement {
+    static styles: import("lit").CSSResult;
+    name?: string;
+    value?: any;
+    column: ColumnConfig;
+    render(): import("lit-html").TemplateResult<1>;
+    get editor(): HTMLElement | null;
+    firstUpdated(): Promise<void>;
+    select(): void;
+    focus(): void;
+    _onchange(e: Event): void;
+    formatFromEditor(e: Event): any;
+    get editorTemplate(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/filters/ox-grist-filter-editor.js

@@ -0,0 +1,122 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ZERO_COLUMN } from '../configure/zero-config';
+const STYLE = css `
+  :host {
+    display: flex;
+
+    align-items: center;
+
+    width: 100%;
+    height: 100%;
+
+    border: 0;
+    background-color: transparent;
+  }
+
+  input::placeholder {
+    color: var(--ox-input-placeholder-color);
+    opacity: 0.7;
+  }
+
+  input {
+    margin: 0 10px 5px 10px;
+    padding: var(--ox-input-padding);
+    border: var(--ox-input-border);
+    border-radius: var(--ox-input-border-radius);
+    font: var(--ox-input-font);
+    color: var(--ox-input-color, #3a5877);
+  }
+
+  input[type='number'] {
+    padding-right: var(--padding-narrow);
+    max-width: 100px;
+  }
+
+  input[type='datetime-local'] {
+    padding-right: var(--padding-narrow);
+    max-width: 170px;
+  }
+
+  input[name='from'] {
+    margin: 0 0 5px 10px;
+  }
+
+  input[name='to'] {
+    margin: 0 10px 5px 0;
+  }
+`;
+let OxGristFilterEditor = class OxGristFilterEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.column = ZERO_COLUMN;
+    }
+    render() {
+        return this.editorTemplate;
+    }
+    get editor() {
+        return this.renderRoot.firstElementChild;
+    }
+    async firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onchange.bind(this));
+        const align = this.column.record.align;
+        if (align) {
+            this.style.textAlign = align;
+            this.style.textAlignLast = align; /* for select */
+        }
+        this.focus();
+        await this.updateComplete;
+        this.select();
+    }
+    select() {
+        var _a;
+        if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.select) {
+            return this.editor.select();
+        }
+    }
+    focus() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    _onchange(e) {
+        const { name, filter } = this.column;
+        this.dispatchEvent(new CustomEvent('filter-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name,
+                operator: filter === null || filter === void 0 ? void 0 : filter.operator,
+                value: this.formatFromEditor(e)
+            }
+        }));
+    }
+    formatFromEditor(e) {
+        const { filter } = this.column;
+        var { operator } = filter;
+        if (operator === 'between') {
+            Array.from(this.renderRoot.querySelectorAll('input[from], input[to]')).map(input => input.value);
+        }
+        else {
+            return this.renderRoot.querySelector('input').value;
+        }
+    }
+    get editorTemplate() {
+        return html ``;
+    }
+};
+OxGristFilterEditor.styles = STYLE;
+__decorate([
+    property({ type: String })
+], OxGristFilterEditor.prototype, "name", void 0);
+__decorate([
+    property({ type: Object })
+], OxGristFilterEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], OxGristFilterEditor.prototype, "column", void 0);
+OxGristFilterEditor = __decorate([
+    customElement('ox-grist-filter-editor')
+], OxGristFilterEditor);
+export { OxGristFilterEditor };
+//# sourceMappingURL=ox-grist-filter-editor.js.map

package/dist/src/filters/ox-grist-filter-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-filter-editor.js","sourceRoot":"","sources":["../../../src/filters/ox-grist-filter-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '..'\nimport { ZERO_COLUMN } from '../configure/zero-config'\nimport { ColumnConfig } from '../types'\n\nconst STYLE = css`\n  :host {\n    display: flex;\n\n    align-items: center;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n  }\n\n  input::placeholder {\n    color: var(--ox-input-placeholder-color);\n    opacity: 0.7;\n  }\n\n  input {\n    margin: 0 10px 5px 10px;\n    padding: var(--ox-input-padding);\n    border: var(--ox-input-border);\n    border-radius: var(--ox-input-border-radius);\n    font: var(--ox-input-font);\n    color: var(--ox-input-color, #3a5877);\n  }\n\n  input[type='number'] {\n    padding-right: var(--padding-narrow);\n    max-width: 100px;\n  }\n\n  input[type='datetime-local'] {\n    padding-right: var(--padding-narrow);\n    max-width: 170px;\n  }\n\n  input[name='from'] {\n    margin: 0 0 5px 10px;\n  }\n\n  input[name='to'] {\n    margin: 0 10px 5px 0;\n  }\n`\n\n@customElement('ox-grist-filter-editor')\nexport class OxGristFilterEditor extends LitElement {\n  static styles = STYLE\n\n  @property({ type: String }) name?: string\n  @property({ type: Object }) value?: any\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n\n  render() {\n    return this.editorTemplate\n  }\n\n  get editor(): HTMLElement | null {\n    return this.renderRoot.firstElementChild as HTMLElement\n  }\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onchange.bind(this))\n\n    const align = this.column.record.align\n    if (align) {\n      this.style.textAlign = align\n      this.style.textAlignLast = align /* for select */\n    }\n\n    this.focus()\n    await this.updateComplete\n    this.select()\n  }\n\n  select() {\n    if ((this.editor as HTMLInputElement)?.select) {\n      return (this.editor as HTMLInputElement).select()\n    }\n  }\n\n  focus() {\n    this.editor?.focus()\n  }\n\n  _onchange(e: Event): void {\n    const { name, filter } = this.column\n\n    this.dispatchEvent(\n      new CustomEvent('filter-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          name,\n          operator: (filter as FilterConfigObject)?.operator,\n          value: this.formatFromEditor(e)\n        }\n      })\n    )\n  }\n\n  formatFromEditor(e: Event): any {\n    const { filter } = this.column\n    var { operator } = filter as FilterConfigObject\n\n    if (operator === 'between') {\n      Array.from(this.renderRoot.querySelectorAll('input[from], input[to]')).map(\n        input => (input as HTMLInputElement).value\n      )\n    } else {\n      return (this.renderRoot.querySelector('input') as HTMLInputElement).value\n    }\n  }\n\n  get editorTemplate() {\n    return html``\n  }\n}\n"]}