@operato/data-grist 0.3.13 → 0.3.17

package/dist/src/editors/input-editors copy.js

@@ -0,0 +1,373 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config';
+const STYLE = css `
+  :host {
+    display: block;
+
+    width: 100%;
+    height: 100%;
+
+    border: 0;
+    background-color: transparent;
+  }
+
+  :host > * {
+    display: block;
+
+    width: 100%;
+    height: 100%;
+
+    border: 0;
+    background-color: transparent;
+
+    box-sizing: border-box;
+
+    font-size: inherit;
+    font-family: inherit;
+  }
+
+  :host > style {
+    display: none;
+  }
+
+  :host > input[type='checkbox'] {
+    width: initial;
+    margin: auto;
+  }
+  input[type='checkbox'],
+  input[type='radio'] {
+    zoom: var(--grist-input-zoom);
+  }
+  *:focus {
+    outline: none;
+  }
+
+  input[type='file'] {
+    opacity: 0%;
+  }
+
+  @media screen and (max-width: 460px) {
+    :host > * {
+      border: initial;
+      background-color: initial;
+    }
+    *:focus {
+      outline: none;
+    }
+  }
+`;
+let InputEditor = class InputEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.column = ZERO_COLUMN;
+        this.record = ZERO_RECORD;
+    }
+    render() {
+        return this.editorTemplate;
+    }
+    get editor() {
+        return this.renderRoot.firstElementChild;
+    }
+    async firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onchange.bind(this));
+        this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this));
+        this.renderRoot.addEventListener('click', this._onclick.bind(this));
+        this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this));
+        const align = this.column.record.align;
+        if (align) {
+            this.style.textAlign = align;
+            this.style.textAlignLast = align; /* for select */
+        }
+        const name = this.column.name || '';
+        this.value = this._dirtyValue = this.formatForEditor(this.record[name]);
+        this.focus();
+        await this.updateComplete;
+        this.select();
+    }
+    select() {
+        var _a;
+        if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.select) {
+            return this.editor.select();
+        }
+    }
+    focus() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    formatForEditor(value) {
+        return value === undefined ? '' : value;
+    }
+    formatFromEditor(e) {
+        return e.target.value;
+    }
+    _onfocusout() {
+        if (this._dirtyValue !== this.value) {
+            this.dispatchEvent(new CustomEvent('field-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    before: this.value,
+                    after: this._dirtyValue,
+                    column: this.column,
+                    record: this.record,
+                    row: this.row
+                }
+            }));
+        }
+    }
+    _onchange(e) {
+        e.stopPropagation();
+        this._dirtyValue = this.formatFromEditor(e);
+    }
+    _onclick(e) {
+        e.stopPropagation();
+    }
+    _ondblclick(e) {
+        e.stopPropagation();
+    }
+    get editorTemplate() {
+        return html ``;
+    }
+};
+InputEditor.styles = STYLE;
+__decorate([
+    property({ type: Object })
+], InputEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], InputEditor.prototype, "column", void 0);
+__decorate([
+    property({ type: Object })
+], InputEditor.prototype, "record", void 0);
+__decorate([
+    property({ type: Number })
+], InputEditor.prototype, "rowIndex", void 0);
+__decorate([
+    property({ type: Object })
+], InputEditor.prototype, "field", void 0);
+__decorate([
+    property({ type: Number })
+], InputEditor.prototype, "row", void 0);
+InputEditor = __decorate([
+    customElement('ox-input-editor')
+], InputEditor);
+export { InputEditor };
+let TextInput = class TextInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="text" .value=${this.value} /> `;
+    }
+};
+TextInput = __decorate([
+    customElement('ox-text-input')
+], TextInput);
+export { TextInput };
+let EmailInput = class EmailInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="email" .value=${this.value} /> `;
+    }
+};
+EmailInput = __decorate([
+    customElement('ox-email-input')
+], EmailInput);
+export { EmailInput };
+let TelInput = class TelInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="tel" .value=${this.value} /> `;
+    }
+};
+TelInput = __decorate([
+    customElement('ox-tel-input')
+], TelInput);
+export { TelInput };
+let NumberInput = class NumberInput extends InputEditor {
+    formatFromEditor(e) {
+        let value = e.target.value;
+        switch (this.column.type) {
+            case 'float':
+                return Number.parseFloat(value);
+            case 'integer':
+                return Number.parseInt(value);
+            default:
+                return Number(value);
+        }
+    }
+    get editorTemplate() {
+        var { min = -Infinity, max = Infinity } = this.column.record.options || {};
+        return html ` <input type="number" .value=${this.value} .min=${Number(min)} .max=${Number(max)} /> `;
+    }
+};
+NumberInput = __decorate([
+    customElement('ox-number-input')
+], NumberInput);
+export { NumberInput };
+let PasswordInput = class PasswordInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="password" .value=${this.value} /> `;
+    }
+};
+PasswordInput = __decorate([
+    customElement('ox-password-input')
+], PasswordInput);
+export { PasswordInput };
+let DateInput = class DateInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="date" .value=${this.value} /> `;
+    }
+};
+DateInput = __decorate([
+    customElement('ox-date-input')
+], DateInput);
+export { DateInput };
+let MonthInput = class MonthInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="month" .value=${this.value} /> `;
+    }
+};
+MonthInput = __decorate([
+    customElement('ox-month-input')
+], MonthInput);
+export { MonthInput };
+let WeekInput = class WeekInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="week" .value=${this.value} /> `;
+    }
+};
+WeekInput = __decorate([
+    customElement('ox-week-input')
+], WeekInput);
+export { WeekInput };
+let TimeInput = class TimeInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="time" .value=${this.value} /> `;
+    }
+};
+TimeInput = __decorate([
+    customElement('ox-time-input')
+], TimeInput);
+export { TimeInput };
+let DateTimeInput = class DateTimeInput extends InputEditor {
+    formatForEditor(timestamp) {
+        if (!timestamp) {
+            timestamp = Date.now();
+        }
+        var datetime = new Date(timestamp);
+        var tzoffset = datetime.getTimezoneOffset() * 60000; //offset in milliseconds
+        return new Date(timestamp - tzoffset).toISOString().slice(0, -1);
+    }
+    formatFromEditor(e) {
+        var value = e.target.value;
+        var datetime = new Date(value);
+        return datetime.getTime();
+    }
+    get editorTemplate() {
+        return html ` <input type="datetime-local" .value=${this.value} /> `;
+    }
+};
+DateTimeInput = __decorate([
+    customElement('ox-datetime-input')
+], DateTimeInput);
+export { DateTimeInput };
+let ColorInput = class ColorInput extends InputEditor {
+    get editorTemplate() {
+        return html ` <input type="color" .value=${this.value} /> `;
+    }
+};
+ColorInput = __decorate([
+    customElement('ox-color-input')
+], ColorInput);
+export { ColorInput };
+let CheckboxInput = class CheckboxInput extends InputEditor {
+    formatFromEditor(e) {
+        return e.target.checked;
+    }
+    get editorTemplate() {
+        return html ` <input type="checkbox" .checked=${!!this.value} /> `;
+    }
+};
+CheckboxInput = __decorate([
+    customElement('ox-checkbox-input')
+], CheckboxInput);
+export { CheckboxInput };
+let ImageInput = class ImageInput extends InputEditor {
+    get editorTemplate() {
+        return html `${this.value
+            ? html `<span
+            ><button
+              @click=${() => {
+                this.imageInput.dispatchEvent(new Event('change', {
+                    bubbles: true
+                }));
+            }}
+            >
+              X</button
+            >${this.value.name || this.value}</span
+          >`
+            : ''} <input type="file" accept="image/*" /> `;
+    }
+    focus() {
+        if (!this.value)
+            this.imageInput.click();
+    }
+    _onchange(e) {
+        e.stopPropagation();
+        this._dirtyValue = this.formatFromEditor(e);
+        this._onfocusout();
+    }
+    formatFromEditor(e) {
+        var _a;
+        // value가 image file object인지, image url인지 확인
+        const input = e.target;
+        if ((_a = input.files) === null || _a === void 0 ? void 0 : _a[0]) {
+            return input.files[0];
+        }
+        else {
+            return input.value;
+        }
+    }
+};
+__decorate([
+    query('input[type=file]')
+], ImageInput.prototype, "imageInput", void 0);
+ImageInput = __decorate([
+    customElement('ox-image-input')
+], ImageInput);
+export { ImageInput };
+let Select = class Select extends InputEditor {
+    get editorTemplate() {
+        var rowOptionField = this.record[this.column.record.rowOptionField || ''];
+        var { options = [] } = rowOptionField ? rowOptionField : this.column.record;
+        if (typeof options == 'function') {
+            options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field);
+        }
+        options = options.map((option) => {
+            switch (typeof option) {
+                case 'string':
+                    return {
+                        display: option,
+                        value: option
+                    };
+                case 'object':
+                    return {
+                        display: option.display,
+                        value: option.value
+                    };
+                default:
+                    return option;
+            }
+        });
+        return html `
+      <select>
+        ${options.map((option) => html `
+            <option ?selected=${option.value == this.value} value=${option.value}>${option.display}</option>
+          `)}
+      </select>
+    `;
+    }
+};
+Select = __decorate([
+    customElement('ox-select-input')
+], Select);
+export { Select };
+//# sourceMappingURL=input-editors%20copy.js.map

package/dist/src/editors/input-editors copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-editors copy.js","sourceRoot":"","sources":["../../../src/editors/input-editors copy.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristRecord } from '../types'\n\nconst STYLE = css`\n  :host {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n  }\n\n  :host > * {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n\n    box-sizing: border-box;\n\n    font-size: inherit;\n    font-family: inherit;\n  }\n\n  :host > style {\n    display: none;\n  }\n\n  :host > input[type='checkbox'] {\n    width: initial;\n    margin: auto;\n  }\n  input[type='checkbox'],\n  input[type='radio'] {\n    zoom: var(--grist-input-zoom);\n  }\n  *:focus {\n    outline: none;\n  }\n\n  input[type='file'] {\n    opacity: 0%;\n  }\n\n  @media screen and (max-width: 460px) {\n    :host > * {\n      border: initial;\n      background-color: initial;\n    }\n    *:focus {\n      outline: none;\n    }\n  }\n`\n\n@customElement('ox-input-editor')\nexport class InputEditor extends LitElement {\n  static styles = STYLE\n\n  @property({ type: Object }) value?: any\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex?: number\n  @property({ type: Object }) field?: DataGridField\n  @property({ type: Number }) row?: number\n\n  protected _dirtyValue?: any\n\n  render() {\n    return this.editorTemplate\n  }\n\n  get editor(): HTMLElement | null {\n    return this.renderRoot.firstElementChild as HTMLElement\n  }\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onchange.bind(this))\n    this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this))\n    this.renderRoot.addEventListener('click', this._onclick.bind(this))\n    this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this))\n\n    const align = this.column.record.align\n    if (align) {\n      this.style.textAlign = align\n      this.style.textAlignLast = align /* for select */\n    }\n\n    const name = this.column.name || ''\n    this.value = this._dirtyValue = this.formatForEditor(this.record[name])\n\n    this.focus()\n    await this.updateComplete\n    this.select()\n  }\n\n  select() {\n    if ((this.editor as HTMLInputElement)?.select) {\n      return (this.editor as HTMLInputElement).select()\n    }\n  }\n\n  focus() {\n    this.editor?.focus()\n  }\n\n  formatForEditor(value: any): any {\n    return value === undefined ? '' : value\n  }\n\n  formatFromEditor(e: Event): any {\n    return (e.target as HTMLInputElement).value\n  }\n\n  _onfocusout() {\n    if (this._dirtyValue !== this.value) {\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: this.value,\n            after: this._dirtyValue,\n            column: this.column,\n            record: this.record,\n            row: this.row\n          }\n        })\n      )\n    }\n  }\n\n  _onchange(e: Event): void {\n    e.stopPropagation()\n\n    this._dirtyValue = this.formatFromEditor(e)\n  }\n\n  _onclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  _ondblclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  get editorTemplate() {\n    return html``\n  }\n}\n\n@customElement('ox-text-input')\nexport class TextInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"text\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-email-input')\nexport class EmailInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"email\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-tel-input')\nexport class TelInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"tel\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-number-input')\nexport class NumberInput extends InputEditor {\n  formatFromEditor(e: Event) {\n    let value = (e.target as HTMLInputElement).value\n\n    switch (this.column.type) {\n      case 'float':\n        return Number.parseFloat(value)\n      case 'integer':\n        return Number.parseInt(value)\n      default:\n        return Number(value)\n    }\n  }\n\n  get editorTemplate() {\n    var { min = -Infinity, max = Infinity } = this.column.record.options || {}\n\n    return html` <input type=\"number\" .value=${this.value} .min=${Number(min)} .max=${Number(max)} /> `\n  }\n}\n\n@customElement('ox-password-input')\nexport class PasswordInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"password\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-date-input')\nexport class DateInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"date\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-month-input')\nexport class MonthInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"month\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-week-input')\nexport class WeekInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"week\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-time-input')\nexport class TimeInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"time\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-datetime-input')\nexport class DateTimeInput extends InputEditor {\n  formatForEditor(timestamp: any) {\n    if (!timestamp) {\n      timestamp = Date.now()\n    }\n    var datetime = new Date(timestamp)\n\n    var tzoffset = datetime.getTimezoneOffset() * 60000 //offset in milliseconds\n\n    return new Date(timestamp - tzoffset).toISOString().slice(0, -1)\n  }\n\n  formatFromEditor(e: Event) {\n    var value = (e.target as HTMLInputElement).value\n    var datetime = new Date(value)\n\n    return datetime.getTime()\n  }\n\n  get editorTemplate() {\n    return html` <input type=\"datetime-local\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-color-input')\nexport class ColorInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"color\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-checkbox-input')\nexport class CheckboxInput extends InputEditor {\n  formatFromEditor(e: Event) {\n    return (e.target as HTMLInputElement).checked\n  }\n\n  get editorTemplate() {\n    return html` <input type=\"checkbox\" .checked=${!!this.value} /> `\n  }\n}\n\n@customElement('ox-image-input')\nexport class ImageInput extends InputEditor {\n  @query('input[type=file]') imageInput!: HTMLElement\n\n  get editorTemplate() {\n    return html`${this.value\n        ? html`<span\n            ><button\n              @click=${() => {\n                this.imageInput.dispatchEvent(\n                  new Event('change', {\n                    bubbles: true\n                  })\n                )\n              }}\n            >\n              X</button\n            >${this.value.name || this.value}</span\n          >`\n        : ''} <input type=\"file\" accept=\"image/*\" /> `\n  }\n\n  focus() {\n    if (!this.value) this.imageInput.click()\n  }\n\n  _onchange(e: Event) {\n    e.stopPropagation()\n    this._dirtyValue = this.formatFromEditor(e)\n    this._onfocusout()\n  }\n\n  formatFromEditor(e: Event) {\n    // value가 image file object인지, image url인지 확인\n    const input = e.target as HTMLInputElement\n    if (input.files?.[0]) {\n      return input.files[0]\n    } else {\n      return input.value\n    }\n  }\n}\n\n@customElement('ox-select-input')\nexport class Select extends InputEditor {\n  get editorTemplate() {\n    var rowOptionField = this.record[this.column.record.rowOptionField || '']\n    var { options = [] } = rowOptionField ? rowOptionField : this.column.record\n\n    if (typeof options == 'function') {\n      options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field)\n    }\n\n    options = options.map((option: any) => {\n      switch (typeof option) {\n        case 'string':\n          return {\n            display: option,\n            value: option\n          }\n        case 'object':\n          return {\n            display: option.display,\n            value: option.value\n          }\n        default:\n          return option\n      }\n    })\n\n    return html`\n      <select>\n        ${options.map(\n          (option: any) => html`\n            <option ?selected=${option.value == this.value} value=${option.value}>${option.display}</option>\n          `\n        )}\n      </select>\n    `\n  }\n}\n"]}

package/dist/src/editors/input-editors.d.ts

@@ -1,6 +1,6 @@
-import { ColumnConfig, GristRecord } from '../types';
 import { LitElement } from 'lit';
 import { DataGridField } from '../data-grid/data-grid-field';
+import { ColumnConfig, GristRecord } from '../types';
 export declare class InputEditor extends LitElement {
     static styles: import("lit").CSSResult;
     value?: any;
@@ -63,13 +63,6 @@ export declare class CheckboxInput extends InputEditor {
     formatFromEditor(e: Event): boolean;
     get editorTemplate(): import("lit-html").TemplateResult<1>;
 }
-export declare class ImageInput extends InputEditor {
-    imageInput: HTMLElement;
-    get editorTemplate(): import("lit-html").TemplateResult<1>;
-    focus(): void;
-    _onchange(e: Event): void;
-    formatFromEditor(e: Event): string | File;
-}
 export declare class Select extends InputEditor {
     get editorTemplate(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/editors/input-editors.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config';
-import { customElement, property, query } from 'lit/decorators.js';
 const STYLE = css `
   :host {
     display: block;
@@ -14,7 +14,7 @@ const STYLE = css `
   }
 
   :host > * {
-    display: block;
+    display: flex;
 
     width: 100%;
     height: 100%;
@@ -290,50 +290,6 @@ CheckboxInput = __decorate([
     customElement('ox-checkbox-input')
 ], CheckboxInput);
 export { CheckboxInput };
-let ImageInput = class ImageInput extends InputEditor {
-    get editorTemplate() {
-        return html `${this.value
-            ? html `<span
-            >${this.value.name || this.value}<button
-              @click=${() => {
-                this.imageInput.dispatchEvent(new Event('change', {
-                    bubbles: true
-                }));
-            }}
-            >
-              X
-            </button></span
-          >`
-            : ''} <input type="file" accept="image/*" /> `;
-    }
-    focus() {
-        if (!this.value)
-            this.imageInput.click();
-    }
-    _onchange(e) {
-        e.stopPropagation();
-        this._dirtyValue = this.formatFromEditor(e);
-        this._onfocusout();
-    }
-    formatFromEditor(e) {
-        var _a;
-        // value가 image file object인지, image url인지 확인
-        const input = e.target;
-        if ((_a = input.files) === null || _a === void 0 ? void 0 : _a[0]) {
-            return input.files[0];
-        }
-        else {
-            return input.value;
-        }
-    }
-};
-__decorate([
-    query('input[type=file]')
-], ImageInput.prototype, "imageInput", void 0);
-ImageInput = __decorate([
-    customElement('ox-image-input')
-], ImageInput);
-export { ImageInput };
 let Select = class Select extends InputEditor {
     get editorTemplate() {
         var rowOptionField = this.record[this.column.record.rowOptionField || ''];

package/dist/src/editors/input-editors.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-editors.js","sourceRoot":"","sources":["../../../src/editors/input-editors.ts"],"names":[],"mappings":"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","sourcesContent":["import { ColumnConfig, GristRecord } from '../types'\nimport { LitElement, css, html } from 'lit'\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { DataGridField } from '../data-grid/data-grid-field'\n\nconst STYLE = css`\n  :host {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n  }\n\n  :host > * {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n\n    box-sizing: border-box;\n\n    font-size: inherit;\n    font-family: inherit;\n  }\n\n  :host > style {\n    display: none;\n  }\n\n  :host > input[type='checkbox'] {\n    width: initial;\n    margin: auto;\n  }\n  input[type='checkbox'],\n  input[type='radio'] {\n    zoom: var(--grist-input-zoom);\n  }\n  *:focus {\n    outline: none;\n  }\n\n  input[type='file'] {\n    opacity: 0%;\n  }\n\n  @media screen and (max-width: 460px) {\n    :host > * {\n      border: initial;\n      background-color: initial;\n    }\n    *:focus {\n      outline: none;\n    }\n  }\n`\n\n@customElement('ox-input-editor')\nexport class InputEditor extends LitElement {\n  static styles = STYLE\n\n  @property({ type: Object }) value?: any\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex?: number\n  @property({ type: Object }) field?: DataGridField\n  @property({ type: Number }) row?: number\n\n  protected _dirtyValue?: any\n\n  render() {\n    return this.editorTemplate\n  }\n\n  get editor(): HTMLElement | null {\n    return this.renderRoot.firstElementChild as HTMLElement\n  }\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onchange.bind(this))\n    this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this))\n    this.renderRoot.addEventListener('click', this._onclick.bind(this))\n    this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this))\n\n    const align = this.column.record.align\n    if (align) {\n      this.style.textAlign = align\n      this.style.textAlignLast = align /* for select */\n    }\n\n    const name = this.column.name || ''\n    this.value = this._dirtyValue = this.formatForEditor(this.record[name])\n\n    this.focus()\n    await this.updateComplete\n    this.select()\n  }\n\n  select() {\n    if ((this.editor as HTMLInputElement)?.select) {\n      return (this.editor as HTMLInputElement).select()\n    }\n  }\n\n  focus() {\n    this.editor?.focus()\n  }\n\n  formatForEditor(value: any): any {\n    return value === undefined ? '' : value\n  }\n\n  formatFromEditor(e: Event): any {\n    return (e.target as HTMLInputElement).value\n  }\n\n  _onfocusout() {\n    if (this._dirtyValue !== this.value) {\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: this.value,\n            after: this._dirtyValue,\n            column: this.column,\n            record: this.record,\n            row: this.row\n          }\n        })\n      )\n    }\n  }\n\n  _onchange(e: Event): void {\n    e.stopPropagation()\n\n    this._dirtyValue = this.formatFromEditor(e)\n  }\n\n  _onclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  _ondblclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  get editorTemplate() {\n    return html``\n  }\n}\n\n@customElement('ox-text-input')\nexport class TextInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"text\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-email-input')\nexport class EmailInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"email\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-tel-input')\nexport class TelInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"tel\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-number-input')\nexport class NumberInput extends InputEditor {\n  formatFromEditor(e: Event) {\n    let value = (e.target as HTMLInputElement).value\n\n    switch (this.column.type) {\n      case 'float':\n        return Number.parseFloat(value)\n      case 'integer':\n        return Number.parseInt(value)\n      default:\n        return Number(value)\n    }\n  }\n\n  get editorTemplate() {\n    var { min = -Infinity, max = Infinity } = this.column.record.options || {}\n\n    return html` <input type=\"number\" .value=${this.value} .min=${Number(min)} .max=${Number(max)} /> `\n  }\n}\n\n@customElement('ox-password-input')\nexport class PasswordInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"password\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-date-input')\nexport class DateInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"date\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-month-input')\nexport class MonthInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"month\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-week-input')\nexport class WeekInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"week\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-time-input')\nexport class TimeInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"time\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-datetime-input')\nexport class DateTimeInput extends InputEditor {\n  formatForEditor(timestamp: any) {\n    if (!timestamp) {\n      timestamp = Date.now()\n    }\n    var datetime = new Date(timestamp)\n\n    var tzoffset = datetime.getTimezoneOffset() * 60000 //offset in milliseconds\n\n    return new Date(timestamp - tzoffset).toISOString().slice(0, -1)\n  }\n\n  formatFromEditor(e: Event) {\n    var value = (e.target as HTMLInputElement).value\n    var datetime = new Date(value)\n\n    return datetime.getTime()\n  }\n\n  get editorTemplate() {\n    return html` <input type=\"datetime-local\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-color-input')\nexport class ColorInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"color\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-checkbox-input')\nexport class CheckboxInput extends InputEditor {\n  formatFromEditor(e: Event) {\n    return (e.target as HTMLInputElement).checked\n  }\n\n  get editorTemplate() {\n    return html` <input type=\"checkbox\" .checked=${!!this.value} /> `\n  }\n}\n\n@customElement('ox-image-input')\nexport class ImageInput extends InputEditor {\n  @query('input[type=file]') imageInput!: HTMLElement\n\n  get editorTemplate() {\n    return html`${this.value\n        ? html`<span\n            >${this.value.name || this.value}<button\n              @click=${() => {\n                this.imageInput.dispatchEvent(\n                  new Event('change', {\n                    bubbles: true\n                  })\n                )\n              }}\n            >\n              X\n            </button></span\n          >`\n        : ''} <input type=\"file\" accept=\"image/*\" /> `\n  }\n\n  focus() {\n    if (!this.value) this.imageInput.click()\n  }\n\n  _onchange(e: Event) {\n    e.stopPropagation()\n    this._dirtyValue = this.formatFromEditor(e)\n    this._onfocusout()\n  }\n\n  formatFromEditor(e: Event) {\n    // value가 image file object인지, image url인지 확인\n    const input = e.target as HTMLInputElement\n    if (input.files?.[0]) {\n      return input.files[0]\n    } else {\n      return input.value\n    }\n  }\n}\n\n@customElement('ox-select-input')\nexport class Select extends InputEditor {\n  get editorTemplate() {\n    var rowOptionField = this.record[this.column.record.rowOptionField || '']\n    var { options = [] } = rowOptionField ? rowOptionField : this.column.record\n\n    if (typeof options == 'function') {\n      options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field)\n    }\n\n    options = options.map((option: any) => {\n      switch (typeof option) {\n        case 'string':\n          return {\n            display: option,\n            value: option\n          }\n        case 'object':\n          return {\n            display: option.display,\n            value: option.value\n          }\n        default:\n          return option\n      }\n    })\n\n    return html`\n      <select>\n        ${options.map(\n          (option: any) => html`\n            <option ?selected=${option.value == this.value} value=${option.value}>${option.display}</option>\n          `\n        )}\n      </select>\n    `\n  }\n}\n"]}
+{"version":3,"file":"input-editors.js","sourceRoot":"","sources":["../../../src/editors/input-editors.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config'\nimport { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, GristRecord } from '../types'\n\nconst STYLE = css`\n  :host {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n  }\n\n  :host > * {\n    display: flex;\n\n    width: 100%;\n    height: 100%;\n\n    border: 0;\n    background-color: transparent;\n\n    box-sizing: border-box;\n\n    font-size: inherit;\n    font-family: inherit;\n  }\n\n  :host > style {\n    display: none;\n  }\n\n  :host > input[type='checkbox'] {\n    width: initial;\n    margin: auto;\n  }\n  input[type='checkbox'],\n  input[type='radio'] {\n    zoom: var(--grist-input-zoom);\n  }\n  *:focus {\n    outline: none;\n  }\n\n  input[type='file'] {\n    opacity: 0%;\n  }\n\n  @media screen and (max-width: 460px) {\n    :host > * {\n      border: initial;\n      background-color: initial;\n    }\n    *:focus {\n      outline: none;\n    }\n  }\n`\n\n@customElement('ox-input-editor')\nexport class InputEditor extends LitElement {\n  static styles = STYLE\n\n  @property({ type: Object }) value?: any\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex?: number\n  @property({ type: Object }) field?: DataGridField\n  @property({ type: Number }) row?: number\n\n  protected _dirtyValue?: any\n\n  render() {\n    return this.editorTemplate\n  }\n\n  get editor(): HTMLElement | null {\n    return this.renderRoot.firstElementChild as HTMLElement\n  }\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onchange.bind(this))\n    this.renderRoot.addEventListener('focusout', this._onfocusout.bind(this))\n    this.renderRoot.addEventListener('click', this._onclick.bind(this))\n    this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this))\n\n    const align = this.column.record.align\n    if (align) {\n      this.style.textAlign = align\n      this.style.textAlignLast = align /* for select */\n    }\n\n    const name = this.column.name || ''\n    this.value = this._dirtyValue = this.formatForEditor(this.record[name])\n\n    this.focus()\n    await this.updateComplete\n    this.select()\n  }\n\n  select() {\n    if ((this.editor as HTMLInputElement)?.select) {\n      return (this.editor as HTMLInputElement).select()\n    }\n  }\n\n  focus() {\n    this.editor?.focus()\n  }\n\n  formatForEditor(value: any): any {\n    return value === undefined ? '' : value\n  }\n\n  formatFromEditor(e: Event): any {\n    return (e.target as HTMLInputElement).value\n  }\n\n  _onfocusout() {\n    if (this._dirtyValue !== this.value) {\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: this.value,\n            after: this._dirtyValue,\n            column: this.column,\n            record: this.record,\n            row: this.row\n          }\n        })\n      )\n    }\n  }\n\n  _onchange(e: Event): void {\n    e.stopPropagation()\n\n    this._dirtyValue = this.formatFromEditor(e)\n  }\n\n  _onclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  _ondblclick(e: Event): void {\n    e.stopPropagation()\n  }\n\n  get editorTemplate() {\n    return html``\n  }\n}\n\n@customElement('ox-text-input')\nexport class TextInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"text\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-email-input')\nexport class EmailInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"email\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-tel-input')\nexport class TelInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"tel\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-number-input')\nexport class NumberInput extends InputEditor {\n  formatFromEditor(e: Event) {\n    let value = (e.target as HTMLInputElement).value\n\n    switch (this.column.type) {\n      case 'float':\n        return Number.parseFloat(value)\n      case 'integer':\n        return Number.parseInt(value)\n      default:\n        return Number(value)\n    }\n  }\n\n  get editorTemplate() {\n    var { min = -Infinity, max = Infinity } = this.column.record.options || {}\n\n    return html` <input type=\"number\" .value=${this.value} .min=${Number(min)} .max=${Number(max)} /> `\n  }\n}\n\n@customElement('ox-password-input')\nexport class PasswordInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"password\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-date-input')\nexport class DateInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"date\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-month-input')\nexport class MonthInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"month\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-week-input')\nexport class WeekInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"week\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-time-input')\nexport class TimeInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"time\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-datetime-input')\nexport class DateTimeInput extends InputEditor {\n  formatForEditor(timestamp: any) {\n    if (!timestamp) {\n      timestamp = Date.now()\n    }\n    var datetime = new Date(timestamp)\n\n    var tzoffset = datetime.getTimezoneOffset() * 60000 //offset in milliseconds\n\n    return new Date(timestamp - tzoffset).toISOString().slice(0, -1)\n  }\n\n  formatFromEditor(e: Event) {\n    var value = (e.target as HTMLInputElement).value\n    var datetime = new Date(value)\n\n    return datetime.getTime()\n  }\n\n  get editorTemplate() {\n    return html` <input type=\"datetime-local\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-color-input')\nexport class ColorInput extends InputEditor {\n  get editorTemplate() {\n    return html` <input type=\"color\" .value=${this.value} /> `\n  }\n}\n\n@customElement('ox-checkbox-input')\nexport class CheckboxInput extends InputEditor {\n  formatFromEditor(e: Event) {\n    return (e.target as HTMLInputElement).checked\n  }\n\n  get editorTemplate() {\n    return html` <input type=\"checkbox\" .checked=${!!this.value} /> `\n  }\n}\n\n@customElement('ox-select-input')\nexport class Select extends InputEditor {\n  get editorTemplate() {\n    var rowOptionField = this.record[this.column.record.rowOptionField || '']\n    var { options = [] } = rowOptionField ? rowOptionField : this.column.record\n\n    if (typeof options == 'function') {\n      options = options.call(null, this.value, this.column, this.record, this.rowIndex, this.field)\n    }\n\n    options = options.map((option: any) => {\n      switch (typeof option) {\n        case 'string':\n          return {\n            display: option,\n            value: option\n          }\n        case 'object':\n          return {\n            display: option.display,\n            value: option.value\n          }\n        default:\n          return option\n      }\n    })\n\n    return html`\n      <select>\n        ${options.map(\n          (option: any) => html`\n            <option ?selected=${option.value == this.value} value=${option.value}>${option.display}</option>\n          `\n        )}\n      </select>\n    `\n  }\n}\n"]}

package/dist/src/editors/registry.d.ts

@@ -1,5 +1,5 @@
-import { InputEditor } from './input-editors';
 import { FieldEditor } from '../types';
+import { InputEditor } from './input-editors';
 export declare function registerEditor(type: string, editor: {
     new (): InputEditor;
 }): void;

package/dist/src/editors/registry.js

@@ -1,4 +1,5 @@
-import { CheckboxInput, ColorInput, DateInput, DateTimeInput, EmailInput, ImageInput, MonthInput, NumberInput, PasswordInput, Select, TelInput, TextInput, TimeInput, WeekInput } from './input-editors';
+import { ImageInput } from './image-input';
+import { CheckboxInput, ColorInput, DateInput, DateTimeInput, EmailInput, MonthInput, NumberInput, PasswordInput, Select, TelInput, TextInput, TimeInput, WeekInput } from './input-editors';
 var EDITORS = {
     string: TextInput,
     text: TextInput,

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

@@ -1 +1 @@
-{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/editors/registry.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,SAAS,EACT,aAAa,EACb,UAAU,EACV,UAAU,EAEV,UAAU,EACV,WAAW,EACX,aAAa,EACb,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,iBAAiB,CAAA;AAKxB,IAAI,OAAO,GAAgD;IACzD,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,UAAU;IACjB,GAAG,EAAE,QAAQ;IACb,QAAQ,EAAE,aAAa;IACvB,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE,WAAW;IACnB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,aAAa;IACtB,QAAQ,EAAE,aAAa;IACvB,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,aAAa;IACvB,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,WAAW;IACrB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,UAAU,cAAc,CAAC,IAAY,EAAE,MAA+B;IAC1E,OAAO,CAAC,IAAI,CAAC,GAAG,MAAM,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,IAAY;IAC3C,OAAO,OAAO,CAAC,IAAI,CAAC,CAAA;AACtB,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,OAAO,EAAE,GAAG,OAAO,EAAE,CAAA;AACvB,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,IAAY;IACpC,IAAI,OAAO,IAAI,IAAI,UAAU,EAAE;QAC7B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,UAAU,KAAU,EAAE,MAAoB,EAAE,MAAmB,EAAE,QAAgB,EAAE,KAAoB;QAC5G,IAAI,KAAK,GAAG,OAAO,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,SAAS,CAAA;QAEhD,IAAI,OAAO,GAAG,IAAI,KAAK,EAAE,CAAA;QAEzB,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;QACrB,OAAO,CAAC,MAAM,GAAG,MAAM,CAAA;QACvB,OAAO,CAAC,MAAM,GAAG,MAAM,CAAA;QACvB,OAAO,CAAC,GAAG,GAAG,QAAQ,CAAA;QACtB,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;QAErB,OAAO,OAAO,CAAA;IAChB,CAAC,CAAA;AACH,CAAC","sourcesContent":["import {\n  CheckboxInput,\n  ColorInput,\n  DateInput,\n  DateTimeInput,\n  EmailInput,\n  ImageInput,\n  InputEditor,\n  MonthInput,\n  NumberInput,\n  PasswordInput,\n  Select,\n  TelInput,\n  TextInput,\n  TimeInput,\n  WeekInput\n} from './input-editors'\nimport { ColumnConfig, FieldEditor, GristRecord } from '../types'\n\nimport { DataGridField } from '../data-grid/data-grid-field'\n\nvar EDITORS: { [name: string]: { new (): InputEditor } } = {\n  string: TextInput,\n  text: TextInput,\n  email: EmailInput,\n  tel: TelInput,\n  password: PasswordInput,\n  integer: NumberInput,\n  float: NumberInput,\n  number: NumberInput,\n  select: Select,\n  boolean: CheckboxInput,\n  checkbox: CheckboxInput,\n  month: MonthInput,\n  week: WeekInput,\n  date: DateInput,\n  time: TimeInput,\n  datetime: DateTimeInput,\n  color: ColorInput,\n  progress: NumberInput,\n  link: TextInput,\n  image: ImageInput\n}\n\nexport function registerEditor(type: string, editor: { new (): InputEditor }) {\n  EDITORS[type] = editor\n}\n\nexport function unregisterEditor(type: string) {\n  delete EDITORS[type]\n}\n\nexport function getEditors(): { [name: string]: { new (): InputEditor } } {\n  return { ...EDITORS }\n}\n\nexport function getEditor(type: string): FieldEditor {\n  if (typeof type == 'function') {\n    return type\n  }\n\n  return function (value: any, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField) {\n    var clazz = EDITORS[type || 'text'] || TextInput\n\n    var element = new clazz()\n\n    element.value = value\n    element.record = record\n    element.column = column\n    element.row = rowIndex\n    element.field = field\n\n    return element\n  }\n}\n"]}
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/editors/registry.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EACL,aAAa,EACb,UAAU,EACV,SAAS,EACT,aAAa,EACb,UAAU,EAEV,UAAU,EACV,WAAW,EACX,aAAa,EACb,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,iBAAiB,CAAA;AAExB,IAAI,OAAO,GAAgD;IACzD,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,UAAU;IACjB,GAAG,EAAE,QAAQ;IACb,QAAQ,EAAE,aAAa;IACvB,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE,WAAW;IACnB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,aAAa;IACtB,QAAQ,EAAE,aAAa;IACvB,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,aAAa;IACvB,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,WAAW;IACrB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,UAAU,cAAc,CAAC,IAAY,EAAE,MAA+B;IAC1E,OAAO,CAAC,IAAI,CAAC,GAAG,MAAM,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,IAAY;IAC3C,OAAO,OAAO,CAAC,IAAI,CAAC,CAAA;AACtB,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,OAAO,EAAE,GAAG,OAAO,EAAE,CAAA;AACvB,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,IAAY;IACpC,IAAI,OAAO,IAAI,IAAI,UAAU,EAAE;QAC7B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,UAAU,KAAU,EAAE,MAAoB,EAAE,MAAmB,EAAE,QAAgB,EAAE,KAAoB;QAC5G,IAAI,KAAK,GAAG,OAAO,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,SAAS,CAAA;QAEhD,IAAI,OAAO,GAAG,IAAI,KAAK,EAAE,CAAA;QAEzB,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;QACrB,OAAO,CAAC,MAAM,GAAG,MAAM,CAAA;QACvB,OAAO,CAAC,MAAM,GAAG,MAAM,CAAA;QACvB,OAAO,CAAC,GAAG,GAAG,QAAQ,CAAA;QACtB,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;QAErB,OAAO,OAAO,CAAA;IAChB,CAAC,CAAA;AACH,CAAC","sourcesContent":["import { DataGridField } from '../data-grid/data-grid-field'\nimport { ColumnConfig, FieldEditor, GristRecord } from '../types'\nimport { ImageInput } from './image-input'\nimport {\n  CheckboxInput,\n  ColorInput,\n  DateInput,\n  DateTimeInput,\n  EmailInput,\n  InputEditor,\n  MonthInput,\n  NumberInput,\n  PasswordInput,\n  Select,\n  TelInput,\n  TextInput,\n  TimeInput,\n  WeekInput\n} from './input-editors'\n\nvar EDITORS: { [name: string]: { new (): InputEditor } } = {\n  string: TextInput,\n  text: TextInput,\n  email: EmailInput,\n  tel: TelInput,\n  password: PasswordInput,\n  integer: NumberInput,\n  float: NumberInput,\n  number: NumberInput,\n  select: Select,\n  boolean: CheckboxInput,\n  checkbox: CheckboxInput,\n  month: MonthInput,\n  week: WeekInput,\n  date: DateInput,\n  time: TimeInput,\n  datetime: DateTimeInput,\n  color: ColorInput,\n  progress: NumberInput,\n  link: TextInput,\n  image: ImageInput\n}\n\nexport function registerEditor(type: string, editor: { new (): InputEditor }) {\n  EDITORS[type] = editor\n}\n\nexport function unregisterEditor(type: string) {\n  delete EDITORS[type]\n}\n\nexport function getEditors(): { [name: string]: { new (): InputEditor } } {\n  return { ...EDITORS }\n}\n\nexport function getEditor(type: string): FieldEditor {\n  if (typeof type == 'function') {\n    return type\n  }\n\n  return function (value: any, column: ColumnConfig, record: GristRecord, rowIndex: number, field: DataGridField) {\n    var clazz = EDITORS[type || 'text'] || TextInput\n\n    var element = new clazz()\n\n    element.value = value\n    element.record = record\n    element.column = column\n    element.row = rowIndex\n    element.field = field\n\n    return element\n  }\n}\n"]}

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

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