@operato/data-grist 2.0.0-alpha.9 → 2.0.0-alpha.90

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

@@ -5,6 +5,7 @@ import '@operato/popup/ox-popup-list.js';
 import '@operato/input/ox-input-search.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, queryAsync, state } from 'lit/decorators.js';
+import { getDefaultValue } from '@operato/time-calculator';
 import { FilterStyles } from './filter-styles';
 import { getFilterRenderer } from './registry';
 let FiltersForm = class FiltersForm extends LitElement {
@@ -22,7 +23,6 @@ let FiltersForm = class FiltersForm extends LitElement {
         const grist = this.closest('ox-grist');
         if (grist) {
             this.config = grist.compiledConfig;
-            this.value = grist.filters || [];
             grist.addEventListener('config-change', (e) => {
                 this.config = e.detail;
             });
@@ -45,6 +45,17 @@ let FiltersForm = class FiltersForm extends LitElement {
             });
         }
     }
+    buildDefaultValue(operator, defaultValue) {
+        if (defaultValue === undefined) {
+            return;
+        }
+        if (operator == 'between') {
+            return defaultValue.map(v => getDefaultValue(v, this));
+        }
+        else {
+            return getDefaultValue(defaultValue, this);
+        }
+    }
     updated(changes) {
         if (changes.has('config')) {
             const filters = this.config.columns.filter(columnConfig => !!columnConfig.filter);
@@ -56,6 +67,13 @@ let FiltersForm = class FiltersForm extends LitElement {
                 const filter = columnConfig.filter;
                 return filter.operator === 'search';
             });
+            const grist = this.closest('ox-grist');
+            this.value = ((grist === null || grist === void 0 ? void 0 : grist.filters) || []).map(filter => {
+                return {
+                    ...filter,
+                    value: this.buildDefaultValue(filter.operator, filter.value)
+                };
+            });
             this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0;
         }
     }
@@ -79,7 +97,7 @@ let FiltersForm = class FiltersForm extends LitElement {
                   <ox-input-search name="search" .value=${searchValue} ?autofocus=${this.autofocus}></ox-input-search>
                 `}
             ${this.filterColumns.map((column) => {
-                var _a, _b;
+                var _a, _b, _c;
                 const { name, header, label, filter } = column;
                 const type = filter.type;
                 const operator = filter.operator;
@@ -93,57 +111,59 @@ let FiltersForm = class FiltersForm extends LitElement {
                 const renderer = getFilterRenderer(operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'
                     ? 'text'
                     : type)[idx];
-                const value = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.find(filter => filter.name == name)) === null || _b === void 0 ? void 0 : _b.value;
+                const value = (_c = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.find(filter => filter.name == name)) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : this.buildDefaultValue(operator, filter === null || filter === void 0 ? void 0 : filter.value);
                 if (!renderer) {
                     return html ``;
                 }
-                return type !== 'select' && labelText
-                    ? html `<label filter-title ?between=${operator === 'between'}
-                    ><span>${labelText}</span> ${renderer(column, value, this)}
-                  </label> `
-                    : type !== 'select' && !labelText
-                        ? renderer(column, value, this)
-                        : operator === 'in'
-                            ? html `
-                    <ox-select
-                      name=${name}
-                      placeholder=${labelText}
-                      .value=${value}
-                      @change=${(e) => {
-                                var _a;
-                                return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
-                                    detail: {
-                                        name,
-                                        operator,
-                                        value: e.detail
-                                    }
-                                }));
-                            }}
-                    >
-                      <ox-popup-list multiple attr-selected="checked" with-search>
-                        ${renderer(column, value, this)}
-                      </ox-popup-list>
-                    </ox-select>
-                  `
-                            : html `
-                    <ox-select
-                      name=${name}
-                      placeholder=${labelText}
-                      .value=${value}
-                      @change=${(e) => {
-                                var _a;
-                                return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
-                                    detail: {
-                                        name,
-                                        operator,
-                                        value: e.detail
-                                    }
-                                }));
-                            }}
-                    >
-                      <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>
-                    </ox-select>
-                  `;
+                return type === 'boolean' || type === 'checkbox'
+                    ? renderer(column, value, this)
+                    : type !== 'select' && labelText
+                        ? html `<label filter-title ?between=${operator === 'between'}
+                      ><span>${labelText}</span> ${renderer(column, value, this)}
+                    </label> `
+                        : type !== 'select' && !labelText
+                            ? renderer(column, value, this)
+                            : operator === 'in'
+                                ? html `
+                          <ox-select
+                            name=${name}
+                            placeholder=${labelText}
+                            .value=${value}
+                            @change=${(e) => {
+                                    var _a;
+                                    return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
+                                        detail: {
+                                            name,
+                                            operator,
+                                            value: e.detail
+                                        }
+                                    }));
+                                }}
+                          >
+                            <ox-popup-list multiple attr-selected="checked" with-search>
+                              ${renderer(column, value, this)}
+                            </ox-popup-list>
+                          </ox-select>
+                        `
+                                : html `
+                          <ox-select
+                            name=${name}
+                            placeholder=${labelText}
+                            .value=${value}
+                            @change=${(e) => {
+                                    var _a;
+                                    return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
+                                        detail: {
+                                            name,
+                                            operator,
+                                            value: e.detail
+                                        }
+                                    }));
+                                }}
+                          >
+                            <ox-popup-list with-search> ${renderer(column, value, this)} </ox-popup-list>
+                          </ox-select>
+                        `;
             })}
           </form>
         `;
@@ -230,6 +250,7 @@ FiltersForm.styles = [
       form > * {
         display: flex;
         align-items: center;
+        gap: var(--input-intra-gap, 7px);
       }
 
       label span {

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, nothing } 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      label span {\n        display: block;\n      }\n\n      @media only screen and (max-width: 460px) {\n        label[between] {\n          display: block;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) value: FilterValue[] = []\n  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n  @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n  @property({ type: Boolean, attribute: 'empty', reflect: true }) empty: boolean = true\n\n  @state() config!: GristConfig\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      this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0\n    }\n  }\n\n  render(): TemplateResult {\n    const searchValue =\n      (this.value?.find(filter => filter.operator === 'search')?.value as string)?.match(/^\\%(.*)\\%$/)?.[1] || ''\n\n    return this.empty\n      ? html``\n      : 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 || this.withoutSearch\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\n              const type = (filter as FilterConfigObject).type\n              const operator = (filter as FilterConfigObject).operator\n              const filterLabel = (filter as FilterConfigObject).label\n\n              const labelText =\n                filterLabel !== undefined\n                  ? filterLabel\n                  : typeof label === 'object' && label.renderer\n                  ? label.renderer(column)\n                  : header.renderer(column) || name\n\n              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' && labelText\n                ? html`<label filter-title ?between=${operator === 'between'}\n                    ><span>${labelText}</span> ${renderer(column, value, this)}\n                  </label> `\n                : type !== 'select' && !labelText\n                ? renderer(column, value, this)\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 form = await this.form\n    if (!form) return []\n\n    const formData = new FormData(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  public setInputValue(name: string, value: any) {\n    const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n    if (input) {\n      input.value = value\n      input.dispatchEvent(new Event('change', { bubbles: true }))\n    }\n  }\n\n  public getInputValue(name: string): any {\n    const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n    return input?.value\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, nothing } from 'lit'\nimport { customElement, property, queryAsync, state } from 'lit/decorators.js'\n\nimport { getDefaultValue } from '@operato/time-calculator'\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        gap: var(--input-intra-gap, 7px);\n      }\n\n      label span {\n        display: block;\n      }\n\n      @media only screen and (max-width: 460px) {\n        label[between] {\n          display: block;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) value: FilterValue[] = []\n  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n  @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n  @property({ type: Boolean, attribute: 'empty', reflect: true }) empty: boolean = true\n\n  @state() config!: GristConfig\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\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  buildDefaultValue(operator: string, defaultValue: any) {\n    if (defaultValue === undefined) {\n      return\n    }\n    if (operator == 'between') {\n      return (defaultValue as Array<any>).map(v => getDefaultValue(v, this))\n    } else {\n      return getDefaultValue(defaultValue, this)\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      const grist = this.closest('ox-grist') as DataGrist\n\n      this.value = (grist?.filters || []).map(filter => {\n        return {\n          ...filter,\n          value: this.buildDefaultValue(filter!.operator, filter!.value)\n        }\n      })\n\n      this.empty = (this.searchColumns.length === 0 || this.withoutSearch) && this.filterColumns.length === 0\n    }\n  }\n\n  render(): TemplateResult {\n    const searchValue =\n      (this.value?.find(filter => filter.operator === 'search')?.value as string)?.match(/^\\%(.*)\\%$/)?.[1] || ''\n\n    return this.empty\n      ? html``\n      : 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 || this.withoutSearch\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\n              const type = (filter as FilterConfigObject).type\n              const operator = (filter as FilterConfigObject).operator\n              const filterLabel = (filter as FilterConfigObject).label\n\n              const labelText =\n                filterLabel !== undefined\n                  ? filterLabel\n                  : typeof label === 'object' && label.renderer\n                    ? label.renderer(column)\n                    : header.renderer(column) || name\n\n              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 =\n                this.value?.find(filter => filter.name == name)?.value ??\n                this.buildDefaultValue(operator!, (filter as FilterConfigObject)?.value)\n\n              if (!renderer) {\n                return html``\n              }\n\n              return type === 'boolean' || type === 'checkbox'\n                ? renderer(column, value, this)\n                : type !== 'select' && labelText\n                  ? html`<label filter-title ?between=${operator === 'between'}\n                      ><span>${labelText}</span> ${renderer(column, value, this)}\n                    </label> `\n                  : type !== 'select' && !labelText\n                    ? renderer(column, value, this)\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 form = await this.form\n    if (!form) return []\n\n    const formData = new FormData(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  public setInputValue(name: string, value: any) {\n    const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n    if (input) {\n      input.value = value\n      input.dispatchEvent(new Event('change', { bubbles: true }))\n    }\n  }\n\n  public getInputValue(name: string): any {\n    const input = this.renderRoot.querySelector(`form [name=\"${name}\"]`) as HTMLInputElement\n    return input?.value\n  }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 export declare class GutterButton {
     static instance(config?: any): any;
 }

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

@@ -1,4 +1,4 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { html } from 'lit';
 export class GutterButton {
     static instance(config = {}) {
@@ -14,13 +14,13 @@ export class GutterButton {
             sortable: false,
             header: {
                 renderer: function (column) {
-                    return html ` <mwc-icon style=${inlineHeaderStyle} title=${title}>${iconFn()}</mwc-icon> `;
+                    return html ` <md-icon style=${inlineHeaderStyle} title=${title}>${iconFn()}</md-icon> `;
                 }
             },
             record: {
                 align: 'center',
                 renderer: function (value, column, record, rowIndex, field) {
-                    return html ` <mwc-icon style=${inlineRecordStyle} title=${title}>${iconFn(record)}</mwc-icon> `;
+                    return html ` <md-icon style=${inlineRecordStyle} title=${title}>${iconFn(record)}</md-icon> `;
                 }
             },
             forGrid: true,

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,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"]}
+{"version":3,"file":"gutter-button.js","sourceRoot":"","sources":["../../../src/gutters/gutter-button.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAA;AAEnC,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,mBAAmB,iBAAiB,UAAU,KAAK,IAAI,MAAM,EAAE,aAAa,CAAA;gBACzF,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,mBAAmB,iBAAiB,UAAU,KAAK,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAA;gBAC/F,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/web/icon/icon.js'\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` <md-icon style=${inlineHeaderStyle} title=${title}>${iconFn()}</md-icon> `\n          } as HeaderRenderer\n        },\n        record: {\n          align: 'center',\n          renderer: function (value, column, record, rowIndex, field) {\n            return html` <md-icon style=${inlineRecordStyle} title=${title}>${iconFn(record)}</md-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,4 +1,4 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { ColumnConfig, FieldRenderer, GristEventHandler } from '../types';
 export declare class GutterDirty {
     static instance(config?: ColumnConfig): {

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

@@ -1,16 +1,16 @@
 import { __decorate } from "tslib";
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 let GutterDirtyElement = class GutterDirtyElement extends LitElement {
     render() {
         switch (this.value) {
             case '+':
-                return html ` <mwc-icon style=${INLINESTYLE} center add>add</mwc-icon> `;
+                return html ` <md-icon style=${INLINESTYLE} center add>add</md-icon> `;
             case '-':
-                return html ` <mwc-icon style=${INLINESTYLE} center remove>remove</mwc-icon> `;
+                return html ` <md-icon style=${INLINESTYLE} center remove>remove</md-icon> `;
             case 'M':
-                return html ` <mwc-icon style=${INLINESTYLE} center done>done</mwc-icon> `;
+                return html ` <md-icon style=${INLINESTYLE} center done>done</md-icon> `;
             default:
                 return '';
         }
@@ -22,7 +22,7 @@ GutterDirtyElement.styles = css `
       margin: auto;
     }
 
-    mwc-icon {
+    md-icon {
       width: var(--grid-record-dirty-icon-size);
       height: var(--grid-record-dirty-icon-size);
       border-radius: 50%;

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;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;IA6BzC,MAAM;QACJ,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,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;QACb,CAAC;IACH,CAAC;;AAvCM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBlB,AAxBY,CAwBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAe;AA3BtC,kBAAkB;IADvB,aAAa,CAAC,yBAAyB,CAAC;GACnC,kBAAkB,CAyCvB;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,KAAK,EAAE,QAAQ;gBACf,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      margin: auto;\n    }\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\n    [add] {\n      background-color: var(--primary-color);\n    }\n\n    [remove] {\n      background-color: var(--status-danger-color);\n    }\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          align: 'center',\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"]}
+{"version":3,"file":"gutter-dirty.js","sourceRoot":"","sources":["../../../src/gutters/gutter-dirty.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,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;IA6BzC,MAAM;QACJ,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,GAAG;gBACN,OAAO,IAAI,CAAA,mBAAmB,WAAW,4BAA4B,CAAA;YACvE,KAAK,GAAG;gBACN,OAAO,IAAI,CAAA,mBAAmB,WAAW,kCAAkC,CAAA;YAC7E,KAAK,GAAG;gBACN,OAAO,IAAI,CAAA,mBAAmB,WAAW,8BAA8B,CAAA;YACzE;gBACE,OAAO,EAAE,CAAA;QACb,CAAC;IACH,CAAC;;AAvCM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBlB,AAxBY,CAwBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAe;AA3BtC,kBAAkB;IADvB,aAAa,CAAC,yBAAyB,CAAC;GACnC,kBAAkB,CAyCvB;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,KAAK,EAAE,QAAQ;gBACf,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/web/icon/icon.js'\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      margin: auto;\n    }\n\n    md-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\n    [add] {\n      background-color: var(--primary-color);\n    }\n\n    [remove] {\n      background-color: var(--status-danger-color);\n    }\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` <md-icon style=${INLINESTYLE} center add>add</md-icon> `\n      case '-':\n        return html` <md-icon style=${INLINESTYLE} center remove>remove</md-icon> `\n      case 'M':\n        return html` <md-icon style=${INLINESTYLE} center done>done</md-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          align: 'center',\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/handlers/contextmenu-tree-mutation.js

@@ -4,7 +4,7 @@ function dispatchEvent(field, event) {
     field.dispatchEvent(new CustomEvent(event, {
         bubbles: true,
         composed: true,
-        detail: field
+        detail: field.record
     }));
 }
 /*
@@ -25,7 +25,7 @@ export const ContextMenuTreeMutation = function (columns, data, column, record,
             dispatchEvent(field, 'add-sibling-node');
         }}
       >
-        <mwc-icon slot="icon">add</mwc-icon>
+        <md-icon slot="icon">add</md-icon>
       </ox-popup-menuitem>
 
       <ox-popup-menuitem
@@ -34,25 +34,7 @@ export const ContextMenuTreeMutation = function (columns, data, column, record,
             dispatchEvent(field, 'add-child-node');
         }}
       >
-        <mwc-icon slot="icon">playlist_add</mwc-icon>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem
-        label="move up"
-        @click=${() => {
-            dispatchEvent(field, 'move-up');
-        }}
-      >
-        <mwc-icon slot="icon">arrow_upward</mwc-icon>
-      </ox-popup-menuitem>
-
-      <ox-popup-menuitem
-        label="move down"
-        @click=${() => {
-            dispatchEvent(field, 'move-down');
-        }}
-      >
-        <mwc-icon slot="icon">arrow_downward</mwc-icon>
+        <md-icon slot="icon">playlist_add</md-icon>
       </ox-popup-menuitem>
 
       <div separator></div>
@@ -63,7 +45,7 @@ export const ContextMenuTreeMutation = function (columns, data, column, record,
             dispatchEvent(field, 'collapse-all');
         }}
       >
-        <mwc-icon slot="icon">unfold_less</mwc-icon>
+        <md-icon slot="icon">unfold_less</md-icon>
       </ox-popup-menuitem>
 
       <ox-popup-menuitem
@@ -72,7 +54,7 @@ export const ContextMenuTreeMutation = function (columns, data, column, record,
             dispatchEvent(field, 'expand-all');
         }}
       >
-        <mwc-icon slot="icon">unfold_more</mwc-icon>
+        <md-icon slot="icon">unfold_more</md-icon>
       </ox-popup-menuitem>
     `,
         top: e.pageY,

package/dist/src/handlers/contextmenu-tree-mutation.js.map

@@ -1 +1 @@
-{"version":3,"file":"contextmenu-tree-mutation.js","sourceRoot":"","sources":["../../../src/handlers/contextmenu-tree-mutation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAK5C,SAAS,aAAa,CAAC,KAAoB,EAAE,KAAa;IACxD,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,KAAK,EAAE;QACrB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,KAAK;KACd,CAAC,CACH,CAAA;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,UACrC,OAAuB,EACvB,IAAe,EACf,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB,EACpB,KAAY;IAEZ,MAAM,CAAC,GAAG,KAAqB,CAAA;IAC/B,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,CAAC,EAAE,CAAC;QACpC,OAAM;IACR,CAAC;IAED,CAAC,CAAC,cAAc,EAAE,CAAA;IAElB,WAAW,CAAC,IAAI,CAAC;QACf,QAAQ,EAAE,IAAI,CAAA;;;iBAGD,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAA;QAC1C,CAAC;;;;;;;iBAOQ,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAA;QACxC,CAAC;;;;;;;iBAOQ,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;QACjC,CAAC;;;;;;;iBAOQ,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,WAAW,CAAC,CAAA;QACnC,CAAC;;;;;;;;;iBASQ,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,CAAA;QACtC,CAAC;;;;;;;iBAOQ,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC,CAAA;QACpC,CAAC;;;;KAIJ;QACD,GAAG,EAAE,CAAC,CAAC,KAAK;QACZ,IAAI,EAAE,CAAC,CAAC,KAAK;KACd,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\nimport { OxPopupMenu } from '@operato/popup'\n\nimport { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristData, GristRecord } from '../types'\n\nfunction dispatchEvent(field: DataGridField, event: string) {\n  field.dispatchEvent(\n    new CustomEvent(event, {\n      bubbles: true,\n      composed: true,\n      detail: field\n    })\n  )\n}\n\n/*\n * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,\n * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.\n */\nexport const ContextMenuTreeMutation = function (\n  columns: ColumnConfig[],\n  data: GristData,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField,\n  event: Event\n): void {\n  const e = event as PointerEvent\n  if (!('pageX' in e && 'pageY' in e)) {\n    return\n  }\n\n  e.preventDefault()\n\n  OxPopupMenu.open({\n    template: html`\n      <ox-popup-menuitem\n        label=\"add sibling node\"\n        @click=${() => {\n          dispatchEvent(field, 'add-sibling-node')\n        }}\n      >\n        <mwc-icon slot=\"icon\">add</mwc-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem\n        label=\"add child node\"\n        @click=${() => {\n          dispatchEvent(field, 'add-child-node')\n        }}\n      >\n        <mwc-icon slot=\"icon\">playlist_add</mwc-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem\n        label=\"move up\"\n        @click=${() => {\n          dispatchEvent(field, 'move-up')\n        }}\n      >\n        <mwc-icon slot=\"icon\">arrow_upward</mwc-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem\n        label=\"move down\"\n        @click=${() => {\n          dispatchEvent(field, 'move-down')\n        }}\n      >\n        <mwc-icon slot=\"icon\">arrow_downward</mwc-icon>\n      </ox-popup-menuitem>\n\n      <div separator></div>\n\n      <ox-popup-menuitem\n        label=\"collapse all\"\n        @click=${() => {\n          dispatchEvent(field, 'collapse-all')\n        }}\n      >\n        <mwc-icon slot=\"icon\">unfold_less</mwc-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem\n        label=\"expand all\"\n        @click=${() => {\n          dispatchEvent(field, 'expand-all')\n        }}\n      >\n        <mwc-icon slot=\"icon\">unfold_more</mwc-icon>\n      </ox-popup-menuitem>\n    `,\n    top: e.pageY,\n    left: e.pageX\n  })\n}\n"]}
+{"version":3,"file":"contextmenu-tree-mutation.js","sourceRoot":"","sources":["../../../src/handlers/contextmenu-tree-mutation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAK5C,SAAS,aAAa,CAAC,KAAoB,EAAE,KAAa;IACxD,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,KAAK,EAAE;QACrB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE,KAAK,CAAC,MAAM;KACrB,CAAC,CACH,CAAA;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,UACrC,OAAuB,EACvB,IAAe,EACf,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB,EACpB,KAAY;IAEZ,MAAM,CAAC,GAAG,KAAqB,CAAA;IAC/B,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,CAAC,EAAE,CAAC;QACpC,OAAM;IACR,CAAC;IAED,CAAC,CAAC,cAAc,EAAE,CAAA;IAElB,WAAW,CAAC,IAAI,CAAC;QACf,QAAQ,EAAE,IAAI,CAAA;;;iBAGD,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAA;QAC1C,CAAC;;;;;;;iBAOQ,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAA;QACxC,CAAC;;;;;;;;;iBASQ,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,CAAA;QACtC,CAAC;;;;;;;iBAOQ,GAAG,EAAE;YACZ,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC,CAAA;QACpC,CAAC;;;;KAIJ;QACD,GAAG,EAAE,CAAC,CAAC,KAAK;QACZ,IAAI,EAAE,CAAC,CAAC,KAAK;KACd,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\nimport { OxPopupMenu } from '@operato/popup'\n\nimport { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristData, GristRecord } from '../types'\n\nfunction dispatchEvent(field: DataGridField, event: string) {\n  field.dispatchEvent(\n    new CustomEvent(event, {\n      bubbles: true,\n      composed: true,\n      detail: field.record\n    })\n  )\n}\n\n/*\n * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,\n * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.\n */\nexport const ContextMenuTreeMutation = function (\n  columns: ColumnConfig[],\n  data: GristData,\n  column: ColumnConfig,\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField,\n  event: Event\n): void {\n  const e = event as PointerEvent\n  if (!('pageX' in e && 'pageY' in e)) {\n    return\n  }\n\n  e.preventDefault()\n\n  OxPopupMenu.open({\n    template: html`\n      <ox-popup-menuitem\n        label=\"add sibling node\"\n        @click=${() => {\n          dispatchEvent(field, 'add-sibling-node')\n        }}\n      >\n        <md-icon slot=\"icon\">add</md-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem\n        label=\"add child node\"\n        @click=${() => {\n          dispatchEvent(field, 'add-child-node')\n        }}\n      >\n        <md-icon slot=\"icon\">playlist_add</md-icon>\n      </ox-popup-menuitem>\n\n      <div separator></div>\n\n      <ox-popup-menuitem\n        label=\"collapse all\"\n        @click=${() => {\n          dispatchEvent(field, 'collapse-all')\n        }}\n      >\n        <md-icon slot=\"icon\">unfold_less</md-icon>\n      </ox-popup-menuitem>\n\n      <ox-popup-menuitem\n        label=\"expand all\"\n        @click=${() => {\n          dispatchEvent(field, 'expand-all')\n        }}\n      >\n        <md-icon slot=\"icon\">unfold_more</md-icon>\n      </ox-popup-menuitem>\n    `,\n    top: e.pageY,\n    left: e.pageX\n  })\n}\n"]}

package/dist/src/index.d.ts

@@ -10,5 +10,4 @@ export * from './gutters';
 export * from './filters';
 export * from './sorters/sorters-control';
 export * from './record-view';
-export * from './value-generator';
 export * from './utils/list-param';

package/dist/src/index.js

@@ -10,6 +10,5 @@ export * from './gutters';
 export * from './filters';
 export * from './sorters/sorters-control';
 export * from './record-view';
-export * from './value-generator';
 export * from './utils/list-param';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AAEvB,cAAc,yBAAyB,CAAA;AACvC,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAE7B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,2BAA2B,CAAA;AACzC,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AAEjC,cAAc,oBAAoB,CAAA","sourcesContent":["export * from './types'\n\nexport * from './configure/zero-config'\nexport * from './data-grist'\nexport * from './data-report'\n\nexport * from './editors'\nexport * from './renderers'\nexport * from './handlers'\nexport * from './formatters'\nexport * from './gutters'\nexport * from './filters'\nexport * from './sorters/sorters-control'\nexport * from './record-view'\nexport * from './value-generator'\n\nexport * from './utils/list-param'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AAEvB,cAAc,yBAAyB,CAAA;AACvC,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAE7B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,2BAA2B,CAAA;AACzC,cAAc,eAAe,CAAA;AAE7B,cAAc,oBAAoB,CAAA","sourcesContent":["export * from './types'\n\nexport * from './configure/zero-config'\nexport * from './data-grist'\nexport * from './data-report'\n\nexport * from './editors'\nexport * from './renderers'\nexport * from './handlers'\nexport * from './formatters'\nexport * from './gutters'\nexport * from './filters'\nexport * from './sorters/sorters-control'\nexport * from './record-view'\n\nexport * from './utils/list-param'\n"]}

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

@@ -1,4 +1,4 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import './record-view';
 import { LitElement } from 'lit';
 import { DataGrist } from '../data-grist';
@@ -10,7 +10,7 @@ export declare class RecordCreator extends LitElement {
     lightPopup: boolean;
     constructor();
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     lightPopupRecordView(): void;
     popupRecordView(): void;
 }

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import './record-view';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';

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          @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"]}
+{"version":3,"file":"record-creator.js","sourceRoot":"","sources":["../../../src/record-view/record-creator.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\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

@@ -1,4 +1,4 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import '../data-grid/data-grid-field';
 import { LitElement } from 'lit';
 import { ColumnConfig, GristRecord } from '../types';
@@ -9,6 +9,6 @@ export declare class RecordViewBody extends LitElement {
     rowIndex: number;
     currentTarget: any;
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
-    _renderLabel(column: ColumnConfig): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    _renderLabel(column: ColumnConfig): import("lit-html").TemplateResult<1>;
 }

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import '../data-grid/data-grid-field';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -32,7 +32,7 @@ let RecordViewBody = class RecordViewBody extends LitElement {
             let dirtyFields = record['__dirtyfields__'] || {};
             return html `
           <label ?editable=${editable}
-            ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <mwc-icon>edit</mwc-icon></label
+            ><span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span> <md-icon>edit</md-icon></label
           >
           <ox-grid-field
             .rowIndex=${rowIndex}
@@ -74,7 +74,7 @@ RecordViewBody.styles = [
         color: var(--record-view-label-color);
       }
 
-      label mwc-icon {
+      label md-icon {
         display: none;
       }
 
@@ -83,7 +83,7 @@ RecordViewBody.styles = [
         font-weight: bold;
       }
 
-      label[editable] mwc-icon {
+      label[editable] md-icon {
         display: inline-block;
         font-size: var(--record-view-label-icon-size);
         opacity: 0.5;