@operato/data-grist 9.0.0-beta.62 → 9.0.0-beta.64

package/dist/src/data-list/event-handlers/record-partial-dblclick-handler.d.ts

@@ -0,0 +1,7 @@
+import { RecordPartial } from '../record-partial.js';
+/**
+ * record-partial 의 dblclick handler
+ *
+ * - handler의 this 는 record-partial임.
+ */
+export declare function recordPartialDblClickHandler(this: RecordPartial, e: MouseEvent): void;

package/dist/src/data-list/event-handlers/record-partial-dblclick-handler.js

@@ -0,0 +1,29 @@
+/**
+ * record-partial 의 dblclick handler
+ *
+ * - handler의 this 는 record-partial임.
+ */
+export function recordPartialDblClickHandler(e) {
+    e.stopPropagation();
+    /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */
+    var target = e.target.closest('ox-list-field, ox-list-gutter');
+    var { column, record, rowIndex } = target || {};
+    if (column && column.type == 'gutter') {
+        /*
+         * Gutter가 클릭된 경우
+         * TODO record-partial의 dblclick handling의 성능을 확인하고,
+         * gutter에 dblclick를 적용할 수 있는 지 확인한 후에 활성화하자.
+         */
+        /* do column click handler */
+        // var { dblclick } = column.handlers
+        // dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target)
+        // return
+    }
+    else {
+        var { dblclick: rowsDblClick } = this.config.rows.handlers;
+        if (rowsDblClick) {
+            rowsDblClick(this.config.columns, this.data, column, record, rowIndex, target);
+        }
+    }
+}
+//# sourceMappingURL=record-partial-dblclick-handler.js.map

package/dist/src/data-list/event-handlers/record-partial-dblclick-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-partial-dblclick-handler.js","sourceRoot":"","sources":["../../../../src/data-list/event-handlers/record-partial-dblclick-handler.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,MAAM,UAAU,4BAA4B,CAAsB,CAAa;IAC7E,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,uEAAuE;IACvE,IAAI,MAAM,GAAI,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,+BAA+B,CAAmC,CAAA;IAC7G,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,IAAI,EAAE,CAAA;IAE/C,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC;QACtC;;;;WAIG;QACH,6BAA6B;QAC7B,qCAAqC;QACrC,kFAAkF;QAClF,SAAS;IACX,CAAC;SAAM,CAAC;QACN,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAA;QAC1D,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;QAChF,CAAC;IACH,CAAC;AACH,CAAC","sourcesContent":["import { DataListField } from '../data-list-field.js'\nimport { DataListGutter } from '../data-list-gutter.js'\nimport { RecordPartial } from '../record-partial.js'\n\n/**\n * record-partial 의 dblclick handler\n *\n * - handler의 this 는 record-partial임.\n */\nexport function recordPartialDblClickHandler(this: RecordPartial, e: MouseEvent): void {\n  e.stopPropagation()\n\n  /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */\n  var target = (e.target as Element).closest('ox-list-field, ox-list-gutter') as DataListField | DataListGutter\n  var { column, record, rowIndex } = target || {}\n\n  if (column && column.type == 'gutter') {\n    /*\n     * Gutter가 클릭된 경우\n     * TODO record-partial의 dblclick handling의 성능을 확인하고,\n     * gutter에 dblclick를 적용할 수 있는 지 확인한 후에 활성화하자.\n     */\n    /* do column click handler */\n    // var { dblclick } = column.handlers\n    // dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target)\n    // return\n  } else {\n    var { dblclick: rowsDblClick } = this.config.rows.handlers\n    if (rowsDblClick) {\n      rowsDblClick(this.config.columns, this.data, column, record, rowIndex, target)\n    }\n  }\n}\n"]}

package/dist/src/data-list/event-handlers/record-partial-long-press-handler.d.ts

@@ -0,0 +1,7 @@
+import { RecordPartial } from '../record-partial.js';
+/**
+ * record-partial 의 long-press handler
+ *
+ * - handler의 this 는 record-partial임.
+ */
+export declare function recordPartialLongPressHandler(this: RecordPartial, e: MouseEvent): void;

package/dist/src/data-list/event-handlers/record-partial-long-press-handler.js

@@ -0,0 +1,29 @@
+/**
+ * record-partial 의 long-press handler
+ *
+ * - handler의 this 는 record-partial임.
+ */
+export function recordPartialLongPressHandler(e) {
+    e.stopPropagation();
+    /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */
+    var target = e.target.closest('ox-list-field, ox-list-gutter');
+    var { column, record, rowIndex } = target || {};
+    if (column && column.type == 'gutter') {
+        /*
+         * Gutter가 클릭된 경우
+         * TODO record-partial의 long-press handling의 성능을 확인하고,
+         * gutter에 long-press를 적용할 수 있는 지 확인한 후에 활성화하자.
+         */
+        /* do column click handler */
+        // var { dblclick } = column.handlers
+        // dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target)
+        // return
+    }
+    else {
+        var { dblclick: rowsDblClick } = this.config.rows.handlers || {};
+        if (rowsDblClick) {
+            rowsDblClick(this.config.columns, this.data, column, record, rowIndex, target);
+        }
+    }
+}
+//# sourceMappingURL=record-partial-long-press-handler.js.map

package/dist/src/data-list/event-handlers/record-partial-long-press-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-partial-long-press-handler.js","sourceRoot":"","sources":["../../../../src/data-list/event-handlers/record-partial-long-press-handler.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,MAAM,UAAU,6BAA6B,CAAsB,CAAa;IAC9E,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,uEAAuE;IACvE,IAAI,MAAM,GAAI,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,+BAA+B,CAAmC,CAAA;IAC7G,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,IAAI,EAAE,CAAA;IAE/C,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC;QACtC;;;;WAIG;QACH,6BAA6B;QAC7B,qCAAqC;QACrC,kFAAkF;QAClF,SAAS;IACX,CAAC;SAAM,CAAC;QACN,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAChE,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;QAChF,CAAC;IACH,CAAC;AACH,CAAC","sourcesContent":["import { DataListField } from '../data-list-field.js'\nimport { DataListGutter } from '../data-list-gutter.js'\nimport { RecordPartial } from '../record-partial.js'\n\n/**\n * record-partial 의 long-press handler\n *\n * - handler의 this 는 record-partial임.\n */\nexport function recordPartialLongPressHandler(this: RecordPartial, e: MouseEvent) {\n  e.stopPropagation()\n\n  /* target should be [content] or 'ox-card-field' or 'ox-card-gutter' */\n  var target = (e.target as Element).closest('ox-list-field, ox-list-gutter') as DataListField | DataListGutter\n  var { column, record, rowIndex } = target || {}\n\n  if (column && column.type == 'gutter') {\n    /*\n     * Gutter가 클릭된 경우\n     * TODO record-partial의 long-press handling의 성능을 확인하고,\n     * gutter에 long-press를 적용할 수 있는 지 확인한 후에 활성화하자.\n     */\n    /* do column click handler */\n    // var { dblclick } = column.handlers\n    // dblclick && dblclick(this.columns, this.data, column, record, rowIndex, target)\n    // return\n  } else {\n    var { dblclick: rowsDblClick } = this.config.rows.handlers || {}\n    if (rowsDblClick) {\n      rowsDblClick(this.config.columns, this.data, column, record, rowIndex, target)\n    }\n  }\n}\n"]}

package/dist/src/data-list/record-partial.d.ts

@@ -0,0 +1,21 @@
+import '@material/web/icon/icon.js';
+import '../record-view/record-view.js';
+import './data-list-gutter.js';
+import './data-list-field.js';
+import { LitElement, PropertyValues } from 'lit';
+import { GristConfig, GristData, GristRecord } from '../types.js';
+export declare class RecordPartial extends LitElement {
+    static styles: import("lit").CSSResult[];
+    config: GristConfig;
+    data: GristData;
+    record: GristRecord;
+    rowIndex: number;
+    selectedRow: boolean;
+    emphasized: any;
+    private _recordView;
+    attributeChangedCallback(name: string, oldval: any, newval: any): void;
+    firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    popupRecordView(): void;
+}

package/dist/src/data-list/record-partial.js

@@ -0,0 +1,252 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '../record-view/record-view.js';
+import './data-list-gutter.js';
+import './data-list-field.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config.js';
+import { RecordViewHandler } from '../record-view/record-view-handler.js';
+import { recordPartialClickHandler } from './event-handlers/record-partial-click-handler.js';
+import { recordPartialDblClickHandler } from './event-handlers/record-partial-dblclick-handler.js';
+// import { recordPartialLongPressHandler } from './event-handlers/record-partial-long-press-handler.js'
+// TODO 로케일 설정에 따라서 포맷이 바뀌도록 해야한다.
+const OPTIONS = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: false
+    // timeZone: 'America/Los_Angeles'
+};
+function getSafeFormatter(locale, options) {
+    try {
+        const safeLocale = locale || 'en-US';
+        return new Intl.DateTimeFormat(safeLocale, options);
+    }
+    catch (e) {
+        return new Intl.DateTimeFormat('en-US', options);
+    }
+}
+const formatter = getSafeFormatter(navigator.language, OPTIONS);
+let RecordPartial = class RecordPartial extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.config = ZERO_CONFIG;
+        this.data = ZERO_DATA;
+        this.record = ZERO_RECORD;
+        this.rowIndex = -1;
+        /*
+         * row-selector를 사용자가 변경할 때, record-partial의 update를 유도하기 위해 selected-row attribute를 property에 추가함.
+         * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)
+         */
+        this.selectedRow = false;
+        this.emphasized = false;
+    }
+    attributeChangedCallback(name, oldval, newval) {
+        super.attributeChangedCallback(name, oldval, newval);
+    }
+    firstUpdated() {
+        /*
+          long-press
+          TODO. performance를 확인한 후에 활성화하자.
+        */
+        // longpressable(this.renderRoot.querySelector('[content]'))
+        // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))
+        this.renderRoot.addEventListener('click', recordPartialClickHandler.bind(this));
+        this.renderRoot.addEventListener('dblclick', recordPartialDblClickHandler.bind(this));
+        this.addEventListener('show-record-view', () => this.popupRecordView());
+    }
+    updated(changes) {
+        if (changes.has('record') && this._recordView) {
+            this._recordView.record = this.record;
+        }
+        const emphasized = this.emphasized;
+        if (!!emphasized) {
+            this.setAttribute('emphasized-row', '');
+            if (Symbol.iterator in Object(emphasized)) {
+                const [backgroundColor, foregroundColor] = emphasized;
+                backgroundColor && this.style.setProperty('--grid-record-emphasized-background-color', backgroundColor);
+                foregroundColor && this.style.setProperty('--grid-record-emphasized-color', foregroundColor);
+            }
+        }
+        else {
+            this.removeAttribute('emphasized-row');
+        }
+    }
+    render() {
+        var record = this.record;
+        var rowIndex = this.rowIndex;
+        var { columns, list } = this.config;
+        var { thumbnail, fields, details } = list || {};
+        var displayColumns = [...fields, ...details].map(field => columns.find(column => column.name == field)).filter(column => column) || [];
+        var gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList);
+        const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined;
+        if (this.hasAttribute('dirty')) {
+            var dirtyIcon;
+            switch (this.record['__dirty__']) {
+                case 'M':
+                    dirtyIcon = 'done';
+                    break;
+                case '+':
+                    dirtyIcon = 'add';
+                    break;
+                case '-':
+                    dirtyIcon = 'remove';
+                    break;
+            }
+        }
+        return html `
+      ${dirtyIcon ? html ` <md-icon dirty>${dirtyIcon}</md-icon> ` : html ``}
+      ${gutters.map(gutter => html `
+          <ox-list-gutter
+            class=${gutter.name === 'detail' ? 'expand' : ''}
+            .rowIndex=${rowIndex}
+            .column=${gutter}
+            .record=${record}
+            .value=${record[gutter.name]}
+          ></ox-list-gutter>
+        `)}
+
+      <div content>
+        ${displayColumns.map((column, idx) => html `
+            <ox-list-field
+              .rowIndex=${rowIndex}
+              .column=${column}
+              .record=${record}
+              .value=${record[(column === null || column === void 0 ? void 0 : column.name) || '']}
+              ?name=${idx == 0}
+              ?desc=${idx == 1}
+            ></ox-list-field>
+          `)}
+      </div>
+      ${thumbnail
+            ? html `<div tail>
+            <ox-list-field
+              thumbnail
+              .rowIndex=${rowIndex}
+              .column=${thumbnailColumn}
+              .record=${record}
+              .value=${record[(thumbnailColumn === null || thumbnailColumn === void 0 ? void 0 : thumbnailColumn.name) || '']}
+            ></ox-list-field>
+          </div>`
+            : html ``}
+    `;
+    }
+    popupRecordView() {
+        var titleField = this.config.list.fields[0] || 'name';
+        var title = this.record[titleField];
+        /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */
+        if (typeof title == 'object') {
+            var column = this.config.columns.find(column => column.name == titleField);
+            title = column === null || column === void 0 ? void 0 : column.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */);
+        }
+        this._recordView = RecordViewHandler(this.config.columns, this.record, this.rowIndex, this, {
+            title
+        }, () => {
+            delete this._recordView;
+        });
+    }
+};
+RecordPartial.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        border-bottom: var(--data-list-item-border-bottom);
+        position: relative;
+        min-height: 42px;
+        padding-left: var(--spacing-medium);
+      }
+
+      :host([dirty])::before {
+        content: '';
+        position: absolute;
+        left: var(--spacing-none);
+        top: var(--spacing-none);
+
+        width: var(--spacing-none);
+        height: var(--spacing-none);
+        border-top: var(--grid-record-dirty-border-top);
+        border-right: var(--grid-record-dirty-border-left);
+      }
+
+      :host[emphasized-row] {
+        background-color: var(--grid-record-emphasized-background-color);
+        color: var(--grid-record-emphasized-color);
+      }
+
+      :host [dirty] {
+        position: absolute;
+        margin: var(--spacing-none);
+        height: 20px;
+        font: var(--grid-record-dirty-icon-font);
+        text-indent: 1px;
+        left: var(--spacing-none);
+        top: var(--spacing-none);
+        color: var(--grid-record-dirty-color, var(--md-sys-color-error));
+      }
+
+      [content] {
+        flex: auto;
+        display: block;
+        zoom: 1;
+      }
+
+      div[tail] {
+        margin: var(--spacing-none);
+        width: 100px;
+        aspect-ratio: 1 / 1;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+
+      div[tail] > ox-list-field {
+        flex: 1;
+      }
+
+      ox-list-field {
+        font: var(--data-list-item-etc-font);
+        color: var(--data-list-item-etc-color, var(--md-sys-color-on-surface));
+      }
+
+      ox-list-field[name] {
+        font: var(--data-list-item-name-font);
+        color: var(--data-list-item-name-color, var(--md-sys-color-secondary));
+      }
+
+      ox-list-field[desc] {
+        font: var(--data-list-item-disc-font);
+        color: var(--data-list-item-disc-color, var(--md-sys-color-on-tertiary-container));
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], RecordPartial.prototype, "config", void 0);
+__decorate([
+    property({ type: Object })
+], RecordPartial.prototype, "data", void 0);
+__decorate([
+    property({ type: Object })
+], RecordPartial.prototype, "record", void 0);
+__decorate([
+    property({ type: Number })
+], RecordPartial.prototype, "rowIndex", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'selected-row' })
+], RecordPartial.prototype, "selectedRow", void 0);
+__decorate([
+    property({ attribute: false })
+], RecordPartial.prototype, "emphasized", void 0);
+RecordPartial = __decorate([
+    customElement('ox-record-partial')
+], RecordPartial);
+export { RecordPartial };
+//# sourceMappingURL=record-partial.js.map

package/dist/src/data-list/record-partial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-partial.js","sourceRoot":"","sources":["../../../src/data-list/record-partial.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../record-view/record-view.js'\nimport './data-list-gutter.js'\nimport './data-list-field.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config.js'\nimport { RecordViewHandler } from '../record-view/record-view-handler.js'\nimport { GristConfig, GristData, GristRecord } from '../types.js'\nimport { recordPartialClickHandler } from './event-handlers/record-partial-click-handler.js'\nimport { recordPartialDblClickHandler } from './event-handlers/record-partial-dblclick-handler.js'\n\n// import { recordPartialLongPressHandler } from './event-handlers/record-partial-long-press-handler.js'\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\nfunction getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions) {\n  try {\n    const safeLocale = locale || 'en-US'\n    return new Intl.DateTimeFormat(safeLocale, options)\n  } catch (e) {\n    return new Intl.DateTimeFormat('en-US', options)\n  }\n}\n\nconst formatter = getSafeFormatter(navigator.language, OPTIONS)\n\n@customElement('ox-record-partial')\nexport class RecordPartial extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        border-bottom: var(--data-list-item-border-bottom);\n        position: relative;\n        min-height: 42px;\n        padding-left: var(--spacing-medium);\n      }\n\n      :host([dirty])::before {\n        content: '';\n        position: absolute;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n\n        width: var(--spacing-none);\n        height: var(--spacing-none);\n        border-top: var(--grid-record-dirty-border-top);\n        border-right: var(--grid-record-dirty-border-left);\n      }\n\n      :host[emphasized-row] {\n        background-color: var(--grid-record-emphasized-background-color);\n        color: var(--grid-record-emphasized-color);\n      }\n\n      :host [dirty] {\n        position: absolute;\n        margin: var(--spacing-none);\n        height: 20px;\n        font: var(--grid-record-dirty-icon-font);\n        text-indent: 1px;\n        left: var(--spacing-none);\n        top: var(--spacing-none);\n        color: var(--grid-record-dirty-color, var(--md-sys-color-error));\n      }\n\n      [content] {\n        flex: auto;\n        display: block;\n        zoom: 1;\n      }\n\n      div[tail] {\n        margin: var(--spacing-none);\n        width: 100px;\n        aspect-ratio: 1 / 1;\n\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n      }\n\n      div[tail] > ox-list-field {\n        flex: 1;\n      }\n\n      ox-list-field {\n        font: var(--data-list-item-etc-font);\n        color: var(--data-list-item-etc-color, var(--md-sys-color-on-surface));\n      }\n\n      ox-list-field[name] {\n        font: var(--data-list-item-name-font);\n        color: var(--data-list-item-name-color, var(--md-sys-color-secondary));\n      }\n\n      ox-list-field[desc] {\n        font: var(--data-list-item-disc-font);\n        color: var(--data-list-item-disc-color, var(--md-sys-color-on-tertiary-container));\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-partial의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n  @property({ attribute: false }) emphasized: any = false\n\n  private _recordView: any\n\n  attributeChangedCallback(name: string, oldval: any, newval: any) {\n    super.attributeChangedCallback(name, oldval, newval)\n  }\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', recordPartialClickHandler.bind(this) as EventListener)\n    this.renderRoot.addEventListener('dblclick', recordPartialDblClickHandler.bind(this) as EventListener)\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    const 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  render() {\n    var record = this.record\n    var rowIndex = this.rowIndex\n    var { columns, list } = this.config\n    var { thumbnail, fields, details } = list || {}\n\n    var displayColumns =\n      [...fields, ...details].map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    var gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n\n    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\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` <md-icon dirty>${dirtyIcon}</md-icon> ` : html``}\n      ${gutters.map(\n        gutter => html`\n          <ox-list-gutter\n            class=${gutter.name === 'detail' ? 'expand' : ''}\n            .rowIndex=${rowIndex}\n            .column=${gutter}\n            .record=${record}\n            .value=${record[gutter.name]}\n          ></ox-list-gutter>\n        `\n      )}\n\n      <div content>\n        ${displayColumns.map(\n          (column, idx) => html`\n            <ox-list-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-list-field>\n          `\n        )}\n      </div>\n      ${thumbnail\n        ? html`<div tail>\n            <ox-list-field\n              thumbnail\n              .rowIndex=${rowIndex}\n              .column=${thumbnailColumn}\n              .record=${record}\n              .value=${record[thumbnailColumn?.name || '']}\n            ></ox-list-field>\n          </div>`\n        : html``}\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-manipulator.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+import { ColumnConfig, FilterValue, GristConfig, GristData, GristRecord, PaginationConfig, SortersConfig } from './types.js';
+export declare class DataManipulator extends LitElement {
+    config: GristConfig;
+    data: GristData;
+    sorters: SortersConfig;
+    filters: FilterValue[];
+    pagination: PaginationConfig;
+    constructor();
+    onFieldChange({ after, before, column, record, row }: {
+        after: any;
+        before: any;
+        column: ColumnConfig;
+        record: GristRecord;
+        row: number;
+    }): Promise<void>;
+    onSelectRecordChanged({ selectedRecords, added, removed }: {
+        selectedRecords: GristRecord[];
+        added: GristRecord[];
+        removed: GristRecord[];
+    }): void;
+    onRecordChanged(recordData: GristRecord, row: number, column: ColumnConfig | null): void;
+    collapseAll(): void;
+    expandAll(): void;
+    collapseNode(record: GristRecord): void;
+    expandNode(record: GristRecord): void;
+    addSiblingNode(record: GristRecord): void;
+    addChildNode(record: GristRecord): void;
+    onCheckInTree(e: CustomEvent): void;
+    /**
+     * Forced internal data to be reflected on the screen
+     * Data changing through a normal method is automatically reflected on the screen, so it is a method that does not need to be used in general.
+     * Therefore, it will be deprecated.
+     * @method
+     */
+    refresh(forceExpandOrCollapse?: boolean): void;
+    private traverseRefresh;
+}