@operato/data-grist 1.0.0-beta.9 → 1.0.6

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":"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"]}
+{"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,IAAI;aACJ,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'\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 == 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-styles.js

@@ -25,17 +25,14 @@ export const FilterStyles = css `
     text-transform: capitalize;
   }
 
-  [filter] input::placeholder,
   input::placeholder {
     color: var(--ox-input-placeholder-color);
     opacity: 0.6;
   }
-  [filter] input,
+
   ox-select,
-  input[type='number'],
-  input[type='text'],
-  input[type='datetime-local'] {
-    padding: var(--ox-input-padding);
+  input {
+    padding: var(--input-padding);
     border: none;
     border-bottom: var(--ox-input-border);
     font: var(--ox-input-font);
@@ -43,9 +40,7 @@ export const FilterStyles = css `
   }
 
   ox-select:focus,
-  input[type='number']:focus,
-  input[type='text']:focus,
-  input[type='datetime-local']:focus {
+  input:focus {
     outline: none;
     border-bottom: var(--ox-input-focus-border);
     color: var(--primary-color);
@@ -54,37 +49,37 @@ export const FilterStyles = css `
     padding: var(--ox-select-padding);
   }
 
-  [filter] input[type='number'],
   input[type='number'] {
     padding-right: var(--padding-narrow);
     max-width: 90px;
   }
-  [filter] input[type='datetime-local'],
-  input[type='datetime-local'] {
-    padding-right: var(--padding-narrow);
+
+  input[type*='date'],
+  input[type*='time'],
+  input[type='week'],
+  input[type='month'] {
+    padding: 8px var(--padding-narrow) 8px var(--padding-default);
     max-width: 170px;
   }
-  [filter] input[name='from'] {
-    margin: 0 0 5px 10px;
-  }
-  [filter] input[name='to'] {
-    margin: 0 10px 5px 0;
-  }
 
   @media only screen and (max-width: 460px) {
     :host {
       --ox-filters-form-label-font: bold 13px var(--theme-font);
       --ox-input-font: normal 16px var(--theme-font);
+      --ox-filters-form-gap: var(--margin-narrow);
     }
+
     ox-checkbox {
       margin-top: var(--margin-narrow);
     }
-    [filter] input[type='number'],
-    input[type='number'] {
+
+    input[from],
+    input[to] {
       max-width: 44%;
     }
-    [filter] input[type='datetime-local'],
-    input[type='datetime-local'] {
+
+    input[type*='datetime'][from],
+    input[type*='datetime'][to] {
       padding-right: var(--padding-narrow);
       min-width: 91%;
     }

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

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0F9B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const FilterStyles = css`\n  :host {\n    --ox-input-placeholder-color: var(--primary-color);\n\n    --ox-input-padding: var(--padding-narrow) var(--padding-default);\n    --ox-input-border: 1px solid rgba(0, 0, 0, 0.2);\n    --ox-input-focus-border: 1px solid var(--primary-color);\n    --ox-input-border-radius: var(--border-radius);\n    --ox-input-font: normal 14px var(--theme-font);\n    --ox-input-color: var(--primary-text-color);\n\n    --ox-filters-form-gap: var(--margin-wide);\n    --ox-filters-form-label-font: var(--label-font);\n    --ox-filters-form-label-color: var(--label-color);\n    --ox-select-padding: 0 var(--padding-narrow);\n  }\n\n  label {\n    font: var(--ox-filters-form-label-font);\n    color: var(--ox-filters-form-label-color);\n  }\n  span {\n    margin-right: var(--margin-narrow);\n    text-transform: capitalize;\n  }\n\n  [filter] input::placeholder,\n  input::placeholder {\n    color: var(--ox-input-placeholder-color);\n    opacity: 0.6;\n  }\n  [filter] input,\n  ox-select,\n  input[type='number'],\n  input[type='text'],\n  input[type='datetime-local'] {\n    padding: var(--ox-input-padding);\n    border: none;\n    border-bottom: var(--ox-input-border);\n    font: var(--ox-input-font);\n    color: var(--ox-input-color);\n  }\n\n  ox-select:focus,\n  input[type='number']:focus,\n  input[type='text']:focus,\n  input[type='datetime-local']:focus {\n    outline: none;\n    border-bottom: var(--ox-input-focus-border);\n    color: var(--primary-color);\n  }\n  ox-select {\n    padding: var(--ox-select-padding);\n  }\n\n  [filter] input[type='number'],\n  input[type='number'] {\n    padding-right: var(--padding-narrow);\n    max-width: 90px;\n  }\n  [filter] input[type='datetime-local'],\n  input[type='datetime-local'] {\n    padding-right: var(--padding-narrow);\n    max-width: 170px;\n  }\n  [filter] input[name='from'] {\n    margin: 0 0 5px 10px;\n  }\n  [filter] input[name='to'] {\n    margin: 0 10px 5px 0;\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-input-font: normal 16px var(--theme-font);\n    }\n    ox-checkbox {\n      margin-top: var(--margin-narrow);\n    }\n    [filter] input[type='number'],\n    input[type='number'] {\n      max-width: 44%;\n    }\n    [filter] input[type='datetime-local'],\n    input[type='datetime-local'] {\n      padding-right: var(--padding-narrow);\n      min-width: 91%;\n    }\n  }\n`\n"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqF9B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const FilterStyles = css`\n  :host {\n    --ox-input-placeholder-color: var(--primary-color);\n\n    --ox-input-padding: var(--padding-narrow) var(--padding-default);\n    --ox-input-border: 1px solid rgba(0, 0, 0, 0.2);\n    --ox-input-focus-border: 1px solid var(--primary-color);\n    --ox-input-border-radius: var(--border-radius);\n    --ox-input-font: normal 14px var(--theme-font);\n    --ox-input-color: var(--primary-text-color);\n\n    --ox-filters-form-gap: var(--margin-wide);\n    --ox-filters-form-label-font: var(--label-font);\n    --ox-filters-form-label-color: var(--label-color);\n    --ox-select-padding: 0 var(--padding-narrow);\n  }\n\n  label {\n    font: var(--ox-filters-form-label-font);\n    color: var(--ox-filters-form-label-color);\n  }\n  span {\n    margin-right: var(--margin-narrow);\n    text-transform: capitalize;\n  }\n\n  input::placeholder {\n    color: var(--ox-input-placeholder-color);\n    opacity: 0.6;\n  }\n\n  ox-select,\n  input {\n    padding: var(--input-padding);\n    border: none;\n    border-bottom: var(--ox-input-border);\n    font: var(--ox-input-font);\n    color: var(--ox-input-color);\n  }\n\n  ox-select:focus,\n  input:focus {\n    outline: none;\n    border-bottom: var(--ox-input-focus-border);\n    color: var(--primary-color);\n  }\n  ox-select {\n    padding: var(--ox-select-padding);\n  }\n\n  input[type='number'] {\n    padding-right: var(--padding-narrow);\n    max-width: 90px;\n  }\n\n  input[type*='date'],\n  input[type*='time'],\n  input[type='week'],\n  input[type='month'] {\n    padding: 8px var(--padding-narrow) 8px var(--padding-default);\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-input-font: normal 16px var(--theme-font);\n      --ox-filters-form-gap: var(--margin-narrow);\n    }\n\n    ox-checkbox {\n      margin-top: var(--margin-narrow);\n    }\n\n    input[from],\n    input[to] {\n      max-width: 44%;\n    }\n\n    input[type*='datetime'][from],\n    input[type*='datetime'][to] {\n      padding-right: var(--padding-narrow);\n      min-width: 91%;\n    }\n  }\n`\n"]}

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

@@ -23,7 +23,7 @@ let FiltersForm = class FiltersForm extends LitElement {
             grist.addEventListener('config-change', (e) => {
                 this.config = e.detail;
             });
-            grist.addEventListener('filters-change', (e) => {
+            grist.addEventListener('fetch-params-change', (e) => {
                 const { filters, from } = e.detail || {};
                 if (from === 'filters-form') {
                     return;
@@ -31,7 +31,7 @@ let FiltersForm = class FiltersForm extends LitElement {
                 this.value = filters;
             });
             this.renderRoot.addEventListener('change', async (e) => {
-                this.dispatchEvent(new CustomEvent('filters-change', {
+                this.dispatchEvent(new CustomEvent('fetch-params-change', {
                     bubbles: true,
                     composed: true,
                     detail: {
@@ -72,7 +72,9 @@ let FiltersForm = class FiltersForm extends LitElement {
       >
         ${this.searchColumns.length === 0
             ? html ``
-            : html ` <ox-input-search name="search" .value=${searchValue}></ox-input-search> `}
+            : html `
+              <ox-input-search name="search" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>
+            `}
         ${this.filterColumns.map((column) => {
             var _a, _b;
             const { name, header, label, filter } = column;

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'\nimport '@operato/input/ox-input-search.js'\n\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, queryAsync, state } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '..'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, FilterValue, 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-flow: row wrap;\n        gap: var(--ox-filters-form-gap);\n      }\n\n      form > * {\n        display: flex;\n        align-items: center;\n      }\n\n      @media only screen and (max-width: 460px) {\n        form {\n          flex-direction: column;\n        }\n\n        label,\n        label span,\n        ox-select {\n          display: block;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: FilterValue[] = []\n  @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      this.value = grist.filters || []\n\n      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      grist.addEventListener('filters-change', (e: Event) => {\n        const { filters, from } = (e as CustomEvent).detail || {}\n        if (from === 'filters-form') {\n          return\n        }\n\n        this.value = filters\n      })\n\n      this.renderRoot.addEventListener('change', async (e: Event) => {\n        this.dispatchEvent(\n          new CustomEvent('filters-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              filters: await this.getQueryFilters(),\n              from: 'filters-form'\n            }\n          })\n        )\n      })\n    }\n  }\n\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    const { name: firstSearchFilterName } = this.searchColumns[0] || {}\n    const searchValue =\n      (firstSearchFilterName &&\n        (this.value?.find(filter => filter.name === firstSearchFilterName)?.value as string)?.match(\n          /^\\%(.*)\\%$/\n        )?.[1]) ||\n      ''\n\n    return html`\n      <form\n        @submit=${(e: Event) => {\n          e.stopPropagation()\n          e.preventDefault()\n\n          const grist = this.closest('ox-grist') as DataGrist\n\n          grist && grist.fetch()\n        }}\n      >\n        ${this.searchColumns.length === 0\n          ? html``\n          : html` <ox-input-search name=\"search\" .value=${searchValue}></ox-input-search> `}\n        ${this.filterColumns.map((column: ColumnConfig) => {\n          const { name, header, label, filter } = column\n          const labelText =\n            typeof label === 'object' && label.renderer ? label.renderer() : header.renderer(column) || name\n\n          const type = (filter as FilterConfigObject).type\n          const operator = (filter as FilterConfigObject).operator\n          const idx = operator === 'between' ? 1 : 0\n          const renderer = getFilterRenderer(\n            operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n              ? 'text'\n              : type\n          )[idx]\n          const value = this.value?.find(filter => filter.name == name)?.value\n\n          if (!renderer) {\n            return html``\n          }\n\n          return type !== 'select'\n            ? html` <label filter-title><span>${labelText}</span> ${renderer(column, value, this)} </label> `\n            : operator === 'in'\n            ? html`\n                <ox-select\n                  name=${name}\n                  placeholder=${labelText}\n                  .value=${value}\n                  @change=${(e: CustomEvent) =>\n                    e.target?.dispatchEvent(\n                      new CustomEvent('filter-change', {\n                        detail: {\n                          name,\n                          operator,\n                          value: e.detail\n                        }\n                      })\n                    )}\n                >\n                  <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                    ${renderer(column, value, this)}\n                  </ox-popup-list>\n                </ox-select>\n              `\n            : html`\n                <ox-select\n                  name=${name}\n                  placeholder=${labelText}\n                  .value=${value}\n                  @change=${(e: CustomEvent) =>\n                    e.target?.dispatchEvent(\n                      new CustomEvent('filter-change', {\n                        detail: {\n                          name,\n                          operator,\n                          value: e.detail\n                        }\n                      })\n                    )}\n                >\n                  <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>\n                </ox-select>\n              `\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, type, 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        const filterValue = value.map(v => {\n          const value = v.toString()\n\n          /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n          switch (type) {\n            case 'integer':\n            case 'float':\n            case 'number':\n            case 'progress':\n            case 'checkbox':\n            case 'boolean':\n              return !value ? undefined : JSON.parse(value)\n            default:\n              return value\n          }\n        })\n\n        return {\n          name,\n          operator,\n          value: filterValue.length === 1 ? filterValue[0] : filterValue\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n\n    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"]}
+{"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, property, queryAsync, state } from 'lit/decorators.js'\n\nimport { FilterConfigObject } from '..'\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, FilterOperator, FilterValue, 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-flow: row wrap;\n        gap: var(--ox-filters-form-gap);\n      }\n\n      form > * {\n        display: flex;\n        align-items: center;\n      }\n\n      @media only screen and (max-width: 460px) {\n        form {\n          flex-direction: column;\n        }\n\n        label,\n        label span,\n        ox-select {\n          display: block;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: FilterValue[] = []\n  @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      this.value = grist.filters || []\n\n      grist.addEventListener('config-change', (e: Event) => {\n        this.config = (e as CustomEvent).detail\n      })\n\n      grist.addEventListener('fetch-params-change', (e: Event) => {\n        const { filters, from } = (e as CustomEvent).detail || {}\n        if (from === 'filters-form') {\n          return\n        }\n\n        this.value = filters\n      })\n\n      this.renderRoot.addEventListener('change', async (e: Event) => {\n        this.dispatchEvent(\n          new CustomEvent('fetch-params-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              filters: await this.getQueryFilters(),\n              from: 'filters-form'\n            }\n          })\n        )\n      })\n    }\n  }\n\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    const { name: firstSearchFilterName } = this.searchColumns[0] || {}\n    const searchValue =\n      (firstSearchFilterName &&\n        (this.value?.find(filter => filter.name === firstSearchFilterName)?.value as string)?.match(\n          /^\\%(.*)\\%$/\n        )?.[1]) ||\n      ''\n\n    return html`\n      <form\n        @submit=${(e: Event) => {\n          e.stopPropagation()\n          e.preventDefault()\n\n          const grist = this.closest('ox-grist') as DataGrist\n\n          grist && grist.fetch()\n        }}\n      >\n        ${this.searchColumns.length === 0\n          ? html``\n          : html`\n              <ox-input-search name=\"search\" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>\n            `}\n        ${this.filterColumns.map((column: ColumnConfig) => {\n          const { name, header, label, filter } = column\n          const labelText =\n            typeof label === 'object' && label.renderer ? label.renderer() : header.renderer(column) || name\n\n          const type = (filter as FilterConfigObject).type\n          const operator = (filter as FilterConfigObject).operator\n          const idx = operator === 'between' ? 1 : 0\n          const renderer = getFilterRenderer(\n            operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n              ? 'text'\n              : type\n          )[idx]\n          const value = this.value?.find(filter => filter.name == name)?.value\n\n          if (!renderer) {\n            return html``\n          }\n\n          return type !== 'select'\n            ? html` <label filter-title><span>${labelText}</span> ${renderer(column, value, this)} </label> `\n            : operator === 'in'\n            ? html`\n                <ox-select\n                  name=${name}\n                  placeholder=${labelText}\n                  .value=${value}\n                  @change=${(e: CustomEvent) =>\n                    e.target?.dispatchEvent(\n                      new CustomEvent('filter-change', {\n                        detail: {\n                          name,\n                          operator,\n                          value: e.detail\n                        }\n                      })\n                    )}\n                >\n                  <ox-popup-list multiple attr-selected=\"checked\" with-search>\n                    ${renderer(column, value, this)}\n                  </ox-popup-list>\n                </ox-select>\n              `\n            : html`\n                <ox-select\n                  name=${name}\n                  placeholder=${labelText}\n                  .value=${value}\n                  @change=${(e: CustomEvent) =>\n                    e.target?.dispatchEvent(\n                      new CustomEvent('filter-change', {\n                        detail: {\n                          name,\n                          operator,\n                          value: e.detail\n                        }\n                      })\n                    )}\n                >\n                  <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>\n                </ox-select>\n              `\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, type, 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        const filterValue = value.map(v => {\n          const value = v.toString()\n\n          /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n          switch (type) {\n            case 'integer':\n            case 'float':\n            case 'number':\n            case 'progress':\n            case 'checkbox':\n            case 'boolean':\n              return !value ? undefined : JSON.parse(value)\n            default:\n              return value\n          }\n        })\n\n        return {\n          name,\n          operator,\n          value: filterValue.length === 1 ? filterValue[0] : filterValue\n        }\n      })\n      .filter(result => result !== undefined) as QueryFilter[]\n\n    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/filters/registry.d.ts

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

package/dist/src/filters/registry.js

@@ -1,8 +1,9 @@
-import { FilterCheckbox } from './filter-checkbox';
-import { FilterInput } from './filter-input';
-import { FilterRangeDate } from './filter-range-date';
-import { FilterRangeNumber } from './filter-range-number';
-import { FilterSelect } from './filter-select';
+import { FilterCheckbox } from './filter-checkbox.js';
+import { FilterInputBarcode } from './filter-input-barcode.js';
+import { FilterInput } from './filter-input.js';
+import { FilterRangeDate } from './filter-range-date.js';
+import { FilterRangeNumber } from './filter-range-number.js';
+import { FilterSelect } from './filter-select.js';
 var RENDERERS = {
     string: [FilterInput],
     text: [FilterInput],
@@ -23,7 +24,9 @@ var RENDERERS = {
     progress: [FilterInput, FilterRangeNumber],
     link: [FilterInput],
     image: [FilterInput],
-    json5: [FilterInput]
+    json5: [FilterInput],
+    scanner: [FilterInputBarcode],
+    barcode: [FilterInputBarcode]
 };
 export function registerFilterRenderer(type, renderer) {
     RENDERERS[type] = renderer;
@@ -35,7 +38,7 @@ export function getFilterRenderers() {
     return { ...RENDERERS };
 }
 export function getFilterRenderer(type) {
-    if (typeof type == 'function') {
+    if (typeof type === 'function') {
         return type;
     }
     return RENDERERS[type || 'text'] || [FilterInput];

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

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

package/dist/src/gutters/gutter-button.js

@@ -2,7 +2,7 @@ import '@material/mwc-icon';
 import { html } from 'lit';
 export class GutterButton {
     static instance(config = {}) {
-        var { icon = 'edit' } = config;
+        var { icon = 'edit', title } = config;
         var iconFn = typeof icon == 'function' ? icon : () => icon;
         var inlineHeaderStyle = 'font-size: var(--grid-record-fontsize);margin-top:1px;';
         var inlineRecordStyle = 'font-size: var(--grid-record-fontsize);margin-top:1px;';
@@ -14,17 +14,18 @@ export class GutterButton {
             sortable: false,
             header: {
                 renderer: function (column) {
-                    return html ` <mwc-icon style=${inlineHeaderStyle}>${iconFn()}</mwc-icon> `;
+                    return html ` <mwc-icon style=${inlineHeaderStyle} title=${title}>${iconFn()}</mwc-icon> `;
                 }
             },
             record: {
                 align: 'center',
                 renderer: function (value, column, record, rowIndex, field) {
-                    return html ` <mwc-icon style=${inlineRecordStyle}>${iconFn(record)}</mwc-icon> `;
+                    return html ` <mwc-icon style=${inlineRecordStyle} title=${title}>${iconFn(record)}</mwc-icon> `;
                 }
             },
             forGrid: true,
-            forList: true
+            forList: true,
+            forCard: true
         }, config);
     }
 }

package/dist/src/gutters/gutter-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"gutter-button.js","sourceRoot":"","sources":["../../../src/gutters/gutter-button.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,OAAO,YAAY;IACvB,MAAM,CAAC,QAAQ,CAAC,SAAc,EAAE;QAC9B,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,GAAG,MAAM,CAAA;QAE9B,IAAI,MAAM,GAAG,OAAO,IAAI,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAA;QAE1D,IAAI,iBAAiB,GAAG,wDAAwD,CAAA;QAChF,IAAI,iBAAiB,GAAG,wDAAwD,CAAA;QAEhF,OAAO,MAAM,CAAC,MAAM,CAClB,EAAE,EACF;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,QAAQ;YACpB,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,KAAK;YACf,MAAM,EAAE;gBACN,QAAQ,EAAE,UAAU,MAAM;oBACxB,OAAO,IAAI,CAAA,oBAAoB,iBAAiB,IAAI,MAAM,EAAE,cAAc,CAAA;gBAC5E,CAAmB;aACpB;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,QAAQ;gBACf,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;oBACxD,OAAO,IAAI,CAAA,oBAAoB,iBAAiB,IAAI,MAAM,CAAC,MAAM,CAAC,cAAc,CAAA;gBAClF,CAAkB;aACnB;YACD,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;SACd,EACD,MAAM,CACP,CAAA;IACH,CAAC;CACF","sourcesContent":["import '@material/mwc-icon'\n\nimport { html } from 'lit'\n\nimport { FieldRenderer, HeaderRenderer } from '../types'\n\nexport class GutterButton {\n  static instance(config: any = {}) {\n    var { icon = 'edit' } = config\n\n    var iconFn = typeof icon == 'function' ? icon : () => icon\n\n    var inlineHeaderStyle = 'font-size: var(--grid-record-fontsize);margin-top:1px;'\n    var inlineRecordStyle = 'font-size: var(--grid-record-fontsize);margin-top:1px;'\n\n    return Object.assign(\n      {},\n      {\n        type: 'gutter',\n        gutterType: 'button',\n        width: 26,\n        resizable: false,\n        sortable: false,\n        header: {\n          renderer: function (column) {\n            return html` <mwc-icon style=${inlineHeaderStyle}>${iconFn()}</mwc-icon> `\n          } as HeaderRenderer\n        },\n        record: {\n          align: 'center',\n          renderer: function (value, column, record, rowIndex, field) {\n            return html` <mwc-icon style=${inlineRecordStyle}>${iconFn(record)}</mwc-icon> `\n          } as FieldRenderer\n        },\n        forGrid: true,\n        forList: true\n      },\n      config\n    )\n  }\n}\n"]}
+{"version":3,"file":"gutter-button.js","sourceRoot":"","sources":["../../../src/gutters/gutter-button.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,OAAO,YAAY;IACvB,MAAM,CAAC,QAAQ,CAAC,SAAc,EAAE;QAC9B,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,CAAA;QAErC,IAAI,MAAM,GAAG,OAAO,IAAI,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAA;QAE1D,IAAI,iBAAiB,GAAG,wDAAwD,CAAA;QAChF,IAAI,iBAAiB,GAAG,wDAAwD,CAAA;QAEhF,OAAO,MAAM,CAAC,MAAM,CAClB,EAAE,EACF;YACE,IAAI,EAAE,QAAQ;YACd,UAAU,EAAE,QAAQ;YACpB,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,KAAK;YACf,MAAM,EAAE;gBACN,QAAQ,EAAE,UAAU,MAAM;oBACxB,OAAO,IAAI,CAAA,oBAAoB,iBAAiB,UAAU,KAAK,IAAI,MAAM,EAAE,cAAc,CAAA;gBAC3F,CAAmB;aACpB;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,QAAQ;gBACf,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;oBACxD,OAAO,IAAI,CAAA,oBAAoB,iBAAiB,UAAU,KAAK,IAAI,MAAM,CAAC,MAAM,CAAC,cAAc,CAAA;gBACjG,CAAkB;aACnB;YACD,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;SACd,EACD,MAAM,CACP,CAAA;IACH,CAAC;CACF","sourcesContent":["import '@material/mwc-icon'\n\nimport { html } from 'lit'\n\nimport { FieldRenderer, HeaderRenderer } from '../types'\n\nexport class GutterButton {\n  static instance(config: any = {}) {\n    var { icon = 'edit', title } = config\n\n    var iconFn = typeof icon == 'function' ? icon : () => icon\n\n    var inlineHeaderStyle = 'font-size: var(--grid-record-fontsize);margin-top:1px;'\n    var inlineRecordStyle = 'font-size: var(--grid-record-fontsize);margin-top:1px;'\n\n    return Object.assign(\n      {},\n      {\n        type: 'gutter',\n        gutterType: 'button',\n        width: 26,\n        resizable: false,\n        sortable: false,\n        header: {\n          renderer: function (column) {\n            return html` <mwc-icon style=${inlineHeaderStyle} title=${title}>${iconFn()}</mwc-icon> `\n          } as HeaderRenderer\n        },\n        record: {\n          align: 'center',\n          renderer: function (value, column, record, rowIndex, field) {\n            return html` <mwc-icon style=${inlineRecordStyle} title=${title}>${iconFn(record)}</mwc-icon> `\n          } as FieldRenderer\n        },\n        forGrid: true,\n        forList: true,\n        forCard: true\n      },\n      config\n    )\n  }\n}\n"]}

package/dist/src/gutters/gutter-dirty.d.ts

@@ -1,5 +1,5 @@
 import '@material/mwc-icon';
-import { ColumnConfig, FieldRenderer } from '../types';
+import { ColumnConfig, FieldRenderer, GristEventHandler } from '../types';
 export declare class GutterDirty {
     static instance(config?: ColumnConfig): {
         type: string;
@@ -14,5 +14,9 @@ export declare class GutterDirty {
         };
         forGrid: boolean;
         forList: boolean;
+        forCard: boolean;
+        handlers: {
+            dblclick: GristEventHandler;
+        };
     } & ColumnConfig;
 }

package/dist/src/gutters/gutter-dirty.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import '@material/mwc-icon';
-import { LitElement, css, html } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 let GutterDirtyElement = class GutterDirtyElement extends LitElement {
     render() {
@@ -60,7 +60,22 @@ export class GutterDirty {
                 }
             },
             forGrid: true,
-            forList: false
+            forList: false,
+            forCard: false,
+            handlers: {
+                dblclick: ((columns, data, column, record, rowIndex, target) => {
+                    target.dispatchEvent(new CustomEvent('set-select-block', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            startRow: rowIndex,
+                            startColumn: 0,
+                            endRow: rowIndex,
+                            endColumn: -1
+                        }
+                    }));
+                })
+            }
         }, config);
     }
 }

package/dist/src/gutters/gutter-dirty.js.map

@@ -1 +1 @@
-{"version":3,"file":"gutter-dirty.js","sourceRoot":"","sources":["../../../src/gutters/gutter-dirty.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAG3B,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAyBzC,MAAM;QACJ,QAAQ,IAAI,CAAC,KAAK,EAAE;YAClB,KAAK,GAAG;gBACN,OAAO,IAAI,CAAA,oBAAoB,WAAW,6BAA6B,CAAA;YACzE,KAAK,GAAG;gBACN,OAAO,IAAI,CAAA,oBAAoB,WAAW,mCAAmC,CAAA;YAC/E,KAAK,GAAG;gBACN,OAAO,IAAI,CAAA,oBAAoB,WAAW,+BAA+B,CAAA;YAC3E;gBACE,OAAO,EAAE,CAAA;SACZ;IACH,CAAC;CACF,CAAA;AApCQ,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;GAoBlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAe;AAvBtC,kBAAkB;IADvB,aAAa,CAAC,yBAAyB,CAAC;GACnC,kBAAkB,CAqCvB;AAED,MAAM,WAAW,GACf,sGAAsG,CAAA;AAExG,MAAM,OAAO,WAAW;IACtB,MAAM,CAAC,QAAQ,CAAC,SAAuB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAS;QACjF,OAAO,MAAM,CAAC,MAAM,CAClB,EAAE,EACF;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,WAAW;YACjB,UAAU,EAAE,OAAO;YACnB,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,KAAK;YACf,MAAM,EAAE,EAAE;YACV,MAAM,EAAE;gBACN,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;oBACxD,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,KAAK,8BAA8B,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;gBACpG,CAAkB;aACnB;YACD,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,KAAK;SACf,EACD,MAAM,CACP,CAAA;IACH,CAAC;CACF","sourcesContent":["import '@material/mwc-icon'\n\nimport { ColumnConfig, FieldRenderer } from '../types'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-gutter-dirty-element')\nclass GutterDirtyElement extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      text-align: center !important;\n    }\n    mwc-icon {\n      width: var(--grid-record-dirty-icon-size);\n      height: var(--grid-record-dirty-icon-size);\n      border-radius: 50%;\n      opacity: 0.8;\n    }\n    [add] {\n      background-color: var(--status-success-color);\n    }\n    [remove] {\n      background-color: var(--status-danger-color);\n    }\n    [done] {\n      background-color: var(--status-info-color);\n    }\n  `\n\n  @property({ type: String }) value?: string\n\n  render() {\n    switch (this.value) {\n      case '+':\n        return html` <mwc-icon style=${INLINESTYLE} center add>add</mwc-icon> `\n      case '-':\n        return html` <mwc-icon style=${INLINESTYLE} center remove>remove</mwc-icon> `\n      case 'M':\n        return html` <mwc-icon style=${INLINESTYLE} center done>done</mwc-icon> `\n      default:\n        return ''\n    }\n  }\n}\n\nconst INLINESTYLE =\n  'font-size: var(--grid-record-fontsize);vertical-align: middle; color: var(--grid-record-dirty-color)'\n\nexport class GutterDirty {\n  static instance(config: ColumnConfig = { type: 'gutter', name: '__dirty__' } as any) {\n    return Object.assign(\n      {},\n      {\n        type: 'gutter',\n        name: '__dirty__',\n        gutterType: 'dirty',\n        width: 30,\n        resizable: false,\n        sortable: false,\n        header: '',\n        record: {\n          renderer: function (value, column, record, rowIndex, field) {\n            return value ? html` <ox-gutter-dirty-element value=${value}></ox-gutter-dirty-element> ` : html``\n          } as FieldRenderer\n        },\n        forGrid: true,\n        forList: false\n      },\n      config\n    )\n  }\n}\n"]}
+{"version":3,"file":"gutter-dirty.js","sourceRoot":"","sources":["../../../src/gutters/gutter-dirty.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAK3D,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAyBzC,MAAM;QACJ,QAAQ,IAAI,CAAC,KAAK,EAAE;YAClB,KAAK,GAAG;gBACN,OAAO,IAAI,CAAA,oBAAoB,WAAW,6BAA6B,CAAA;YACzE,KAAK,GAAG;gBACN,OAAO,IAAI,CAAA,oBAAoB,WAAW,mCAAmC,CAAA;YAC/E,KAAK,GAAG;gBACN,OAAO,IAAI,CAAA,oBAAoB,WAAW,+BAA+B,CAAA;YAC3E;gBACE,OAAO,EAAE,CAAA;SACZ;IACH,CAAC;CACF,CAAA;AApCQ,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;GAoBlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAe;AAvBtC,kBAAkB;IADvB,aAAa,CAAC,yBAAyB,CAAC;GACnC,kBAAkB,CAqCvB;AAED,MAAM,WAAW,GACf,sGAAsG,CAAA;AAExG,MAAM,OAAO,WAAW;IACtB,MAAM,CAAC,QAAQ,CAAC,SAAuB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAS;QACjF,OAAO,MAAM,CAAC,MAAM,CAClB,EAAE,EACF;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,WAAW;YACjB,UAAU,EAAE,OAAO;YACnB,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,KAAK;YACf,MAAM,EAAE,EAAE;YACV,MAAM,EAAE;gBACN,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;oBACxD,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,KAAK,8BAA8B,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;gBACpG,CAAkB;aACnB;YACD,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE;gBACR,QAAQ,EAAE,CAAC,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;oBAC7D,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,kBAAkB,EAAE;wBAClC,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE;4BACN,QAAQ,EAAE,QAAQ;4BAClB,WAAW,EAAE,CAAC;4BACd,MAAM,EAAE,QAAQ;4BAChB,SAAS,EAAE,CAAC,CAAC;yBACd;qBACF,CAAC,CACH,CAAA;gBACH,CAAC,CAAsB;aACxB;SACF,EACD,MAAM,CACP,CAAA;IACH,CAAC;CACF","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ColumnConfig, FieldRenderer, GristEventHandler } from '../types'\n\n@customElement('ox-gutter-dirty-element')\nclass GutterDirtyElement extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      text-align: center !important;\n    }\n    mwc-icon {\n      width: var(--grid-record-dirty-icon-size);\n      height: var(--grid-record-dirty-icon-size);\n      border-radius: 50%;\n      opacity: 0.8;\n    }\n    [add] {\n      background-color: var(--status-success-color);\n    }\n    [remove] {\n      background-color: var(--status-danger-color);\n    }\n    [done] {\n      background-color: var(--status-info-color);\n    }\n  `\n\n  @property({ type: String }) value?: string\n\n  render() {\n    switch (this.value) {\n      case '+':\n        return html` <mwc-icon style=${INLINESTYLE} center add>add</mwc-icon> `\n      case '-':\n        return html` <mwc-icon style=${INLINESTYLE} center remove>remove</mwc-icon> `\n      case 'M':\n        return html` <mwc-icon style=${INLINESTYLE} center done>done</mwc-icon> `\n      default:\n        return ''\n    }\n  }\n}\n\nconst INLINESTYLE =\n  'font-size: var(--grid-record-fontsize);vertical-align: middle; color: var(--grid-record-dirty-color)'\n\nexport class GutterDirty {\n  static instance(config: ColumnConfig = { type: 'gutter', name: '__dirty__' } as any) {\n    return Object.assign(\n      {},\n      {\n        type: 'gutter',\n        name: '__dirty__',\n        gutterType: 'dirty',\n        width: 30,\n        resizable: false,\n        sortable: false,\n        header: '',\n        record: {\n          renderer: function (value, column, record, rowIndex, field) {\n            return value ? html` <ox-gutter-dirty-element value=${value}></ox-gutter-dirty-element> ` : html``\n          } as FieldRenderer\n        },\n        forGrid: true,\n        forList: false,\n        forCard: false,\n        handlers: {\n          dblclick: ((columns, data, column, record, rowIndex, target) => {\n            target.dispatchEvent(\n              new CustomEvent('set-select-block', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  startRow: rowIndex,\n                  startColumn: 0,\n                  endRow: rowIndex,\n                  endColumn: -1\n                }\n              })\n            )\n          }) as GristEventHandler\n        }\n      },\n      config\n    )\n  }\n}\n"]}

package/dist/src/gutters/gutter-row-selector.js

@@ -59,7 +59,8 @@ export class GutterRowSelector {
                 }
             },
             forGrid: true,
-            forList: true
+            forList: true,
+            forCard: true
         }, config);
     }
 }

package/dist/src/gutters/gutter-row-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"gutter-row-selector.js","sourceRoot":"","sources":["../../../src/gutters/gutter-row-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAO1B,MAAM,OAAO,iBAAiB;IAC5B,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAS;QAChC,OAAO,MAAM,CAAC,MAAM,CAClB,EAAE,EACF;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,cAAc;YACpB,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,KAAK;YACf,MAAM,EAAE;gBACN,QAAQ,EAAE,UAAgD,MAAM;oBAC9D,IAAI,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAA;oBAEtF,OAAO,IAAI,CAAA;;;2BAGI,OAAO;0BACR,CAAC,CAAQ,EAAE,EAAE;wBACrB,IAAI,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAE,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAA;wBAE/E,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,mBAAmB,EAAE;4BACnC,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;4BACd,MAAM,EAAE;gCACN,QAAQ;6BACT;yBACF,CAAC,CACH,CAAA;wBAED,CAAC,CAAC,eAAe,EAAE,CAAA;oBACrB,CAAC;;aAEJ,CAAA;gBACH,CAAmB;aACpB;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,QAAQ;gBACf,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;oBACxD,OAAO,IAAI,CAAA;;uBAEA,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;2BAClC,CAAC,CAAC,KAAK;0BACR,CAAC,CAAQ,EAAE,EAAE;wBACrB,IAAI,QAAQ,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAA;wBAErD,IAAI,MAAM,GAAG,MAAM,CAAC,QAAQ;4BAC1B,CAAC,CAAC;gCACE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;gCAC/B,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;6BAClC;4BACH,CAAC,CAAC;gCACE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;6BAClC,CAAA;wBAEL,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,sBAAsB,EAAE;4BACtC,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;4BACd,MAAM;yBACP,CAAC,CACH,CAAA;wBAED,CAAC,CAAC,eAAe,EAAE,CAAA;oBACrB,CAAC;;aAEJ,CAAA;gBACH,CAAkB;aACnB;YACD,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;SACd,EACD,MAAM,CACP,CAAA;IACH,CAAC;CACF","sourcesContent":["import { html } from 'lit'\n\nimport { DataCard } from '../data-card/data-card'\nimport { DataGrid } from '../data-grid/data-grid'\nimport { DataList } from '../data-list/data-list'\nimport { FieldRenderer, HeaderRenderer } from '../types'\n\nexport class GutterRowSelector {\n  static instance(config = {} as any) {\n    return Object.assign(\n      {},\n      {\n        type: 'gutter',\n        name: '__selected__',\n        gutterType: 'row-selector',\n        width: 30,\n        resizable: false,\n        sortable: false,\n        header: {\n          renderer: function (this: DataGrid | DataList | DataCard, column) {\n            var checked = ((this.data || {}).records || []).find(record => record['__selected__'])\n\n            return html`\n              <input\n                type=\"checkbox\"\n                .checked=${checked}\n                @change=${(e: Event) => {\n                  let selected = column.multiple ? (e.target as HTMLInputElement).checked : false\n\n                  this.dispatchEvent(\n                    new CustomEvent('select-all-change', {\n                      bubbles: true,\n                      composed: true,\n                      detail: {\n                        selected\n                      }\n                    })\n                  )\n\n                  e.stopPropagation()\n                }}\n              />\n            `\n          } as HeaderRenderer\n        },\n        record: {\n          align: 'center',\n          renderer: function (value, column, record, rowIndex, field) {\n            return html`\n              <input\n                type=${column.multiple ? 'checkbox' : 'radio'}\n                .checked=${!!value}\n                @change=${(e: Event) => {\n                  let selected = (e.target as HTMLInputElement).checked\n\n                  let detail = column.multiple\n                    ? {\n                        added: selected ? [record] : [],\n                        removed: selected ? [] : [record]\n                      }\n                    : {\n                        records: selected ? [record] : []\n                      }\n\n                  field.dispatchEvent(\n                    new CustomEvent('select-record-change', {\n                      bubbles: true,\n                      composed: true,\n                      detail\n                    })\n                  )\n\n                  e.stopPropagation()\n                }}\n              />\n            `\n          } as FieldRenderer\n        },\n        forGrid: true,\n        forList: true\n      },\n      config\n    )\n  }\n}\n"]}
+{"version":3,"file":"gutter-row-selector.js","sourceRoot":"","sources":["../../../src/gutters/gutter-row-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAO1B,MAAM,OAAO,iBAAiB;IAC5B,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAS;QAChC,OAAO,MAAM,CAAC,MAAM,CAClB,EAAE,EACF;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,cAAc;YACpB,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,KAAK;YACf,MAAM,EAAE;gBACN,QAAQ,EAAE,UAAgD,MAAM;oBAC9D,IAAI,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAA;oBAEtF,OAAO,IAAI,CAAA;;;2BAGI,OAAO;0BACR,CAAC,CAAQ,EAAE,EAAE;wBACrB,IAAI,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAE,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAA;wBAE/E,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,mBAAmB,EAAE;4BACnC,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;4BACd,MAAM,EAAE;gCACN,QAAQ;6BACT;yBACF,CAAC,CACH,CAAA;wBAED,CAAC,CAAC,eAAe,EAAE,CAAA;oBACrB,CAAC;;aAEJ,CAAA;gBACH,CAAmB;aACpB;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,QAAQ;gBACf,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;oBACxD,OAAO,IAAI,CAAA;;uBAEA,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO;2BAClC,CAAC,CAAC,KAAK;0BACR,CAAC,CAAQ,EAAE,EAAE;wBACrB,IAAI,QAAQ,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAA;wBAErD,IAAI,MAAM,GAAG,MAAM,CAAC,QAAQ;4BAC1B,CAAC,CAAC;gCACE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;gCAC/B,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;6BAClC;4BACH,CAAC,CAAC;gCACE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;6BAClC,CAAA;wBAEL,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,sBAAsB,EAAE;4BACtC,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;4BACd,MAAM;yBACP,CAAC,CACH,CAAA;wBAED,CAAC,CAAC,eAAe,EAAE,CAAA;oBACrB,CAAC;;aAEJ,CAAA;gBACH,CAAkB;aACnB;YACD,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;SACd,EACD,MAAM,CACP,CAAA;IACH,CAAC;CACF","sourcesContent":["import { html } from 'lit'\n\nimport { DataCard } from '../data-card/data-card'\nimport { DataGrid } from '../data-grid/data-grid'\nimport { DataList } from '../data-list/data-list'\nimport { FieldRenderer, HeaderRenderer } from '../types'\n\nexport class GutterRowSelector {\n  static instance(config = {} as any) {\n    return Object.assign(\n      {},\n      {\n        type: 'gutter',\n        name: '__selected__',\n        gutterType: 'row-selector',\n        width: 30,\n        resizable: false,\n        sortable: false,\n        header: {\n          renderer: function (this: DataGrid | DataList | DataCard, column) {\n            var checked = ((this.data || {}).records || []).find(record => record['__selected__'])\n\n            return html`\n              <input\n                type=\"checkbox\"\n                .checked=${checked}\n                @change=${(e: Event) => {\n                  let selected = column.multiple ? (e.target as HTMLInputElement).checked : false\n\n                  this.dispatchEvent(\n                    new CustomEvent('select-all-change', {\n                      bubbles: true,\n                      composed: true,\n                      detail: {\n                        selected\n                      }\n                    })\n                  )\n\n                  e.stopPropagation()\n                }}\n              />\n            `\n          } as HeaderRenderer\n        },\n        record: {\n          align: 'center',\n          renderer: function (value, column, record, rowIndex, field) {\n            return html`\n              <input\n                type=${column.multiple ? 'checkbox' : 'radio'}\n                .checked=${!!value}\n                @change=${(e: Event) => {\n                  let selected = (e.target as HTMLInputElement).checked\n\n                  let detail = column.multiple\n                    ? {\n                        added: selected ? [record] : [],\n                        removed: selected ? [] : [record]\n                      }\n                    : {\n                        records: selected ? [record] : []\n                      }\n\n                  field.dispatchEvent(\n                    new CustomEvent('select-record-change', {\n                      bubbles: true,\n                      composed: true,\n                      detail\n                    })\n                  )\n\n                  e.stopPropagation()\n                }}\n              />\n            `\n          } as FieldRenderer\n        },\n        forGrid: true,\n        forList: true,\n        forCard: true\n      },\n      config\n    )\n  }\n}\n"]}

package/dist/src/gutters/gutter-sequence.js

@@ -25,6 +25,21 @@ export class GutterSequence {
             },
             forGrid: true,
             forList: false,
+            forCard: false,
+            handlers: {
+                dblclick: ((columns, data, column, record, rowIndex, target) => {
+                    target.dispatchEvent(new CustomEvent('set-select-block', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            startRow: rowIndex,
+                            startColumn: 0,
+                            endRow: rowIndex,
+                            endColumn: -1
+                        }
+                    }));
+                })
+            },
             ...config
         };
     }

package/dist/src/gutters/gutter-sequence.js.map

@@ -1 +1 @@
-{"version":3,"file":"gutter-sequence.js","sourceRoot":"","sources":["../../../src/gutters/gutter-sequence.ts"],"names":[],"mappings":"AAMA,MAAM,OAAO,cAAc;IACzB,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAS;QAChC,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,SAAS;YACf,UAAU,EAAE,UAAU;YACtB,KAAK,EAAE,UAAgD,MAAM;gBAC3D,IAAI,IAAI,CAAC,IAAI,EAAE;oBACb,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;oBAC3D,IAAI,SAAS,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,OAAO,CAAC,MAAM,CAAA;iBACpD;qBAAM;oBACL,IAAI,SAAS,GAAG,GAAG,CAAA;iBACpB;gBAED,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAA;YACrD,CAAwB;YACxB,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,KAAK;YACf,MAAM,EAAE,GAAG;YACX,MAAM,EAAE;gBACN,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;oBACxD,OAAO,KAAK,CAAA;gBACd,CAAkB;gBAClB,KAAK,EAAE,OAAO;aACf;YACD,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,KAAK;YACd,GAAG,MAAM;SACV,CAAA;IACH,CAAC;CACF","sourcesContent":["import { ColumnWidthCallback, FieldRenderer } from '../types'\n\nimport { DataCard } from '../data-card/data-card'\nimport { DataGrid } from '../data-grid/data-grid'\nimport { DataList } from '../data-list/data-list'\n\nexport class GutterSequence {\n  static instance(config = {} as any) {\n    return {\n      type: 'gutter',\n      name: '__seq__',\n      getterType: 'sequence',\n      width: function (this: DataGrid | DataList | DataCard, column): string {\n        if (this.data) {\n          var { limit = 0, page = 1, records = [] } = this.data || {}\n          var lastIndex = (page - 1) * limit + records.length\n        } else {\n          var lastIndex = 100\n        }\n\n        return `${Math.max(String(lastIndex).length, 2)}ch`\n      } as ColumnWidthCallback,\n      resizable: false,\n      sortable: false,\n      header: '#',\n      record: {\n        renderer: function (value, column, record, rowIndex, field) {\n          return value\n        } as FieldRenderer,\n        align: 'right'\n      },\n      forGrid: true,\n      forList: false,\n      ...config\n    }\n  }\n}\n"]}
+{"version":3,"file":"gutter-sequence.js","sourceRoot":"","sources":["../../../src/gutters/gutter-sequence.ts"],"names":[],"mappings":"AAKA,MAAM,OAAO,cAAc;IACzB,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAS;QAChC,OAAO;YACL,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,SAAS;YACf,UAAU,EAAE,UAAU;YACtB,KAAK,EAAE,UAAgD,MAAM;gBAC3D,IAAI,IAAI,CAAC,IAAI,EAAE;oBACb,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,OAAO,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;oBAC3D,IAAI,SAAS,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,OAAO,CAAC,MAAM,CAAA;iBACpD;qBAAM;oBACL,IAAI,SAAS,GAAG,GAAG,CAAA;iBACpB;gBAED,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAA;YACrD,CAAwB;YACxB,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,KAAK;YACf,MAAM,EAAE,GAAG;YACX,MAAM,EAAE;gBACN,QAAQ,EAAE,UAAU,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK;oBACxD,OAAO,KAAK,CAAA;gBACd,CAAkB;gBAClB,KAAK,EAAE,OAAO;aACf;YACD,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,KAAK;YACd,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE;gBACR,QAAQ,EAAE,CAAC,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;oBAC7D,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,kBAAkB,EAAE;wBAClC,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE;4BACN,QAAQ,EAAE,QAAQ;4BAClB,WAAW,EAAE,CAAC;4BACd,MAAM,EAAE,QAAQ;4BAChB,SAAS,EAAE,CAAC,CAAC;yBACd;qBACF,CAAC,CACH,CAAA;gBACH,CAAC,CAAsB;aACxB;YACD,GAAG,MAAM;SACV,CAAA;IACH,CAAC;CACF","sourcesContent":["import { DataCard } from '../data-card/data-card'\nimport { DataGrid } from '../data-grid/data-grid'\nimport { DataList } from '../data-list/data-list'\nimport { ColumnWidthCallback, FieldRenderer, GristEventHandler } from '../types'\n\nexport class GutterSequence {\n  static instance(config = {} as any) {\n    return {\n      type: 'gutter',\n      name: '__seq__',\n      getterType: 'sequence',\n      width: function (this: DataGrid | DataList | DataCard, column): string {\n        if (this.data) {\n          var { limit = 0, page = 1, records = [] } = this.data || {}\n          var lastIndex = (page - 1) * limit + records.length\n        } else {\n          var lastIndex = 100\n        }\n\n        return `${Math.max(String(lastIndex).length, 2)}ch`\n      } as ColumnWidthCallback,\n      resizable: false,\n      sortable: false,\n      header: '#',\n      record: {\n        renderer: function (value, column, record, rowIndex, field) {\n          return value\n        } as FieldRenderer,\n        align: 'right'\n      },\n      forGrid: true,\n      forList: false,\n      forCard: false,\n      handlers: {\n        dblclick: ((columns, data, column, record, rowIndex, target) => {\n          target.dispatchEvent(\n            new CustomEvent('set-select-block', {\n              bubbles: true,\n              composed: true,\n              detail: {\n                startRow: rowIndex,\n                startColumn: 0,\n                endRow: rowIndex,\n                endColumn: -1\n              }\n            })\n          )\n        }) as GristEventHandler\n      },\n      ...config\n    }\n  }\n}\n"]}

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

@@ -7,7 +7,7 @@ export function recordViewBodyClickHandler(e) {
     e.stopPropagation();
     /* target should be 'ox-grid-field' */
     var target = e.target;
-    if (!this.onlyForEdit && this.currentTarget) {
+    if (this.currentTarget) {
         this.focus();
         this.currentTarget.removeAttribute('editing');
     }
@@ -17,8 +17,6 @@ export function recordViewBodyClickHandler(e) {
         return;
     }
     this.currentTarget = target;
-    if (!this.onlyForEdit) {
-        target.setAttribute('editing', 'true');
-    }
+    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

@@ -1 +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"]}
+{"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,IAAI,CAAC,aAAa,EAAE;QACtB,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,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AACxC,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.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  target.setAttribute('editing', 'true')\n}\n"]}

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

@@ -10,8 +10,8 @@ export async function recordViewBodyKeydownHandler(e) {
         /* TODO 편집이 취소되어야 한다. */
         case 'Enter':
             /* 먼저, focus를 옮겨놓아야, focusout 으로 인해서 popup이 닫히는 것을 방지할 수 있다. */
-            !this.onlyForEdit && this.focus();
-            if (!this.onlyForEdit && this.currentTarget) {
+            this.focus();
+            if (this.currentTarget) {
                 this.currentTarget.removeAttribute('editing');
             }
             this.currentTarget = null;

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

@@ -1 +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"]}
+{"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,IAAI,CAAC,KAAK,EAAE,CAAA;YAEZ,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,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.focus()\n\n      if (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/record-creator.js

@@ -36,7 +36,6 @@ let RecordCreator = class RecordCreator extends LitElement {
             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;
@@ -82,7 +81,6 @@ let RecordCreator = class RecordCreator extends LitElement {
         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;

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

@@ -1 +1 @@
-{"version":3,"file":"record-creator.js","sourceRoot":"","sources":["../../../src/record-view/record-creator.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './record-view'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, GristRecord } from '../types'\nimport { RecordView } from './record-view'\n\n@customElement('ox-record-creator')\nexport class RecordCreator extends LitElement {\n  @state() grist?: DataGrist\n\n  @property({ type: Object }) callback?: (operation: { [key: string]: any }) => boolean\n  @property({ type: Boolean, attribute: 'light-popup' }) lightPopup: boolean = false\n\n  constructor() {\n    super()\n\n    this.addEventListener('click', (e: Event) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      if (this.lightPopup) {\n        this.lightPopupRecordView()\n      } else {\n        this.popupRecordView()\n      }\n    })\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.grist = this.closest('ox-grist') as DataGrist\n  }\n\n  render() {\n    return html`<slot></slot>`\n  }\n\n  lightPopupRecordView() {\n    const config = this.grist!.compiledConfig\n    var title = 'create'\n    const rowIndex = -1\n    var record: GristRecord = {}\n    const columns = config.columns\n\n    var popup = OxPopup.open({\n      template: html`\n        <div title>${title}</div>\n        <ox-record-view\n          only-for-edit\n          @field-change=${(e: CustomEvent) => {\n            const view = e.currentTarget as RecordView\n\n            var { after, before, column, record, row } = (e as CustomEvent).detail as {\n              after: any\n              before: any\n              column: ColumnConfig\n              record: GristRecord\n              row: number\n            }\n\n            var validation = column.validation\n            if (validation && typeof validation == 'function') {\n              if (!validation.call(this, after, before, record, column)) {\n                return\n              }\n            }\n\n            view.record = {\n              ...record,\n              [column.name]: after\n            }\n          }}\n          .columns=${columns}\n          .record=${record}\n          .rowIndex=${rowIndex}\n          @reset=${(e: Event) => {\n            const view = e.currentTarget as RecordView\n            view.record = {}\n          }}\n          @cancel=${(e: Event) => {\n            popup.close()\n          }}\n          @ok=${(e: Event) => {\n            popup.close()\n\n            const view = e.currentTarget as RecordView\n\n            this.dispatchEvent(\n              new CustomEvent('ok', {\n                bubbles: true,\n                composed: true,\n                detail: view.record\n              })\n            )\n          }}\n        ></ox-record-view>\n      `,\n      parent: document.body\n    })\n  }\n\n  popupRecordView() {\n    const config = this.grist!.compiledConfig\n    const rowIndex = -1\n    var record: GristRecord = {}\n    const columns = config.columns\n\n    var title = 'create'\n\n    var recordView = document.createElement('ox-record-view') as RecordView\n\n    recordView.setAttribute('only-for-edit', '')\n    recordView.columns = columns\n    recordView.record = record\n    recordView.rowIndex = rowIndex\n\n    document.dispatchEvent(\n      new CustomEvent('open-popup', {\n        detail: {\n          template: recordView,\n          options: {\n            backdrop: true,\n            size: 'large',\n            title\n          },\n          callback: (popup: any) => {\n            recordView.addEventListener('reset', (e: Event) => {\n              const view = e.currentTarget as RecordView\n              view.record = {}\n            })\n\n            recordView.addEventListener('cancel', (e: Event) => {\n              popup.close()\n            })\n\n            recordView.addEventListener('ok', async (e: Event) => {\n              const view = e.currentTarget as RecordView\n              if (await this.callback?.(view.record)) {\n                popup.close()\n              }\n            })\n\n            recordView.addEventListener('field-change', (e: Event) => {\n              const view = e.currentTarget as RecordView\n\n              var { after, before, column, record, row } = (e as CustomEvent).detail as {\n                after: any\n                before: any\n                column: ColumnConfig\n                record: GristRecord\n                row: number\n              }\n\n              var validation = column.validation\n              if (validation && typeof validation == 'function') {\n                if (!validation.call(this, after, before, record, column)) {\n                  return\n                }\n              }\n\n              view.record = {\n                ...record,\n                [column.name]: after\n              }\n            })\n\n            popup.onclosed = () => {}\n          }\n        }\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"record-creator.js","sourceRoot":"","sources":["../../../src/record-view/record-creator.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './record-view'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, GristRecord } from '../types'\nimport { RecordView } from './record-view'\n\n@customElement('ox-record-creator')\nexport class RecordCreator extends LitElement {\n  @state() grist?: DataGrist\n\n  @property({ type: Object }) callback?: (operation: { [key: string]: any }) => boolean\n  @property({ type: Boolean, attribute: 'light-popup' }) lightPopup: boolean = false\n\n  constructor() {\n    super()\n\n    this.addEventListener('click', (e: Event) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      if (this.lightPopup) {\n        this.lightPopupRecordView()\n      } else {\n        this.popupRecordView()\n      }\n    })\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.grist = this.closest('ox-grist') as DataGrist\n  }\n\n  render() {\n    return html`<slot></slot>`\n  }\n\n  lightPopupRecordView() {\n    const config = this.grist!.compiledConfig\n    var title = 'create'\n    const rowIndex = -1\n    var record: GristRecord = {}\n    const columns = config.columns\n\n    var popup = OxPopup.open({\n      template: html`\n        <div title>${title}</div>\n        <ox-record-view\n          @field-change=${(e: CustomEvent) => {\n            const view = e.currentTarget as RecordView\n\n            var { after, before, column, record, row } = (e as CustomEvent).detail as {\n              after: any\n              before: any\n              column: ColumnConfig\n              record: GristRecord\n              row: number\n            }\n\n            var validation = column.validation\n            if (validation && typeof validation == 'function') {\n              if (!validation.call(this, after, before, record, column)) {\n                return\n              }\n            }\n\n            view.record = {\n              ...record,\n              [column.name]: after\n            }\n          }}\n          .columns=${columns}\n          .record=${record}\n          .rowIndex=${rowIndex}\n          @reset=${(e: Event) => {\n            const view = e.currentTarget as RecordView\n            view.record = {}\n          }}\n          @cancel=${(e: Event) => {\n            popup.close()\n          }}\n          @ok=${(e: Event) => {\n            popup.close()\n\n            const view = e.currentTarget as RecordView\n\n            this.dispatchEvent(\n              new CustomEvent('ok', {\n                bubbles: true,\n                composed: true,\n                detail: view.record\n              })\n            )\n          }}\n        ></ox-record-view>\n      `,\n      parent: document.body\n    })\n  }\n\n  popupRecordView() {\n    const config = this.grist!.compiledConfig\n    const rowIndex = -1\n    var record: GristRecord = {}\n    const columns = config.columns\n\n    var title = 'create'\n\n    var recordView = document.createElement('ox-record-view') as RecordView\n\n    recordView.columns = columns\n    recordView.record = record\n    recordView.rowIndex = rowIndex\n\n    document.dispatchEvent(\n      new CustomEvent('open-popup', {\n        detail: {\n          template: recordView,\n          options: {\n            backdrop: true,\n            size: 'large',\n            title\n          },\n          callback: (popup: any) => {\n            recordView.addEventListener('reset', (e: Event) => {\n              const view = e.currentTarget as RecordView\n              view.record = {}\n            })\n\n            recordView.addEventListener('cancel', (e: Event) => {\n              popup.close()\n            })\n\n            recordView.addEventListener('ok', async (e: Event) => {\n              const view = e.currentTarget as RecordView\n              if (await this.callback?.(view.record)) {\n                popup.close()\n              }\n            })\n\n            recordView.addEventListener('field-change', (e: Event) => {\n              const view = e.currentTarget as RecordView\n\n              var { after, before, column, record, row } = (e as CustomEvent).detail as {\n                after: any\n                before: any\n                column: ColumnConfig\n                record: GristRecord\n                row: number\n              }\n\n              var validation = column.validation\n              if (validation && typeof validation == 'function') {\n                if (!validation.call(this, after, before, record, column)) {\n                  return\n                }\n              }\n\n              view.record = {\n                ...record,\n                [column.name]: after\n              }\n            })\n\n            popup.onclosed = () => {}\n          }\n        }\n      })\n    )\n  }\n}\n"]}

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

@@ -7,7 +7,6 @@ export declare class RecordViewBody extends LitElement {
     columns: ColumnConfig[];
     record: GristRecord;
     rowIndex: number;
-    onlyForEdit: boolean;
     currentTarget: any;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;