@operato/data-grist 0.3.14 → 0.3.18

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

@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 export const FilterInput = (column, owner) => {
     const filter = column.filter;
-    const type = typeof filter === 'boolean' ? column.type : (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
+    const type = (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
     return html ` <input type=${type} name="${column.name}" /> `;
 };
 //# sourceMappingURL=filter-input.js.map

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

@@ -1 +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,EAAE;IACjE,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;IAC5B,MAAM,IAAI,GAAG,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAEpF,OAAO,IAAI,CAAA,gBAAgB,IAAI,UAAU,MAAM,CAAC,IAAI,OAAO,CAAA;AAC7D,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types'\n\nexport const FilterInput: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter\n  const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type\n\n  return html` <input type=${type} name=\"${column.name}\" /> `\n}\n"]}
+{"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,EAAE;IACjE,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,gBAAgB,IAAI,UAAU,MAAM,CAAC,IAAI,OAAO,CAAA;AAC7D,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nexport const FilterInput: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const type = filter?.type || column.type\n\n  return html` <input type=${type} name=\"${column.name}\" /> `\n}\n"]}

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

@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 export const FilterRangeDate = (column, owner) => {
     const filter = column.filter;
-    var type = typeof filter === 'boolean' ? column.type : (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
+    var type = (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
     if (type === 'datetime') {
         type = 'datetime-local';
     }

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

@@ -1 +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,MAAM,CAAC,MAAM,eAAe,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IACrE,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;IAC5B,IAAI,IAAI,GAAG,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAClF,IAAI,IAAI,KAAK,UAAU,EAAE;QACvB,IAAI,GAAG,gBAAgB,CAAA;KACxB;IAED,OAAO,IAAI,CAAA,iBAAiB,MAAM,CAAC,IAAI,UAAU,IAAI,sBAAsB,MAAM,CAAC,IAAI,UAAU,IAAI,MAAM,CAAA;AAC5G,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types'\n\nexport const FilterRangeDate: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter\n  var type = typeof filter === 'boolean' ? column.type : filter?.type || column.type\n  if (type === 'datetime') {\n    type = 'datetime-local'\n  }\n\n  return html` <input name=\"${column.name}\" type=${type} /> ~ <input name=\"${column.name}\" type=${type} /> `\n}\n"]}
+{"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,MAAM,CAAC,MAAM,eAAe,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IACrE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,IAAI,IAAI,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IACtC,IAAI,IAAI,KAAK,UAAU,EAAE;QACvB,IAAI,GAAG,gBAAgB,CAAA;KACxB;IAED,OAAO,IAAI,CAAA,iBAAiB,MAAM,CAAC,IAAI,UAAU,IAAI,sBAAsB,MAAM,CAAC,IAAI,UAAU,IAAI,MAAM,CAAA;AAC5G,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nexport const FilterRangeDate: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter as FilterConfigObject\n  var type = filter?.type || column.type\n  if (type === 'datetime') {\n    type = 'datetime-local'\n  }\n\n  return html` <input name=\"${column.name}\" type=${type} /> ~ <input name=\"${column.name}\" type=${type} /> `\n}\n"]}

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

@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 export const FilterRangeNumber = (column, owner) => {
     const filter = column.filter;
-    const type = typeof filter === 'boolean' ? column.type : (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
+    const type = (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
     return html `
     <input name="${column.name}" type="number" placeholder="minimum" /> ~
     <input name="${column.name}" type="number" placeholder="maximum" />

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

@@ -1 +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,EAAE;IACvE,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;IAC5B,MAAM,IAAI,GAAG,OAAO,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,KAAI,MAAM,CAAC,IAAI,CAAA;IAEpF,OAAO,IAAI,CAAA;mBACM,MAAM,CAAC,IAAI;mBACX,MAAM,CAAC,IAAI;GAC3B,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types'\n\nexport const FilterRangeNumber: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter\n  const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type\n\n  return html`\n    <input name=\"${column.name}\" type=\"number\" placeholder=\"minimum\" /> ~\n    <input name=\"${column.name}\" type=\"number\" placeholder=\"maximum\" />\n  `\n}\n"]}
+{"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,EAAE;IACvE,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;mBACM,MAAM,CAAC,IAAI;mBACX,MAAM,CAAC,IAAI;GAC3B,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nexport const FilterRangeNumber: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const type = filter?.type || column.type\n\n  return html`\n    <input name=\"${column.name}\" type=\"number\" placeholder=\"minimum\" /> ~\n    <input name=\"${column.name}\" type=\"number\" placeholder=\"maximum\" />\n  `\n}\n"]}

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

@@ -1,8 +1,8 @@
 import '@operato/input/ox-checkbox.js';
 import { html } from 'lit-html';
 export const FilterSelect = (column, owner) => {
-    var _a;
-    const options = (typeof column.filter !== 'boolean' && ((_a = column.filter) === null || _a === void 0 ? void 0 : _a.options)) || [];
+    const filter = column.filter;
+    const options = (filter === null || filter === void 0 ? void 0 : filter.options) || [];
     return html `
     ${options === null || options === void 0 ? void 0 : options.map((option) => html ` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}
   `;

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

@@ -1 +1 @@
-{"version":3,"file":"filter-select.js","sourceRoot":"","sources":["../../../src/filters/filter-select.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;;IAClE,MAAM,OAAO,GAAG,CAAC,OAAO,MAAM,CAAC,MAAM,KAAK,SAAS,KAAI,MAAA,MAAM,CAAC,MAAM,0CAAE,OAAO,CAAA,CAAC,IAAI,EAAE,CAAA;IAEpF,OAAO,IAAI,CAAA;MACP,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,CAAA,8BAA8B,MAAM,IAAI,MAAM,iBAAiB,CAAC;GACxG,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types'\n\nexport const FilterSelect: FilterSelectRenderer = (column, owner) => {\n  const options = (typeof column.filter !== 'boolean' && column.filter?.options) || []\n\n  return html`\n    ${options?.map((option: string) => html` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}\n  `\n}\n"]}
+{"version":3,"file":"filter-select.js","sourceRoot":"","sources":["../../../src/filters/filter-select.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;IAClE,MAAM,MAAM,GAAG,MAAM,CAAC,MAA4B,CAAA;IAClD,MAAM,OAAO,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,KAAI,EAAE,CAAA;IAErC,OAAO,IAAI,CAAA;MACP,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,CAAA,8BAA8B,MAAM,IAAI,MAAM,iBAAiB,CAAC;GACxG,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfigObject, FilterSelectRenderer } from '../types'\n\nexport const FilterSelect: FilterSelectRenderer = (column, owner) => {\n  const filter = column.filter as FilterConfigObject\n  const options = filter?.options || []\n\n  return html`\n    ${options?.map((option: string) => html` <ox-checkbox option value=${option}>${option}</ox-checkbox> `)}\n  `\n}\n"]}

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

@@ -1,19 +1,23 @@
 import '@operato/input/ox-checkbox.js';
 import '@operato/input/ox-select.js';
 import '@operato/popup/ox-popup-list.js';
-import { LitElement, TemplateResult } from 'lit';
-import { GristConfig } from '../types';
+import '@operato/input/ox-input-search.js';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { ColumnConfig, FilterOperator, GristConfig } from '../types';
 export declare type QueryFilterRangeValue = [from: number, to: number];
 export declare type QueryFilter = {
     name: string;
-    operator?: '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';
+    operator: FilterOperator;
     value: any;
 };
 export declare class FiltersForm extends LitElement {
     static styles: import("lit").CSSResult[];
     config: GristConfig;
-    defaultOperator: string;
+    filterColumns: ColumnConfig[];
+    searchColumns: ColumnConfig[];
     form: HTMLFormElement;
+    connectedCallback(): void;
+    updated(changes: PropertyValues<this>): void;
     render(): TemplateResult;
-    get queryFilters(): QueryFilter[];
+    getQueryFilters(): Promise<QueryFilter[]>;
 }

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

@@ -2,20 +2,53 @@ 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 { css, html, LitElement } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, queryAsync, state } from 'lit/decorators.js';
 import { FilterStyles } from './filter-styles';
 import { getFilterRenderer } from './registry';
 let FiltersForm = class FiltersForm extends LitElement {
     constructor() {
         super(...arguments);
-        this.defaultOperator = 'eq';
+        this.filterColumns = [];
+        this.searchColumns = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const grist = this.closest('ox-grist');
+        if (grist) {
+            this.config = grist.compiledConfig;
+            grist.addEventListener('config-change', (e) => {
+                this.config = e.detail;
+            });
+            this.renderRoot.addEventListener('change', async (e) => {
+                e.stopPropagation();
+                this.dispatchEvent(new CustomEvent('change', {
+                    bubbles: true,
+                    composed: true,
+                    detail: await this.getQueryFilters()
+                }));
+            });
+        }
+    }
+    updated(changes) {
+        if (changes.has('config')) {
+            const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter);
+            this.filterColumns = filters.filter((columnConfig) => {
+                const filter = columnConfig.filter;
+                return filter.operator !== 'search';
+            });
+            this.searchColumns = filters.filter(columnConfig => {
+                const filter = columnConfig.filter;
+                return filter.operator === 'search';
+            });
+        }
     }
     render() {
-        const columns = this.config.columns.filter(columnConfig => columnConfig.filter);
         return html `
       <form>
-        ${columns.map((column) => {
+        ${this.searchColumns.length === 0 ? html `` : html ` <ox-input-search name="search"></ox-input-search> `}
+        ${this.filterColumns.map((column) => {
             const { name, label, filter } = column;
             const placeholder = typeof label === 'string'
                 ? name
@@ -24,8 +57,8 @@ let FiltersForm = class FiltersForm extends LitElement {
                     : label.renderer
                         ? label.renderer()
                         : name;
-            const type = typeof filter === 'boolean' ? column.type : (filter === null || filter === void 0 ? void 0 : filter.type) || column.type;
-            const idx = typeof filter === 'boolean' ? 0 : filter.operator === 'between' ? 1 : 0;
+            const type = filter.type;
+            const idx = filter.operator === 'between' ? 1 : 0;
             const renderer = getFilterRenderer(type)[idx];
             if (!renderer) {
                 return html ``;
@@ -43,13 +76,14 @@ let FiltersForm = class FiltersForm extends LitElement {
       </form>
     `;
     }
-    get queryFilters() {
-        var formData = new FormData(this.form);
-        return this.config.columns
-            .filter(columnConfig => columnConfig.filter)
+    async getQueryFilters() {
+        var _a;
+        const formData = new FormData(await this.form);
+        const search = (_a = formData.get('search')) === null || _a === void 0 ? void 0 : _a.toString();
+        var filters = this.filterColumns
             .map((column) => {
             const { name, filter } = column;
-            const operator = typeof filter === 'boolean' ? 'eq' : filter.operator || 'eq';
+            const operator = filter.operator;
             var value = formData.getAll(name);
             if (value.length == 0) {
                 return;
@@ -64,6 +98,17 @@ let FiltersForm = class FiltersForm extends LitElement {
             };
         })
             .filter(result => result !== undefined);
+        if (search) {
+            filters = filters.concat(this.searchColumns.map((column) => {
+                const { name } = column;
+                return {
+                    name,
+                    operator: 'search',
+                    value: `%${search}%`
+                };
+            }));
+        }
+        return filters;
     }
 };
 FiltersForm.styles = [
@@ -84,13 +129,16 @@ FiltersForm.styles = [
     `
 ];
 __decorate([
-    property({ type: Object })
+    state()
 ], FiltersForm.prototype, "config", void 0);
 __decorate([
-    property({ type: String })
-], FiltersForm.prototype, "defaultOperator", void 0);
+    state()
+], FiltersForm.prototype, "filterColumns", void 0);
+__decorate([
+    state()
+], FiltersForm.prototype, "searchColumns", void 0);
 __decorate([
-    query('form')
+    queryAsync('form')
 ], FiltersForm.prototype, "form", void 0);
 FiltersForm = __decorate([
     customElement('ox-filters-form')

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

@@ -1 +1 @@
-{"version":3,"file":"filters-form.js","sourceRoot":"","sources":["../../../src/filters/filters-form.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'\n\nimport { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ColumnConfig } from '..'\nimport { GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\nexport type QueryFilter = {\n  name: string\n  operator?:\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  value: any\n}\n\n@customElement('ox-filters-form')\nexport class FiltersForm 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-direction: row;\n\n        justify-content: space-between;\n      }\n    `\n  ]\n\n  @property({ type: Object }) config!: GristConfig\n  @property({ type: String }) defaultOperator: string = 'eq'\n  @query('form') form!: HTMLFormElement\n\n  render(): TemplateResult {\n    const columns = this.config.columns.filter(columnConfig => columnConfig.filter)\n\n    return html`\n      <form>\n        ${columns.map((column: ColumnConfig) => {\n          const { name, label, filter } = column\n          const placeholder =\n            typeof label === 'string'\n              ? name\n              : typeof label !== 'object'\n              ? name\n              : label.renderer\n              ? label.renderer()\n              : name\n\n          const type = typeof filter === 'boolean' ? column.type : filter?.type || column.type\n          const idx = typeof filter === 'boolean' ? 0 : filter!.operator === 'between' ? 1 : 0\n          const renderer = getFilterRenderer(type)[idx]\n\n          if (!renderer) {\n            return html``\n          }\n\n          return column.type === 'select'\n            ? html`\n                <ox-select name=\"${name}\" placeholder=\"${placeholder}\">\n                  <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                    ${renderer(column, this)}\n                  </ox-popup-list>\n                </ox-select>\n              `\n            : html` <label filter-title>${column.name} ${renderer(column, this)} </label> `\n        })}\n      </form>\n    `\n  }\n\n  get queryFilters(): QueryFilter[] {\n    var formData = new FormData(this.form)\n\n    return this.config.columns\n      .filter(columnConfig => columnConfig.filter)\n      .map((column: ColumnConfig) => {\n        const { name, filter } = column\n        const operator = typeof filter === 'boolean' ? 'eq' : filter!.operator || 'eq'\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        return {\n          name,\n          operator,\n          value: value.length === 1 ? value[0] : value\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n  }\n}\n"]}
+{"version":3,"file":"filters-form.js","sourceRoot":"","sources":["../../../src/filters/filters-form.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 { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, queryAsync, state } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '..'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, GristConfig } from '../types'\nimport { FilterStyles } from './filter-styles'\nimport { getFilterRenderer } from './registry'\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')\nexport class FiltersForm 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-direction: row;\n\n        justify-content: space-between;\n      }\n    `\n  ]\n\n  @state() config!: GristConfig\n\n  @state() filterColumns: ColumnConfig[] = []\n  @state() searchColumns: ColumnConfig[] = []\n\n  @queryAsync('form') form!: HTMLFormElement\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    const grist = this.closest('ox-grist') as DataGrist\n\n    if (grist) {\n      this.config = grist.compiledConfig\n      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      this.renderRoot.addEventListener('change', async (e: Event) => {\n        e.stopPropagation()\n\n        this.dispatchEvent(\n          new CustomEvent('change', {\n            bubbles: true,\n            composed: true,\n            detail: await this.getQueryFilters()\n          })\n        )\n      })\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter)\n      this.filterColumns = filters.filter((columnConfig: ColumnConfig) => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator !== 'search'\n      })\n      this.searchColumns = filters.filter(columnConfig => {\n        const filter = columnConfig.filter as FilterConfigObject\n        return filter!.operator === 'search'\n      })\n    }\n  }\n\n  render(): TemplateResult {\n    return html`\n      <form>\n        ${this.searchColumns.length === 0 ? html`` : html` <ox-input-search name=\"search\"></ox-input-search> `}\n        ${this.filterColumns.map((column: ColumnConfig) => {\n          const { name, label, filter } = column\n          const placeholder =\n            typeof label === 'string'\n              ? name\n              : typeof label !== 'object'\n              ? name\n              : label.renderer\n              ? label.renderer()\n              : name\n\n          const type = (filter as FilterConfigObject).type\n          const idx = (filter as FilterConfigObject).operator === 'between' ? 1 : 0\n          const renderer = getFilterRenderer(type)[idx]\n\n          if (!renderer) {\n            return html``\n          }\n\n          return column.type === 'select'\n            ? html`\n                <ox-select name=\"${name}\" placeholder=\"${placeholder}\">\n                  <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                    ${renderer(column, this)}\n                  </ox-popup-list>\n                </ox-select>\n              `\n            : html` <label filter-title>${column.name} ${renderer(column, this)} </label> `\n        })}\n      </form>\n    `\n  }\n\n  async getQueryFilters(): Promise<QueryFilter[]> {\n    const formData = new FormData(await this.form)\n    const search: string | undefined = formData.get('search')?.toString()\n\n    var filters = this.filterColumns\n      .map((column: ColumnConfig) => {\n        const { name, filter } = column\n        const operator = (filter as FilterConfigObject).operator\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        return {\n          name,\n          operator,\n          value: value.length === 1 ? value[0] : value\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n\n    if (search) {\n      filters = filters.concat(\n        this.searchColumns.map((column: ColumnConfig) => {\n          const { name } = column\n\n          return {\n            name,\n            operator: 'search',\n            value: `%${search}%`\n          }\n        })\n      )\n    }\n\n    return filters\n  }\n}\n"]}

package/dist/src/handlers/record-view-handler.d.ts

@@ -1,4 +1,3 @@
-import '../record-view/record-view';
-import { ColumnConfig, GristData, GristRecord } from '../types';
 import { DataGridField } from '../data-grid/data-grid-field';
+import { ColumnConfig, GristData, GristRecord } from '../types';
 export declare const RecordViewHandler: (columns: ColumnConfig[], data: GristData, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField) => void;

package/dist/src/handlers/record-view-handler.js

@@ -1,44 +1,14 @@
-import '../record-view/record-view';
-import { html } from 'lit';
 /*
  * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
  * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
  */
 export const RecordViewHandler = function (columns, data, column, record, rowIndex, field) {
-    document.dispatchEvent(new CustomEvent('open-popup', {
+    field.dispatchEvent(new CustomEvent('show-record-view', {
+        bubbles: true,
+        composed: true,
         detail: {
-            template: html `
-          <record-view
-            .field=${field}
-            .columns=${columns}
-            .column=${column}
-            .record=${record}
-            .rowIndex=${rowIndex}
-            @reset=${(e) => {
-                field.dispatchEvent(new CustomEvent('record-reset', {
-                    bubbles: true,
-                    composed: true,
-                    detail: record
-                }));
-            }}
-            @cancel=${(e) => {
-                field.dispatchEvent(new CustomEvent('record-reset', {
-                    bubbles: true,
-                    composed: true,
-                    detail: record
-                }));
-                // popup.close()
-            }}
-            @ok=${(e) => {
-                // popup.close()
-            }}
-          ></record-view>
-        `
-        },
-        options: {
-            backdrop: true,
-            size: 'large',
-            title: record['name']
+            record,
+            row: rowIndex
         }
     }));
 };

package/dist/src/handlers/record-view-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"record-view-handler.js","sourceRoot":"","sources":["../../../src/handlers/record-view-handler.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAKnC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B;;;GAGG;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAC/B,OAAuB,EACvB,IAAe,EACf,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB;IAEpB,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,YAAY,EAAE;QAC5B,MAAM,EAAE;YACN,QAAQ,EAAE,IAAI,CAAA;;qBAED,KAAK;uBACH,OAAO;sBACR,MAAM;sBACN,MAAM;wBACJ,QAAQ;qBACX,CAAC,CAAQ,EAAE,EAAE;gBACpB,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;oBAC9B,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE,MAAM;iBACf,CAAC,CACH,CAAA;YACH,CAAC;sBACS,CAAC,CAAQ,EAAE,EAAE;gBACrB,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;oBAC9B,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE,MAAM;iBACf,CAAC,CACH,CAAA;gBACD,gBAAgB;YAClB,CAAC;kBACK,CAAC,CAAQ,EAAE,EAAE;gBACjB,gBAAgB;YAClB,CAAC;;SAEJ;SACF;QACD,OAAO,EAAE;YACP,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;SACtB;KACK,CAAC,CACV,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '../record-view/record-view'\n\nimport { ColumnConfig, GristData, GristRecord } from '../types'\n\nimport { DataGridField } from '../data-grid/data-grid-field'\nimport { html } from 'lit'\n\n/*\n * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,\n * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.\n */\n\nexport const RecordViewHandler = function (\n  columns: ColumnConfig[],\n  data: GristData,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n): void {\n  document.dispatchEvent(\n    new CustomEvent('open-popup', {\n      detail: {\n        template: html`\n          <record-view\n            .field=${field}\n            .columns=${columns}\n            .column=${column}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            @reset=${(e: Event) => {\n              field.dispatchEvent(\n                new CustomEvent('record-reset', {\n                  bubbles: true,\n                  composed: true,\n                  detail: record\n                })\n              )\n            }}\n            @cancel=${(e: Event) => {\n              field.dispatchEvent(\n                new CustomEvent('record-reset', {\n                  bubbles: true,\n                  composed: true,\n                  detail: record\n                })\n              )\n              // popup.close()\n            }}\n            @ok=${(e: Event) => {\n              // popup.close()\n            }}\n          ></record-view>\n        `\n      },\n      options: {\n        backdrop: true,\n        size: 'large',\n        title: record['name']\n      }\n    } as any)\n  )\n}\n"]}
+{"version":3,"file":"record-view-handler.js","sourceRoot":"","sources":["../../../src/handlers/record-view-handler.ts"],"names":[],"mappings":"AAGA;;;GAGG;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAC/B,OAAuB,EACvB,IAAe,EACf,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB;IAEpB,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,kBAAkB,EAAE;QAClC,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE;YACN,MAAM;YACN,GAAG,EAAE,QAAQ;SACd;KACF,CAAC,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristData, GristRecord } from '../types'\n\n/*\n * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,\n * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.\n */\n\nexport const RecordViewHandler = function (\n  columns: ColumnConfig[],\n  data: GristData,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n): void {\n  field.dispatchEvent(\n    new CustomEvent('show-record-view', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        record,\n        row: rowIndex\n      }\n    })\n  )\n}\n"]}

package/dist/src/handlers/select-row-toggle.d.ts

@@ -1,3 +1,3 @@
-import { ColumnConfig, GristData, GristRecord } from '../types';
 import { DataGridField } from '../data-grid/data-grid-field';
+import { ColumnConfig, GristData, GristRecord } from '../types';
 export declare const SelectRowToggle: (columns: ColumnConfig[], data: GristData, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField) => void;

package/dist/src/handlers/select-row-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-row-toggle.js","sourceRoot":"","sources":["../../../src/handlers/select-row-toggle.ts"],"names":[],"mappings":"AAIA;;;GAGG;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,UAC7B,OAAuB,EACvB,IAAe,EACf,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB;IAEpB,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,sBAAsB,EAAE;QACtC,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC;YAC5B,CAAC,CAAC;gBACE,OAAO,EAAE,CAAC,MAAM,CAAC;aAClB;YACH,CAAC,CAAC;gBACE,KAAK,EAAE,CAAC,MAAM,CAAC;aAChB;KACN,CAAC,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { ColumnConfig, GristData, GristRecord } from '../types'\n\nimport { DataGridField } from '../data-grid/data-grid-field'\n\n/*\n * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,\n * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.\n */\n\nexport const SelectRowToggle = function (\n  columns: ColumnConfig[],\n  data: GristData,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n): void {\n  field.dispatchEvent(\n    new CustomEvent('select-record-change', {\n      bubbles: true,\n      composed: true,\n      detail: record['__selected__']\n        ? {\n            removed: [record]\n          }\n        : {\n            added: [record]\n          }\n    })\n  )\n}\n"]}
+{"version":3,"file":"select-row-toggle.js","sourceRoot":"","sources":["../../../src/handlers/select-row-toggle.ts"],"names":[],"mappings":"AAGA;;;GAGG;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,UAC7B,OAAuB,EACvB,IAAe,EACf,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB;IAEpB,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,sBAAsB,EAAE;QACtC,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC;YAC5B,CAAC,CAAC;gBACE,OAAO,EAAE,CAAC,MAAM,CAAC;aAClB;YACH,CAAC,CAAC;gBACE,KAAK,EAAE,CAAC,MAAM,CAAC;aAChB;KACN,CAAC,CACH,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristData, GristRecord } from '../types'\n\n/*\n * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,\n * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.\n */\n\nexport const SelectRowToggle = function (\n  columns: ColumnConfig[],\n  data: GristData,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField\n): void {\n  field.dispatchEvent(\n    new CustomEvent('select-record-change', {\n      bubbles: true,\n      composed: true,\n      detail: record['__selected__']\n        ? {\n            removed: [record]\n          }\n        : {\n            added: [record]\n          }\n    })\n  )\n}\n"]}

package/dist/src/record-view/event-handlers/record-view-body-click-handler.d.ts

@@ -0,0 +1,7 @@
+import { RecordViewBody } from '../record-view-body';
+/**
+ * ox-record-view-body 의 click handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export declare function recordViewBodyClickHandler(this: RecordViewBody, e: Event): void;

package/dist/src/record-view/event-handlers/record-view-body-click-handler.js

@@ -0,0 +1,24 @@
+/**
+ * ox-record-view-body 의 click handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export function recordViewBodyClickHandler(e) {
+    e.stopPropagation();
+    /* target should be 'ox-grid-field' */
+    var target = e.target;
+    if (!this.onlyForEdit && this.currentTarget) {
+        this.focus();
+        this.currentTarget.removeAttribute('editing');
+    }
+    if (target.tagName !== 'OX-GRID-FIELD' || !target.column.record.editable) {
+        this.focus();
+        this.currentTarget = null;
+        return;
+    }
+    this.currentTarget = target;
+    if (!this.onlyForEdit) {
+        target.setAttribute('editing', 'true');
+    }
+}
+//# sourceMappingURL=record-view-body-click-handler.js.map

package/dist/src/record-view/event-handlers/record-view-body-click-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-view-body-click-handler.js","sourceRoot":"","sources":["../../../../src/record-view/event-handlers/record-view-body-click-handler.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,MAAM,UAAU,0BAA0B,CAAuB,CAAQ;IACvE,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,sCAAsC;IACtC,IAAI,MAAM,GAAG,CAAC,CAAC,MAAuB,CAAA;IAEtC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa,EAAE;QAC3C,IAAI,CAAC,KAAK,EAAE,CAAA;QACZ,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;KAC9C;IAED,IAAI,MAAM,CAAC,OAAO,KAAK,eAAe,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;QACxE,IAAI,CAAC,KAAK,EAAE,CAAA;QACZ,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;QACzB,OAAM;KACP;IAED,IAAI,CAAC,aAAa,GAAG,MAAM,CAAA;IAC3B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;KACvC;AACH,CAAC","sourcesContent":["import { DataGridField } from '../../data-grid/data-grid-field'\nimport { RecordViewBody } from '../record-view-body'\n\n/**\n * ox-record-view-body 의 click handler\n *\n * - handler의 this 는 ox-record-view-body임.\n */\nexport function recordViewBodyClickHandler(this: RecordViewBody, e: Event): void {\n  e.stopPropagation()\n\n  /* target should be 'ox-grid-field' */\n  var target = e.target as DataGridField\n\n  if (!this.onlyForEdit && this.currentTarget) {\n    this.focus()\n    this.currentTarget.removeAttribute('editing')\n  }\n\n  if (target.tagName !== 'OX-GRID-FIELD' || !target.column.record.editable) {\n    this.focus()\n    this.currentTarget = null\n    return\n  }\n\n  this.currentTarget = target\n  if (!this.onlyForEdit) {\n    target.setAttribute('editing', 'true')\n  }\n}\n"]}

package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.d.ts

@@ -0,0 +1,7 @@
+import { RecordViewBody } from '../record-view-body';
+/**
+ * ox-record-view-body 의 keydown handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export declare function recordViewBodyKeydownHandler(this: RecordViewBody, e: Event): Promise<void>;

package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.js

@@ -0,0 +1,22 @@
+/**
+ * ox-record-view-body 의 keydown handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export async function recordViewBodyKeydownHandler(e) {
+    switch (e.key) {
+        case 'Esc':
+        case 'Escape':
+        /* TODO 편집이 취소되어야 한다. */
+        case 'Enter':
+            /* 먼저, focus를 옮겨놓아야, focusout 으로 인해서 popup이 닫히는 것을 방지할 수 있다. */
+            !this.onlyForEdit && this.focus();
+            if (!this.onlyForEdit && this.currentTarget) {
+                this.currentTarget.removeAttribute('editing');
+            }
+            this.currentTarget = null;
+            break;
+        default:
+    }
+}
+//# sourceMappingURL=record-view-body-keydown-handler.js.map

package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-view-body-keydown-handler.js","sourceRoot":"","sources":["../../../../src/record-view/event-handlers/record-view-body-keydown-handler.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,4BAA4B,CAAuB,CAAQ;IAC/E,QAAS,CAAmB,CAAC,GAAG,EAAE;QAChC,KAAK,KAAK,CAAC;QACX,KAAK,QAAQ,CAAC;QACd,wBAAwB;QACxB,KAAK,OAAO;YACV,+DAA+D;YAC/D,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,CAAA;YAEjC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa,EAAE;gBAC3C,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;aAC9C;YAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;YAEzB,MAAK;QACP,QAAQ;KACT;AACH,CAAC","sourcesContent":["import { RecordViewBody } from '../record-view-body'\n\n/**\n * ox-record-view-body 의 keydown handler\n *\n * - handler의 this 는 ox-record-view-body임.\n */\nexport async function recordViewBodyKeydownHandler(this: RecordViewBody, e: Event): Promise<void> {\n  switch ((e as KeyboardEvent).key) {\n    case 'Esc':\n    case 'Escape':\n    /* TODO 편집이 취소되어야 한다. */\n    case 'Enter':\n      /* 먼저, focus를 옮겨놓아야, focusout 으로 인해서 popup이 닫히는 것을 방지할 수 있다. */\n      !this.onlyForEdit && this.focus()\n\n      if (!this.onlyForEdit && this.currentTarget) {\n        this.currentTarget.removeAttribute('editing')\n      }\n\n      this.currentTarget = null\n\n      break\n    default:\n  }\n}\n"]}

package/dist/src/record-view/index.d.ts

@@ -1 +1,2 @@
 export * from './record-view';
+export * from './record-creator';

package/dist/src/record-view/index.js

@@ -1,2 +1,3 @@
 export * from './record-view';
+export * from './record-creator';
 //# sourceMappingURL=index.js.map

package/dist/src/record-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/record-view/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA","sourcesContent":["export * from './record-view'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/record-view/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA","sourcesContent":["export * from './record-view'\nexport * from './record-creator'\n"]}

package/dist/src/record-view/record-creator.d.ts

@@ -0,0 +1,16 @@
+import '@material/mwc-icon';
+import './record-view';
+import { LitElement } from 'lit';
+import { DataGrist } from '../data-grist';
+export declare class RecordCreator extends LitElement {
+    grist?: DataGrist;
+    callback?: (operation: {
+        [key: string]: any;
+    }) => boolean;
+    lightPopup: boolean;
+    constructor();
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    lightPopupRecordView(): void;
+    popupRecordView(): void;
+}

package/dist/src/record-view/record-creator.js

@@ -0,0 +1,145 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import './record-view';
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { OxPopup } from '@operato/popup';
+let RecordCreator = class RecordCreator extends LitElement {
+    constructor() {
+        super();
+        this.lightPopup = false;
+        this.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (this.lightPopup) {
+                this.lightPopupRecordView();
+            }
+            else {
+                this.popupRecordView();
+            }
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.grist = this.closest('ox-grist');
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    lightPopupRecordView() {
+        const config = this.grist.compiledConfig;
+        var title = 'create';
+        const rowIndex = -1;
+        var record = {};
+        const columns = config.columns;
+        var popup = OxPopup.open({
+            template: html `
+        <div title>${title}</div>
+        <ox-record-view
+          only-for-edit
+          @field-change=${(e) => {
+                const view = e.currentTarget;
+                var { after, before, column, record, row } = e.detail;
+                var validation = column.validation;
+                if (validation && typeof validation == 'function') {
+                    if (!validation.call(this, after, before, record, column)) {
+                        return;
+                    }
+                }
+                view.record = {
+                    ...record,
+                    [column.name]: after
+                };
+            }}
+          .columns=${columns}
+          .record=${record}
+          .rowIndex=${rowIndex}
+          @reset=${(e) => {
+                const view = e.currentTarget;
+                view.record = {};
+            }}
+          @cancel=${(e) => {
+                popup.close();
+            }}
+          @ok=${(e) => {
+                popup.close();
+                const view = e.currentTarget;
+                this.dispatchEvent(new CustomEvent('ok', {
+                    bubbles: true,
+                    composed: true,
+                    detail: view.record
+                }));
+            }}
+        ></ox-record-view>
+      `,
+            parent: document.body
+        });
+    }
+    popupRecordView() {
+        const config = this.grist.compiledConfig;
+        const rowIndex = -1;
+        var record = {};
+        const columns = config.columns;
+        var title = 'create';
+        var recordView = document.createElement('ox-record-view');
+        recordView.setAttribute('only-for-edit', '');
+        recordView.columns = columns;
+        recordView.record = record;
+        recordView.rowIndex = rowIndex;
+        document.dispatchEvent(new CustomEvent('open-popup', {
+            detail: {
+                template: recordView,
+                options: {
+                    backdrop: true,
+                    size: 'large',
+                    title
+                },
+                callback: (popup) => {
+                    recordView.addEventListener('reset', (e) => {
+                        const view = e.currentTarget;
+                        view.record = {};
+                    });
+                    recordView.addEventListener('cancel', (e) => {
+                        popup.close();
+                    });
+                    recordView.addEventListener('ok', async (e) => {
+                        var _a;
+                        const view = e.currentTarget;
+                        if (await ((_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, view.record))) {
+                            popup.close();
+                        }
+                    });
+                    recordView.addEventListener('field-change', (e) => {
+                        const view = e.currentTarget;
+                        var { after, before, column, record, row } = e.detail;
+                        var validation = column.validation;
+                        if (validation && typeof validation == 'function') {
+                            if (!validation.call(this, after, before, record, column)) {
+                                return;
+                            }
+                        }
+                        view.record = {
+                            ...record,
+                            [column.name]: after
+                        };
+                    });
+                    popup.onclosed = () => { };
+                }
+            }
+        }));
+    }
+};
+__decorate([
+    state()
+], RecordCreator.prototype, "grist", void 0);
+__decorate([
+    property({ type: Object })
+], RecordCreator.prototype, "callback", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'light-popup' })
+], RecordCreator.prototype, "lightPopup", void 0);
+RecordCreator = __decorate([
+    customElement('ox-record-creator')
+], RecordCreator);
+export { RecordCreator };
+//# sourceMappingURL=record-creator.js.map