@operato/data-grist 1.0.0-alpha.30 → 1.0.0-alpha.33

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.33](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.32...v1.0.0-alpha.33) (2022-03-19)
+
+
+### :bug: Bug Fix
+
+* ox-grist json5 renderer ([1ff95e2](https://github.com/hatiolab/operato/commit/1ff95e21ac1b467620327a2a3f7aacd105b83414))
+
+
+
+## [1.0.0-alpha.32](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.31...v1.0.0-alpha.32) (2022-03-19)
+
+
+### :bug: Bug Fix
+
+* typo ([2f2e3fc](https://github.com/hatiolab/operato/commit/2f2e3fcce771dcbfe2f1d09cbd25638094a6dc99))
+
+
+
+## [1.0.0-alpha.31](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.30...v1.0.0-alpha.31) (2022-03-19)
+
+
+### :bug: Bug Fix
+
+* ox-grist-renderer support class type renderer (refer ox-grist-renderer-progress) ([ad7c8e1](https://github.com/hatiolab/operato/commit/ad7c8e1b453d19af9daa13ae4eb7c2059d85dfbb))
+
+
+
 ## [1.0.0-alpha.30](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.29...v1.0.0-alpha.30) (2022-03-18)
 
 **Note:** Version bump only for package @operato/data-grist

package/demo/index.html

@@ -119,7 +119,7 @@
         list: {
           thumbnail: 'thumbnail',
           fields: ['name', 'description'],
-          details: ['role', 'email']
+          details: ['role', 'email', 'json5']
         },
         columns: [
           {
@@ -285,6 +285,15 @@
             header: 'JSON5',
             width: 200
           },
+          {
+            type: 'progress',
+            name: 'rate',
+            header: 'progress',
+            record: {
+              editable: true
+            },
+            width: 200
+          },
           {
             type: 'image',
             name: 'thumbnail',

package/dist/src/data-card/record-card.js

@@ -181,6 +181,7 @@ RecordCard.styles = [
         position: absolute;
         left: 0;
         top: 0;
+        z-index: 1;
 
         width: 0px;
         height: 0px;
@@ -192,6 +193,8 @@ RecordCard.styles = [
         position: absolute;
         margin: 0;
         height: 20px;
+        z-index: 2;
+
         font: var(--grid-record-dirty-icon-font);
         text-indent: 1px;
         left: 0;

package/dist/src/data-card/record-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"record-card.js","sourceRoot":"","sources":["../../../src/data-card/record-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './data-card-field'\nimport '../record-view'\nimport './data-card-gutter'\nimport './data-card-gutter-menu'\n\nimport { GristConfig, GristData, GristRecord } from '../types'\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { RecordViewHandler } from '../record-view/record-view-handler'\nimport { recordCardClickHandler } from './event-handlers/record-card-click-handler'\nimport { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: false\n  // timeZone: 'America/Los_Angeles'\n}\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, OPTIONS)\n\n@customElement('ox-record-card')\nexport class RecordCard extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        position: relative;\n      }\n\n      :host([dirty])::before {\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 0;\n\n        width: 0px;\n        height: 0px;\n        border-top: var(--grid-record-dirty-border-top);\n        border-right: var(--grid-record-dirty-border-left);\n      }\n\n      [dirty] {\n        position: absolute;\n        margin: 0;\n        height: 20px;\n        font: var(--grid-record-dirty-icon-font);\n        text-indent: 1px;\n        left: 0;\n        top: 0;\n        color: var(--grid-record-dirty-color);\n      }\n\n      [thumbnail] {\n        width: 100%;\n        height: var(--data-card-thumbnail-height);\n        border-top-left-radius: var(--data-card-record-card-border-radius);\n        border-top-right-radius: var(--data-card-record-card-border-radius);\n        border-bottom: var(--data-card-thumbnail-border-bottom);\n        overflow: hidden;\n      }\n\n      [content] {\n        display: grid;\n        gap: 2px 7px;\n        grid-template:\n          'brief gutters'\n          'detail detail';\n        grid-template-columns: 1fr 35px;\n        margin: var(--data-card-item-margin);\n      }\n\n      [brief] {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n        grid-area: brief;\n        overflow: hidden;\n      }\n\n      [gutters] {\n        grid-area: gutters;\n      }\n\n      [detail] {\n        grid-area: detail;\n        overflow: hidden;\n      }\n\n      ox-card-gutter {\n        flex: 0 0 14px;\n      }\n\n      ox-card-field {\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color);\n      }\n\n      ox-card-field[name] {\n        font: var(--data-card-item-name-font);\n        color: var(--data-card-item-name-color);\n      }\n\n      ox-card-field[desc] {\n        font: var(--data-card-item-disc-font);\n        color: var(--data-card-item-disc-color);\n      }\n\n      .update-info {\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color);\n      }\n\n      .update-info mwc-icon {\n        vertical-align: middle;\n        font-size: 1em;\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  /*\n   * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n\n  private _recordView: any\n  private clickHandler = recordCardClickHandler.bind(this) as EventListener\n  private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', this.clickHandler)\n    this.renderRoot.addEventListener('dblclick', this.dblclickHandler)\n\n    this.addEventListener('show-record-view', () => this.popupRecordView())\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('record') && this._recordView) {\n      this._recordView.record = this.record\n    }\n  }\n\n  render() {\n    const record = this.record\n    const rowIndex = this.rowIndex\n    const { columns, list } = this.config\n    const { thumbnail, fields, details } = list || {}\n\n    const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    const detailFields =\n      details.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n\n    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n\n    const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n    const firstGutter = gutters[0]\n\n    if (this.hasAttribute('dirty')) {\n      var dirtyIcon\n\n      switch (this.record['__dirty__']) {\n        case 'M':\n          dirtyIcon = 'done'\n          break\n        case '+':\n          dirtyIcon = 'add'\n          break\n        case '-':\n          dirtyIcon = 'remove'\n          break\n      }\n    }\n\n    return html`\n      ${dirtyIcon ? html` <mwc-icon dirty>${dirtyIcon}</mwc-icon> ` : html``}\n      ${thumbnailColumn\n        ? html` <ox-card-field\n            thumbnail\n            .rowIndex=${rowIndex}\n            .column=${thumbnailColumn}\n            .record=${record}\n            .value=${record[thumbnailColumn?.name || '']}\n          ></ox-card-field>`\n        : html``}\n\n      <div content>\n        <div gutters>\n          ${firstGutter\n            ? html`\n                <ox-card-gutter\n                  .rowIndex=${rowIndex}\n                  .column=${firstGutter}\n                  .record=${record}\n                  .value=${record[firstGutter.name]}\n                ></ox-card-gutter>\n              `\n            : html``}\n          ${gutters.length === 2\n            ? html`\n                <ox-card-gutter\n                  .rowIndex=${rowIndex}\n                  .column=${gutters[1]}\n                  .record=${record}\n                  .value=${record[gutters[1].name]}\n                ></ox-card-gutter>\n              `\n            : gutters.length > 2\n            ? html`\n                <ox-card-gutter-menu\n                  .gutters=${gutters}\n                  .rowIndex=${rowIndex}\n                  .record=${record}\n                  .clickHandler=${this.clickHandler}\n                  .dblclickHandler=${this.dblclickHandler}\n                ></ox-card-gutter-menu>\n              `\n            : html``}\n        </div>\n\n        <div brief>\n          ${briefFields.map(\n            (column, idx) =>\n              html`\n                <ox-card-field\n                  .rowIndex=${rowIndex}\n                  .column=${column}\n                  .record=${record}\n                  .value=${record[column?.name || '']}\n                  ?name=${idx == 0}\n                  ?desc=${idx == 1}\n                ></ox-card-field>\n              `\n          )}\n        </div>\n        ${detailFields.length > 0\n          ? html`\n              <div detail>\n                ${detailFields.map(\n                  (column, idx) =>\n                    html`\n                      <ox-card-field\n                        .rowIndex=${rowIndex}\n                        .column=${column}\n                        .record=${record}\n                        .value=${record[column?.name || '']}\n                      ></ox-card-field>\n                    `\n                )}\n              </div>\n            `\n          : html``}\n      </div>\n    `\n  }\n\n  popupRecordView() {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n    }\n\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      this.record,\n      this.rowIndex,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n      }\n    )\n  }\n}\n"]}
+{"version":3,"file":"record-card.js","sourceRoot":"","sources":["../../../src/data-card/record-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './data-card-field'\nimport '../record-view'\nimport './data-card-gutter'\nimport './data-card-gutter-menu'\n\nimport { GristConfig, GristData, GristRecord } from '../types'\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { RecordViewHandler } from '../record-view/record-view-handler'\nimport { recordCardClickHandler } from './event-handlers/record-card-click-handler'\nimport { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-handler'\n\n// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.\nconst OPTIONS: Intl.DateTimeFormatOptions = {\n  year: 'numeric',\n  month: 'numeric',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: false\n  // timeZone: 'America/Los_Angeles'\n}\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, OPTIONS)\n\n@customElement('ox-record-card')\nexport class RecordCard extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        position: relative;\n      }\n\n      :host([dirty])::before {\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 0;\n        z-index: 1;\n\n        width: 0px;\n        height: 0px;\n        border-top: var(--grid-record-dirty-border-top);\n        border-right: var(--grid-record-dirty-border-left);\n      }\n\n      [dirty] {\n        position: absolute;\n        margin: 0;\n        height: 20px;\n        z-index: 2;\n\n        font: var(--grid-record-dirty-icon-font);\n        text-indent: 1px;\n        left: 0;\n        top: 0;\n        color: var(--grid-record-dirty-color);\n      }\n\n      [thumbnail] {\n        width: 100%;\n        height: var(--data-card-thumbnail-height);\n        border-top-left-radius: var(--data-card-record-card-border-radius);\n        border-top-right-radius: var(--data-card-record-card-border-radius);\n        border-bottom: var(--data-card-thumbnail-border-bottom);\n        overflow: hidden;\n      }\n\n      [content] {\n        display: grid;\n        gap: 2px 7px;\n        grid-template:\n          'brief gutters'\n          'detail detail';\n        grid-template-columns: 1fr 35px;\n        margin: var(--data-card-item-margin);\n      }\n\n      [brief] {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n        grid-area: brief;\n        overflow: hidden;\n      }\n\n      [gutters] {\n        grid-area: gutters;\n      }\n\n      [detail] {\n        grid-area: detail;\n        overflow: hidden;\n      }\n\n      ox-card-gutter {\n        flex: 0 0 14px;\n      }\n\n      ox-card-field {\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color);\n      }\n\n      ox-card-field[name] {\n        font: var(--data-card-item-name-font);\n        color: var(--data-card-item-name-color);\n      }\n\n      ox-card-field[desc] {\n        font: var(--data-card-item-disc-font);\n        color: var(--data-card-item-disc-color);\n      }\n\n      .update-info {\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color);\n      }\n\n      .update-info mwc-icon {\n        vertical-align: middle;\n        font-size: 1em;\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  /*\n   * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n\n  private _recordView: any\n  private clickHandler = recordCardClickHandler.bind(this) as EventListener\n  private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', this.clickHandler)\n    this.renderRoot.addEventListener('dblclick', this.dblclickHandler)\n\n    this.addEventListener('show-record-view', () => this.popupRecordView())\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('record') && this._recordView) {\n      this._recordView.record = this.record\n    }\n  }\n\n  render() {\n    const record = this.record\n    const rowIndex = this.rowIndex\n    const { columns, list } = this.config\n    const { thumbnail, fields, details } = list || {}\n\n    const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    const detailFields =\n      details.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n\n    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n\n    const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n    const firstGutter = gutters[0]\n\n    if (this.hasAttribute('dirty')) {\n      var dirtyIcon\n\n      switch (this.record['__dirty__']) {\n        case 'M':\n          dirtyIcon = 'done'\n          break\n        case '+':\n          dirtyIcon = 'add'\n          break\n        case '-':\n          dirtyIcon = 'remove'\n          break\n      }\n    }\n\n    return html`\n      ${dirtyIcon ? html` <mwc-icon dirty>${dirtyIcon}</mwc-icon> ` : html``}\n      ${thumbnailColumn\n        ? html` <ox-card-field\n            thumbnail\n            .rowIndex=${rowIndex}\n            .column=${thumbnailColumn}\n            .record=${record}\n            .value=${record[thumbnailColumn?.name || '']}\n          ></ox-card-field>`\n        : html``}\n\n      <div content>\n        <div gutters>\n          ${firstGutter\n            ? html`\n                <ox-card-gutter\n                  .rowIndex=${rowIndex}\n                  .column=${firstGutter}\n                  .record=${record}\n                  .value=${record[firstGutter.name]}\n                ></ox-card-gutter>\n              `\n            : html``}\n          ${gutters.length === 2\n            ? html`\n                <ox-card-gutter\n                  .rowIndex=${rowIndex}\n                  .column=${gutters[1]}\n                  .record=${record}\n                  .value=${record[gutters[1].name]}\n                ></ox-card-gutter>\n              `\n            : gutters.length > 2\n            ? html`\n                <ox-card-gutter-menu\n                  .gutters=${gutters}\n                  .rowIndex=${rowIndex}\n                  .record=${record}\n                  .clickHandler=${this.clickHandler}\n                  .dblclickHandler=${this.dblclickHandler}\n                ></ox-card-gutter-menu>\n              `\n            : html``}\n        </div>\n\n        <div brief>\n          ${briefFields.map(\n            (column, idx) =>\n              html`\n                <ox-card-field\n                  .rowIndex=${rowIndex}\n                  .column=${column}\n                  .record=${record}\n                  .value=${record[column?.name || '']}\n                  ?name=${idx == 0}\n                  ?desc=${idx == 1}\n                ></ox-card-field>\n              `\n          )}\n        </div>\n        ${detailFields.length > 0\n          ? html`\n              <div detail>\n                ${detailFields.map(\n                  (column, idx) =>\n                    html`\n                      <ox-card-field\n                        .rowIndex=${rowIndex}\n                        .column=${column}\n                        .record=${record}\n                        .value=${record[column?.name || '']}\n                      ></ox-card-field>\n                    `\n                )}\n              </div>\n            `\n          : html``}\n      </div>\n    `\n  }\n\n  popupRecordView() {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n    }\n\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      this.record,\n      this.rowIndex,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n      }\n    )\n  }\n}\n"]}

package/dist/src/data-grid/data-grid-field.d.ts

@@ -1,5 +1,5 @@
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { ColumnConfig, GristRecord } from '../types';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
 export declare class DataGridField extends LitElement {
     static styles: import("lit").CSSResult[];
     align: string;

package/dist/src/data-grid/data-grid-field.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
+import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { TooltipStyles } from '@operato/styles';
 import { ZERO_COLUMN } from '../configure/zero-config';
 const DEFAULT_TEXT_ALIGN = 'left';
 let DataGridField = class DataGridField extends LitElement {
@@ -69,7 +70,7 @@ let DataGridField = class DataGridField extends LitElement {
         }
         const emphasized = ((_a = this.column.record.classifier.call(this, this.record, this.rowIndex)) === null || _a === void 0 ? void 0 : _a.emphasized) || this.emphasized;
         if (!!emphasized) {
-            this.setAttribute('emphasized-row', 'true');
+            this.setAttribute('emphasized-row', '');
             if (Symbol.iterator in Object(emphasized)) {
                 const [backgroundColor, foregroundColor] = emphasized;
                 backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor);
@@ -82,6 +83,7 @@ let DataGridField = class DataGridField extends LitElement {
     }
 };
 DataGridField.styles = [
+    TooltipStyles,
     css `
       :host {
         display: flex;
@@ -90,7 +92,6 @@ DataGridField.styles = [
         justify-content: var(--data-grid-field-justify-content, flex-start);
         position: relative;
 
-        overflow: hidden;
         white-space: nowrap;
         background-color: var(--grid-record-background-color);
         padding: var(--grid-record-padding);
@@ -131,7 +132,8 @@ DataGridField.styles = [
         border-left: 9px solid transparent;
       }
 
-      span {
+      span,
+      pre {
         display: block;
         text-overflow: ellipsis;
         overflow: hidden;

package/dist/src/data-grid/data-grid-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-field')\nexport class DataGridField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n\n        align-items: center;\n        justify-content: var(--data-grid-field-justify-content, flex-start);\n        position: relative;\n\n        overflow: hidden;\n        white-space: nowrap;\n        background-color: var(--grid-record-background-color);\n        padding: var(--grid-record-padding);\n        border: 1px solid transparent;\n        border-width: 1px 0;\n        border-bottom: var(--grid-record-border-bottom);\n\n        font-size: var(--grid-record-wide-fontsize);\n        min-height: 19px;\n      }\n      :host([gutter]) {\n        padding: var(--padding-default) 0;\n        text-align: center;\n      }\n      :host([gutter]) * {\n        cursor: default;\n      }\n\n      :host([editing]) {\n        padding: 0;\n        border-top: var(--grid-record-editing-border);\n        border-bottom: var(--grid-record-editing-border);\n      }\n\n      :host([focused]) {\n        --grid-record-border-bottom: var(--grid-record-focused-cell-border);\n      }\n\n      :host([dirty])::after {\n        content: '';\n        position: absolute;\n        right: 0;\n        top: 0;\n\n        width: 0px;\n        height: 0px;\n        border-top: 9px solid red;\n        border-left: 9px solid transparent;\n      }\n\n      span {\n        display: block;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      * {\n        margin: 0;\n        text-align: var(--data-grid-field-text-align);\n      }\n\n      *[center] {\n        flex: none;\n        margin: 0 auto;\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        margin-top: 3px;\n        zoom: var(--grist-input-zoom);\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n  @property({ type: Object }) record: GristRecord = {}\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex = 0\n  @property({ type: Number }) columnIndex = 0\n  @property({ type: Boolean, attribute: 'editing' }) editing = false\n  @property({ type: Object }) value = {}\n  @property({ type: Boolean }) emphasized = false\n\n  private _editCancelled?: boolean\n  private _onFieldChange: (e: Event) => void = e => {}\n  private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}\n\n  private get isEditing() {\n    return this.hasAttribute('editing')\n  }\n\n  render(): TemplateResult {\n    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer, editor } = column.record\n\n    return html`\n      ${this.isEditing\n        ? editor?.call(this, value, column, record, rowIndex, this)\n        : renderer?.call(this, value, column, record, rowIndex, this)}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('editing')) {\n      if (this.isEditing) {\n        this._onKeydownInEditingMode = ((e: KeyboardEvent) => {\n          if (e.key === 'Esc' || e.key === 'Escape') {\n            /* 편집 취소 */\n            this._editCancelled = true\n          }\n        }).bind(this)\n\n        this._onFieldChange = ((e: Event) => {\n          this._editCancelled && e.stopPropagation()\n        }).bind(this)\n\n        delete this._editCancelled\n        this.addEventListener('field-change', this._onFieldChange)\n        this.addEventListener('keydown', this._onKeydownInEditingMode)\n      } else {\n        this.removeEventListener('field-change', this._onFieldChange)\n        this.removeEventListener('keydown', this._onKeydownInEditingMode)\n      }\n    }\n\n    if (changes.has('column')) {\n      var align = this.column.record.align || DEFAULT_TEXT_ALIGN\n      if (align != DEFAULT_TEXT_ALIGN) {\n        let justify = 'center'\n        switch (align) {\n          case 'right':\n            justify = 'flex-end'\n            break\n        }\n        this.style.setProperty('--data-grid-field-justify-content', justify)\n        this.style.setProperty('--data-grid-field-text-align', align)\n      }\n    }\n\n    const emphasized =\n      this.column.record.classifier.call(this, this.record, this.rowIndex)?.emphasized || this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', 'true')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n}\n"]}
+{"version":3,"file":"data-grid-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { ColumnConfig, GristRecord } from '../types'\nimport { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { TooltipStyles } from '@operato/styles'\nimport { ZERO_COLUMN } from '../configure/zero-config'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-field')\nexport class DataGridField extends LitElement {\n  static styles = [\n    TooltipStyles,\n    css`\n      :host {\n        display: flex;\n\n        align-items: center;\n        justify-content: var(--data-grid-field-justify-content, flex-start);\n        position: relative;\n\n        white-space: nowrap;\n        background-color: var(--grid-record-background-color);\n        padding: var(--grid-record-padding);\n        border: 1px solid transparent;\n        border-width: 1px 0;\n        border-bottom: var(--grid-record-border-bottom);\n\n        font-size: var(--grid-record-wide-fontsize);\n        min-height: 19px;\n      }\n      :host([gutter]) {\n        padding: var(--padding-default) 0;\n        text-align: center;\n      }\n      :host([gutter]) * {\n        cursor: default;\n      }\n\n      :host([editing]) {\n        padding: 0;\n        border-top: var(--grid-record-editing-border);\n        border-bottom: var(--grid-record-editing-border);\n      }\n\n      :host([focused]) {\n        --grid-record-border-bottom: var(--grid-record-focused-cell-border);\n      }\n\n      :host([dirty])::after {\n        content: '';\n        position: absolute;\n        right: 0;\n        top: 0;\n\n        width: 0px;\n        height: 0px;\n        border-top: 9px solid red;\n        border-left: 9px solid transparent;\n      }\n\n      span,\n      pre {\n        display: block;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      * {\n        margin: 0;\n        text-align: var(--data-grid-field-text-align);\n      }\n\n      *[center] {\n        flex: none;\n        margin: 0 auto;\n      }\n\n      input[type='checkbox'],\n      input[type='radio'] {\n        margin-top: 3px;\n        zoom: var(--grist-input-zoom);\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n  @property({ type: Object }) record: GristRecord = {}\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex = 0\n  @property({ type: Number }) columnIndex = 0\n  @property({ type: Boolean, attribute: 'editing' }) editing = false\n  @property({ type: Object }) value = {}\n  @property({ type: Boolean }) emphasized = false\n\n  private _editCancelled?: boolean\n  private _onFieldChange: (e: Event) => void = e => {}\n  private _onKeydownInEditingMode: (e: KeyboardEvent) => void = e => {}\n\n  private get isEditing() {\n    return this.hasAttribute('editing')\n  }\n\n  render(): TemplateResult {\n    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer, editor } = column.record\n\n    return html`\n      ${this.isEditing\n        ? editor?.call(this, value, column, record, rowIndex, this)\n        : renderer?.call(this, value, column, record, rowIndex, this)}\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('editing')) {\n      if (this.isEditing) {\n        this._onKeydownInEditingMode = ((e: KeyboardEvent) => {\n          if (e.key === 'Esc' || e.key === 'Escape') {\n            /* 편집 취소 */\n            this._editCancelled = true\n          }\n        }).bind(this)\n\n        this._onFieldChange = ((e: Event) => {\n          this._editCancelled && e.stopPropagation()\n        }).bind(this)\n\n        delete this._editCancelled\n        this.addEventListener('field-change', this._onFieldChange)\n        this.addEventListener('keydown', this._onKeydownInEditingMode)\n      } else {\n        this.removeEventListener('field-change', this._onFieldChange)\n        this.removeEventListener('keydown', this._onKeydownInEditingMode)\n      }\n    }\n\n    if (changes.has('column')) {\n      var align = this.column.record.align || DEFAULT_TEXT_ALIGN\n      if (align != DEFAULT_TEXT_ALIGN) {\n        let justify = 'center'\n        switch (align) {\n          case 'right':\n            justify = 'flex-end'\n            break\n        }\n        this.style.setProperty('--data-grid-field-justify-content', justify)\n        this.style.setProperty('--data-grid-field-text-align', align)\n      }\n    }\n\n    const emphasized =\n      this.column.record.classifier.call(this, this.record, this.rowIndex)?.emphasized || this.emphasized\n\n    if (!!emphasized) {\n      this.setAttribute('emphasized-row', '')\n\n      if (Symbol.iterator in Object(emphasized)) {\n        const [backgroundColor, foregroundColor] = emphasized as string[]\n        backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor)\n        foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor)\n      }\n    } else {\n      this.removeAttribute('emphasized-row')\n    }\n  }\n}\n"]}

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

@@ -1,3 +1,3 @@
 export * from './registry';
-export * from './input-editors';
-export * from './image-input';
+export * from './ox-grist-editor.js';
+export * from './ox-grist-editor-image.js';

package/dist/src/editors/index.js

@@ -1,4 +1,4 @@
 export * from './registry';
-export * from './input-editors';
-export * from './image-input';
+export * from './ox-grist-editor.js';
+export * from './ox-grist-editor-image.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/editors/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA","sourcesContent":["export * from './registry'\n\nexport * from './input-editors'\nexport * from './image-input'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/editors/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA","sourcesContent":["export * from './registry'\n\nexport * from './ox-grist-editor.js'\nexport * from './ox-grist-editor-image.js'\n"]}

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

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

package/dist/src/editors/ox-grist-editor-checkbox.js

@@ -0,0 +1,17 @@
+import { __decorate } from "tslib";
+import { OxGristEditor } from './ox-grist-editor.js';
+import { customElement } from 'lit/decorators.js';
+import { html } from 'lit';
+let OxGristEditorCheckbox = class OxGristEditorCheckbox extends OxGristEditor {
+    formatFromEditor(e) {
+        return e.target.checked;
+    }
+    get editorTemplate() {
+        return html ` <input type="checkbox" .checked=${!!this.value} /> `;
+    }
+};
+OxGristEditorCheckbox = __decorate([
+    customElement('ox-grist-editor-checkbox')
+], OxGristEditorCheckbox);
+export { OxGristEditorCheckbox };
+//# sourceMappingURL=ox-grist-editor-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-editor-checkbox.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-checkbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,aAAa;IACtD,gBAAgB,CAAC,CAAQ;QACvB,OAAQ,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAA;IAC/C,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAA,oCAAoC,CAAC,CAAC,IAAI,CAAC,KAAK,MAAM,CAAA;IACnE,CAAC;CACF,CAAA;AARY,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAQjC;SARY,qBAAqB","sourcesContent":["import { OxGristEditor } from './ox-grist-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-grist-editor-checkbox')\nexport class OxGristEditorCheckbox extends OxGristEditor {\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"]}

package/dist/src/editors/ox-grist-editor-color.d.ts

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

package/dist/src/editors/ox-grist-editor-color.js

@@ -0,0 +1,14 @@
+import { __decorate } from "tslib";
+import { OxGristEditor } from './ox-grist-editor.js';
+import { customElement } from 'lit/decorators.js';
+import { html } from 'lit';
+let OxGristEditorColor = class OxGristEditorColor extends OxGristEditor {
+    get editorTemplate() {
+        return html ` <input type="color" .value=${this.value} /> `;
+    }
+};
+OxGristEditorColor = __decorate([
+    customElement('ox-grist-editor-color')
+], OxGristEditorColor);
+export { OxGristEditorColor };
+//# sourceMappingURL=ox-grist-editor-color.js.map

package/dist/src/editors/ox-grist-editor-color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-editor-color.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-color.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,aAAa;IACnD,IAAI,cAAc;QAChB,OAAO,IAAI,CAAA,+BAA+B,IAAI,CAAC,KAAK,MAAM,CAAA;IAC5D,CAAC;CACF,CAAA;AAJY,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAI9B;SAJY,kBAAkB","sourcesContent":["import { OxGristEditor } from './ox-grist-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-grist-editor-color')\nexport class OxGristEditorColor extends OxGristEditor {\n  get editorTemplate() {\n    return html` <input type=\"color\" .value=${this.value} /> `\n  }\n}\n"]}

package/dist/src/editors/ox-grist-editor-date.d.ts

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

package/dist/src/editors/ox-grist-editor-date.js

@@ -0,0 +1,14 @@
+import { __decorate } from "tslib";
+import { OxGristEditor } from './ox-grist-editor.js';
+import { customElement } from 'lit/decorators.js';
+import { html } from 'lit';
+let OxGristEditorDate = class OxGristEditorDate extends OxGristEditor {
+    get editorTemplate() {
+        return html ` <input type="date" .value=${this.value} /> `;
+    }
+};
+OxGristEditorDate = __decorate([
+    customElement('ox-grist-editor-date')
+], OxGristEditorDate);
+export { OxGristEditorDate };
+//# sourceMappingURL=ox-grist-editor-date.js.map

package/dist/src/editors/ox-grist-editor-date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-editor-date.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-date.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,aAAa;IAClD,IAAI,cAAc;QAChB,OAAO,IAAI,CAAA,8BAA8B,IAAI,CAAC,KAAK,MAAM,CAAA;IAC3D,CAAC;CACF,CAAA;AAJY,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAI7B;SAJY,iBAAiB","sourcesContent":["import { OxGristEditor } from './ox-grist-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-grist-editor-date')\nexport class OxGristEditorDate extends OxGristEditor {\n  get editorTemplate() {\n    return html` <input type=\"date\" .value=${this.value} /> `\n  }\n}\n"]}

package/dist/src/editors/ox-grist-editor-dateTime.d.ts

@@ -0,0 +1,6 @@
+import { OxGristEditor } from './ox-grist-editor.js';
+export declare class OxGristEditorDateTime extends OxGristEditor {
+    formatForEditor(timestamp: any): string;
+    formatFromEditor(e: Event): number;
+    get editorTemplate(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/editors/ox-grist-editor-dateTime.js

@@ -0,0 +1,27 @@
+import { __decorate } from "tslib";
+import { OxGristEditor } from './ox-grist-editor.js';
+import { customElement } from 'lit/decorators.js';
+import { html } from 'lit';
+let OxGristEditorDateTime = class OxGristEditorDateTime extends OxGristEditor {
+    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} /> `;
+    }
+};
+OxGristEditorDateTime = __decorate([
+    customElement('ox-grist-editor-datetime')
+], OxGristEditorDateTime);
+export { OxGristEditorDateTime };
+//# sourceMappingURL=ox-grist-editor-dateTime.js.map

package/dist/src/editors/ox-grist-editor-dateTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-editor-dateTime.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-dateTime.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,aAAa;IACtD,eAAe,CAAC,SAAc;QAC5B,IAAI,CAAC,SAAS,EAAE;YACd,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,CAAA;SACvB;QACD,IAAI,QAAQ,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,CAAA;QAElC,IAAI,QAAQ,GAAG,QAAQ,CAAC,iBAAiB,EAAE,GAAG,KAAK,CAAA,CAAC,wBAAwB;QAE5E,OAAO,IAAI,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;IAClE,CAAC;IAED,gBAAgB,CAAC,CAAQ;QACvB,IAAI,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;QAChD,IAAI,QAAQ,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAA;QAE9B,OAAO,QAAQ,CAAC,OAAO,EAAE,CAAA;IAC3B,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAA,wCAAwC,IAAI,CAAC,KAAK,MAAM,CAAA;IACrE,CAAC;CACF,CAAA;AAtBY,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAsBjC;SAtBY,qBAAqB","sourcesContent":["import { OxGristEditor } from './ox-grist-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-grist-editor-datetime')\nexport class OxGristEditorDateTime extends OxGristEditor {\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"]}

package/dist/src/editors/ox-grist-editor-email.d.ts

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

package/dist/src/editors/ox-grist-editor-email.js

@@ -0,0 +1,14 @@
+import { __decorate } from "tslib";
+import { OxGristEditor } from './ox-grist-editor.js';
+import { customElement } from 'lit/decorators.js';
+import { html } from 'lit';
+let OxGristEditorEmail = class OxGristEditorEmail extends OxGristEditor {
+    get editorTemplate() {
+        return html ` <input type="email" .value=${this.value} /> `;
+    }
+};
+OxGristEditorEmail = __decorate([
+    customElement('ox-grist-editor-email')
+], OxGristEditorEmail);
+export { OxGristEditorEmail };
+//# sourceMappingURL=ox-grist-editor-email.js.map

package/dist/src/editors/ox-grist-editor-email.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-editor-email.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-email.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,aAAa;IACnD,IAAI,cAAc;QAChB,OAAO,IAAI,CAAA,+BAA+B,IAAI,CAAC,KAAK,MAAM,CAAA;IAC5D,CAAC;CACF,CAAA;AAJY,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAI9B;SAJY,kBAAkB","sourcesContent":["import { OxGristEditor } from './ox-grist-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-grist-editor-email')\nexport class OxGristEditorEmail extends OxGristEditor {\n  get editorTemplate() {\n    return html` <input type=\"email\" .value=${this.value} /> `\n  }\n}\n"]}

package/dist/src/editors/{image-input.d.ts → ox-grist-editor-image.d.ts}

@@ -1,6 +1,6 @@
 import '@operato/input/ox-input-image.js';
-import { InputEditor } from './input-editors';
-export declare class ImageInput extends InputEditor {
+import { OxGristEditor } from './ox-grist-editor.js';
+export declare class OxGristEditorImage extends OxGristEditor {
     get editorTemplate(): import("lit-html").TemplateResult<1>;
     _onchange(e: Event): void;
     formatFromEditor(e: Event): string | File;

package/dist/src/editors/{image-input.js → ox-grist-editor-image.js}

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-image.js';
-import { html } from 'lit';
+import { OxGristEditor } from './ox-grist-editor.js';
 import { customElement } from 'lit/decorators.js';
-import { InputEditor } from './input-editors';
-let ImageInput = class ImageInput extends InputEditor {
+import { html } from 'lit';
+let OxGristEditorImage = class OxGristEditorImage extends OxGristEditor {
     get editorTemplate() {
         return html ` <ox-input-image .value=${this.value}></ox-input-image> `;
     }
@@ -24,8 +24,8 @@ let ImageInput = class ImageInput extends InputEditor {
         }
     }
 };
-ImageInput = __decorate([
-    customElement('ox-image-input')
-], ImageInput);
-export { ImageInput };
-//# sourceMappingURL=image-input.js.map
+OxGristEditorImage = __decorate([
+    customElement('ox-grist-editor-image')
+], OxGristEditorImage);
+export { OxGristEditorImage };
+//# sourceMappingURL=ox-grist-editor-image.js.map

package/dist/src/editors/ox-grist-editor-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-editor-image.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-image.ts"],"names":[],"mappings":";AAAA,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,aAAa;IACnD,IAAI,cAAc;QAChB,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,KAAK,qBAAqB,CAAA;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;QAC3C,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,gBAAgB,CAAC,CAAQ;;QACvB,6CAA6C;QAC7C,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,MAAA,KAAK,CAAC,KAAK,0CAAG,CAAC,CAAC,EAAE;YACpB,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;SACtB;aAAM;YACL,OAAO,KAAK,CAAC,KAAK,CAAA;SACnB;IACH,CAAC;CACF,CAAA;AApBY,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAoB9B;SApBY,kBAAkB","sourcesContent":["import '@operato/input/ox-input-image.js'\n\nimport { OxGristEditor } from './ox-grist-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-grist-editor-image')\nexport class OxGristEditorImage extends OxGristEditor {\n  get editorTemplate() {\n    return html` <ox-input-image .value=${this.value}></ox-input-image> `\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"]}

package/dist/src/editors/ox-grist-editor-month.d.ts

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

package/dist/src/editors/ox-grist-editor-month.js

@@ -0,0 +1,14 @@
+import { __decorate } from "tslib";
+import { OxGristEditor } from './ox-grist-editor.js';
+import { customElement } from 'lit/decorators.js';
+import { html } from 'lit';
+let OxGristEditorMonth = class OxGristEditorMonth extends OxGristEditor {
+    get editorTemplate() {
+        return html ` <input type="month" .value=${this.value} /> `;
+    }
+};
+OxGristEditorMonth = __decorate([
+    customElement('ox-grist-editor-month')
+], OxGristEditorMonth);
+export { OxGristEditorMonth };
+//# sourceMappingURL=ox-grist-editor-month.js.map

package/dist/src/editors/ox-grist-editor-month.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-editor-month.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-month.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,aAAa;IACnD,IAAI,cAAc;QAChB,OAAO,IAAI,CAAA,+BAA+B,IAAI,CAAC,KAAK,MAAM,CAAA;IAC5D,CAAC;CACF,CAAA;AAJY,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAI9B;SAJY,kBAAkB","sourcesContent":["import { OxGristEditor } from './ox-grist-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-grist-editor-month')\nexport class OxGristEditorMonth extends OxGristEditor {\n  get editorTemplate() {\n    return html` <input type=\"month\" .value=${this.value} /> `\n  }\n}\n"]}

package/dist/src/editors/ox-grist-editor-number.d.ts

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

package/dist/src/editors/ox-grist-editor-number.js

@@ -0,0 +1,26 @@
+import { __decorate } from "tslib";
+import { OxGristEditor } from './ox-grist-editor.js';
+import { customElement } from 'lit/decorators.js';
+import { html } from 'lit';
+let OxGristEditorNumber = class OxGristEditorNumber extends OxGristEditor {
+    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)} /> `;
+    }
+};
+OxGristEditorNumber = __decorate([
+    customElement('ox-grist-editor-number')
+], OxGristEditorNumber);
+export { OxGristEditorNumber };
+//# sourceMappingURL=ox-grist-editor-number.js.map

package/dist/src/editors/ox-grist-editor-number.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-editor-number.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-number.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,aAAa;IACpD,gBAAgB,CAAC,CAAQ;QACvB,IAAI,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;QAEhD,QAAQ,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YACxB,KAAK,OAAO;gBACV,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;YACjC,KAAK,SAAS;gBACZ,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YAC/B;gBACE,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;SACvB;IACH,CAAC;IAED,IAAI,cAAc;QAChB,IAAI,EAAE,GAAG,GAAG,CAAC,QAAQ,EAAE,GAAG,GAAG,QAAQ,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;QAE1E,OAAO,IAAI,CAAA,gCAAgC,IAAI,CAAC,KAAK,SAAS,MAAM,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,MAAM,CAAA;IACrG,CAAC;CACF,CAAA;AAnBY,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAmB/B;SAnBY,mBAAmB","sourcesContent":["import { OxGristEditor } from './ox-grist-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-grist-editor-number')\nexport class OxGristEditorNumber extends OxGristEditor {\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"]}

package/dist/src/editors/ox-grist-editor-password.d.ts

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

package/dist/src/editors/ox-grist-editor-password.js

@@ -0,0 +1,14 @@
+import { __decorate } from "tslib";
+import { OxGristEditor } from './ox-grist-editor.js';
+import { customElement } from 'lit/decorators.js';
+import { html } from 'lit';
+let OxGristEditorPassword = class OxGristEditorPassword extends OxGristEditor {
+    get editorTemplate() {
+        return html ` <input type="password" .value=${this.value} /> `;
+    }
+};
+OxGristEditorPassword = __decorate([
+    customElement('ox-grist-editor-password')
+], OxGristEditorPassword);
+export { OxGristEditorPassword };
+//# sourceMappingURL=ox-grist-editor-password.js.map

package/dist/src/editors/ox-grist-editor-password.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-editor-password.js","sourceRoot":"","sources":["../../../src/editors/ox-grist-editor-password.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,aAAa;IACtD,IAAI,cAAc;QAChB,OAAO,IAAI,CAAA,kCAAkC,IAAI,CAAC,KAAK,MAAM,CAAA;IAC/D,CAAC;CACF,CAAA;AAJY,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAIjC;SAJY,qBAAqB","sourcesContent":["import { OxGristEditor } from './ox-grist-editor.js'\nimport { customElement } from 'lit/decorators.js'\nimport { html } from 'lit'\n\n@customElement('ox-grist-editor-password')\nexport class OxGristEditorPassword extends OxGristEditor {\n  get editorTemplate() {\n    return html` <input type=\"password\" .value=${this.value} /> `\n  }\n}\n"]}

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

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

package/dist/src/editors/ox-grist-editor-select.js

@@ -0,0 +1,41 @@
+import { __decorate } from "tslib";
+import { OxGristEditor } from './ox-grist-editor.js';
+import { customElement } from 'lit/decorators.js';
+import { html } from 'lit';
+let OxGristEditorSelect = class OxGristEditorSelect extends OxGristEditor {
+    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>
+    `;
+    }
+};
+OxGristEditorSelect = __decorate([
+    customElement('ox-grist-editor-select')
+], OxGristEditorSelect);
+export { OxGristEditorSelect };
+//# sourceMappingURL=ox-grist-editor-select.js.map