@operato/data-grist 1.1.50 → 1.1.52

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.1.52](https://github.com/hatiolab/operato/compare/v1.1.51...v1.1.52) (2022-12-31)
+
+
+### :bug: Bug Fix
+
+* add contact webcomponent ([f0e8cdb](https://github.com/hatiolab/operato/commit/f0e8cdb4425812cab106cee8f4c70122f37637c5))
+* data-grist ox-empty-note and grid select checkbox behavior ([2a7f51e](https://github.com/hatiolab/operato/commit/2a7f51e6b019b77d09e7f793ea8d0c6f824184c1))
+
+
+
+### [1.1.51](https://github.com/hatiolab/operato/compare/v1.1.50...v1.1.51) (2022-12-27)
+
+
+### :bug: Bug Fix
+
+* add toggleHeadroom for ox-grist ([a15b107](https://github.com/hatiolab/operato/commit/a15b1079795e77e77c2c7045a25c8254b52fa7b5))
+
+
+
 ### [1.1.50](https://github.com/hatiolab/operato/compare/v1.1.49...v1.1.50) (2022-12-27)
 
 

package/dist/src/data-card/data-card.d.ts

@@ -1,11 +1,13 @@
 import '@material/mwc-icon';
+import '../empty-note';
 import './record-card';
 import { PropertyValues } from 'lit';
 import { DataManipulator } from '../data-manipulator';
 export declare class DataCard extends DataManipulator {
     static styles: import("lit").CSSResult[];
-    isTop: boolean;
+    empty?: boolean;
     private _records;
+    private isTop;
     private _total;
     private _limit;
     private _page;

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

@@ -1,14 +1,15 @@
 import { __decorate } from "tslib";
 import '@material/mwc-icon';
+import '../empty-note';
 import './record-card';
 import { css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { DataManipulator } from '../data-manipulator';
 let DataCard = class DataCard extends DataManipulator {
     constructor() {
         super(...arguments);
-        this.isTop = false;
         this._records = [];
+        this.isTop = false;
         this._total = 0;
         this._limit = 20;
         this._page = 1;
@@ -44,6 +45,9 @@ let DataCard = class DataCard extends DataManipulator {
     }
     render() {
         var records = this._records || [];
+        if (this.config && this.config.rows.appendable) {
+            records = [...records, { __dirty__: '+' }];
+        }
         return html `
       ${records.map((record, rowIndex) => html `
           <ox-record-card
@@ -55,6 +59,15 @@ let DataCard = class DataCard extends DataManipulator {
             ?dirty=${record['__dirty__']}
           ></ox-record-card>
         `)}
+      ${this.empty
+            ? html `
+            <ox-empty-note
+              icon="list"
+              title="EMPTY LIST"
+              description="There are no records to be shown"
+            ></ox-empty-note>
+          `
+            : html ``}
       ${this.isTop
             ? html ``
             : html ` <mwc-icon id="upward" @click=${(e) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}
@@ -113,6 +126,14 @@ DataCard.styles = [
         width: 100%;
       }
 
+      ox-empty-note {
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+
       @media screen and (max-width: 460px) {
         #setting {
           grid-template-columns: 1fr;
@@ -123,10 +144,13 @@ DataCard.styles = [
 ];
 __decorate([
     property({ type: Boolean })
-], DataCard.prototype, "isTop", void 0);
+], DataCard.prototype, "empty", void 0);
 __decorate([
-    property({ type: Array })
+    state()
 ], DataCard.prototype, "_records", void 0);
+__decorate([
+    state()
+], DataCard.prototype, "isTop", void 0);
 DataCard = __decorate([
     customElement('ox-card')
 ], DataCard);

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

@@ -1 +1 @@
-{"version":3,"file":"data-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './record-card'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-card')\nexport class DataCard extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--data-card-background-color);\n        overflow-y: auto;\n        padding: var(--padding-wide);\n\n        display: grid;\n        grid-template-columns: var(--data-card-template);\n        grid-template-rows: min-content;\n        grid-gap: var(--margin-wide);\n      }\n\n      ox-record-card {\n        height: min-content;\n        align-items: stretch;\n        background-color: var(--data-card-record-card-background-color);\n        border: var(--data-card-record-card-border);\n        border-radius: var(--data-card-record-card-border-radius);\n      }\n      ox-record-card:hover {\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      [selected-row] {\n        background-color: var(--data-card-record-card-selected-border);\n      }\n\n      #upward {\n        --mdc-icon-size: 26px;\n        position: absolute;\n        top: var(--data-card-fab-position-vertical);\n        right: var(--data-card-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-card-fab-color);\n        box-shadow: var(--data-card-fab-shadow);\n        padding: 7px;\n      }\n\n      slot {\n        width: 100%;\n      }\n\n      @media screen and (max-width: 460px) {\n        #setting {\n          grid-template-columns: 1fr;\n          grid-template-rows: 1fr 1fr;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) isTop: boolean = false\n  @property({ type: Array }) private _records: GristRecord[] = []\n\n  private _total: number = 0\n  private _limit: number = 20\n  private _page: number = 1\n\n  firstUpdated(changes: PropertyValues<this>) {\n    this.isTop = true\n\n    /* infinite scrolling */\n    this.addEventListener('scroll', e => {\n      const totalScrollHeight = this.scrollHeight\n      const screenHeight = this.offsetHeight\n      const currentScrollTop = this.scrollTop\n\n      if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n        /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n        var lastPage = Math.ceil(this._total / this._limit)\n\n        if (this._page < lastPage) {\n          this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n        }\n      }\n\n      this.isTop = this.scrollTop == 0\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this._records = []\n      this._page = 1\n    }\n\n    if (changes.has('data')) {\n      this._records = this.data.records\n      this._total = this.data.total || 0\n      this._limit = this.data.limit || 20\n      this._page = this.data.page || 0\n    }\n  }\n\n  render() {\n    var records = this._records || []\n\n    return html`\n      ${records.map(\n        (record, rowIndex) => html`\n          <ox-record-card\n            .config=${this.config}\n            .data=${this.data}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            ?selected-row=${record['__selected__']}\n            ?dirty=${record['__dirty__']}\n          ></ox-record-card>\n        `\n      )}\n      ${this.isTop\n        ? html``\n        : html` <mwc-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}\n    `\n  }\n\n  gotoTop(e: Event) {\n    this.scrollTop = 0\n\n    e.stopPropagation()\n  }\n\n  get pullToRefreshTarget() {\n    return this\n  }\n}\n"]}
+{"version":3,"file":"data-card.js","sourceRoot":"","sources":["../../../src/data-card/data-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport '../empty-note'\nimport './record-card'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { GristRecord } from '../types'\n\n@customElement('ox-card')\nexport class DataCard extends DataManipulator {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--data-card-background-color);\n        overflow-y: auto;\n        padding: var(--padding-wide);\n\n        display: grid;\n        grid-template-columns: var(--data-card-template);\n        grid-template-rows: min-content;\n        grid-gap: var(--margin-wide);\n      }\n\n      ox-record-card {\n        height: min-content;\n        align-items: stretch;\n        background-color: var(--data-card-record-card-background-color);\n        border: var(--data-card-record-card-border);\n        border-radius: var(--data-card-record-card-border-radius);\n      }\n      ox-record-card:hover {\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\n      }\n\n      [selected-row] {\n        background-color: var(--data-card-record-card-selected-border);\n      }\n\n      #upward {\n        --mdc-icon-size: 26px;\n        position: absolute;\n        top: var(--data-card-fab-position-vertical);\n        right: var(--data-card-fab-position-horizontal);\n        background-color: rgba(255, 255, 255, 0.7);\n        border-radius: 20px;\n        color: var(--data-card-fab-color);\n        box-shadow: var(--data-card-fab-shadow);\n        padding: 7px;\n      }\n\n      slot {\n        width: 100%;\n      }\n\n      ox-empty-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      @media screen and (max-width: 460px) {\n        #setting {\n          grid-template-columns: 1fr;\n          grid-template-rows: 1fr 1fr;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) empty?: boolean\n\n  @state() private _records: GristRecord[] = []\n  @state() private isTop: boolean = false\n\n  private _total: number = 0\n  private _limit: number = 20\n  private _page: number = 1\n\n  firstUpdated(changes: PropertyValues<this>) {\n    this.isTop = true\n\n    /* infinite scrolling */\n    this.addEventListener('scroll', e => {\n      const totalScrollHeight = this.scrollHeight\n      const screenHeight = this.offsetHeight\n      const currentScrollTop = this.scrollTop\n\n      if (totalScrollHeight <= screenHeight + currentScrollTop + 1) {\n        /* 마지막 페이지까지 계속 페이지를 증가시킨다. */\n        var lastPage = Math.ceil(this._total / this._limit)\n\n        if (this._page < lastPage) {\n          this.dispatchEvent(new CustomEvent('attach-page', { bubbles: true, composed: true }))\n        }\n      }\n\n      this.isTop = this.scrollTop == 0\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config')) {\n      this._records = []\n      this._page = 1\n    }\n\n    if (changes.has('data')) {\n      this._records = this.data.records\n      this._total = this.data.total || 0\n      this._limit = this.data.limit || 20\n      this._page = this.data.page || 0\n    }\n  }\n\n  render() {\n    var records = this._records || []\n\n    if (this.config && this.config.rows.appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map(\n        (record, rowIndex) => html`\n          <ox-record-card\n            .config=${this.config}\n            .data=${this.data}\n            .record=${record}\n            .rowIndex=${rowIndex}\n            ?selected-row=${record['__selected__']}\n            ?dirty=${record['__dirty__']}\n          ></ox-record-card>\n        `\n      )}\n      ${this.empty\n        ? html`\n            <ox-empty-note\n              icon=\"list\"\n              title=\"EMPTY LIST\"\n              description=\"There are no records to be shown\"\n            ></ox-empty-note>\n          `\n        : html``}\n      ${this.isTop\n        ? html``\n        : html` <mwc-icon id=\"upward\" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</mwc-icon> `}\n    `\n  }\n\n  gotoTop(e: Event) {\n    this.scrollTop = 0\n\n    e.stopPropagation()\n  }\n\n  get pullToRefreshTarget() {\n    return this\n  }\n}\n"]}

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

@@ -117,6 +117,7 @@ let DataGridBody = class DataGridBody extends LitElement {
         `;
         })}
       ${start && end ? html ` <div select-block></div> ` : html ``}
+      <slot></slot>
     `;
     }
     firstUpdated() {

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

@@ -1 +1 @@
-{"version":3,"file":"data-grid-body.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-body.ts"],"names":[],"mappings":"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","sourcesContent":["import './data-grid-field'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport debounce from 'lodash-es/debounce'\n\nimport { TooltipStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\n\nimport { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { RecordViewHandler } from '../record-view/record-view-handler'\nimport { ColumnConfig, GristConfig, GristData, GristRecord } from '../types'\nimport { supportsPassive } from '../utils'\nimport { dataGridBodyStyle } from './data-grid-body-style'\nimport { DataGridField } from './data-grid-field'\nimport { dataGridBodyClickHandler } from './event-handlers/data-grid-body-click-handler'\nimport { dataGridBodyDblclickHandler } from './event-handlers/data-grid-body-dblclick-handler'\nimport { dataGridBodyKeydownHandler } from './event-handlers/data-grid-body-keydown-handler'\n\nconst THRESHOLD = 300\nconst DATA_PADDING = 3\nconst ROW_HEIGHT = 40\nconst GAP_SIZE = 1\n\nfunction calcScrollPos(parent: DataGridBody, child: Element) {\n  /* getBoundingClientRect는 safari에서 스크롤 상태에서 다른 브라우저와는 다른 값을 리턴함 - 사파리는 약간 이상 작동함. */\n  var { top: ct, left: cl, right: cr, bottom: cb } = child.getBoundingClientRect()\n  var { top: pt, left: pl, right: pr, bottom: pb } = parent.getBoundingClientRect()\n  var { scrollLeft, scrollTop } = parent\n  var scrollbarWidth = parent.clientWidth - parent.offsetWidth\n  var scrollbarHeight = parent.clientHeight - parent.offsetHeight\n\n  return {\n    left: cl < pl ? scrollLeft - (pl - cl) : cr > pr ? scrollLeft - (pr - cr) - scrollbarWidth : undefined,\n    top: ct < pt ? scrollTop - (pt - ct) : cb > pb ? scrollTop - (pb - cb) - scrollbarHeight : undefined\n  }\n}\n\nconst ZERO_FOCUS = {\n  row: 0,\n  column: 0\n}\n\n@customElement('ox-grid-body')\nexport class DataGridBody extends LitElement {\n  debounce = debounce((scrollTop: number, clientHeight: number) => {\n    const maxVisibleRows = Math.ceil(clientHeight / (ROW_HEIGHT + GAP_SIZE))\n    const from = Math.max(0, Math.floor(scrollTop / (ROW_HEIGHT + GAP_SIZE)) - maxVisibleRows * DATA_PADDING)\n    const to = Math.min(this.data.records?.length || 0, from + maxVisibleRows * (DATA_PADDING * 2 + 1))\n\n    this.from = from\n    this.to = to\n  }, THRESHOLD)\n\n  static styles = [\n    TooltipStyles,\n    dataGridBodyStyle,\n    css`\n      [select-block] {\n        position: absolute;\n        left: var(--select-box-left);\n        top: var(--select-box-top);\n        width: var(--select-box-width);\n        height: var(--select-box-height);\n        border: var(--grid-record-focused-cell-border);\n        background-image: var(--focused-background-image);\n        pointer-events: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) focused: { row: number; column: number } = ZERO_FOCUS\n  @property({ type: Object }) editTarget: { row: number; column: number } | null = null\n  @property({ type: Number }) from = -1\n  @property({ type: Number }) to = -1\n\n  @state() _selectBlock?: {\n    start: DataGridField\n    end?: DataGridField\n  }\n\n  @query('[select-block]') selectBlock?: HTMLDivElement\n  @query('ox-grid-field[focused]') focusedField?: DataGridField\n\n  private _focusedListener?: (e: KeyboardEvent) => void\n  private _recordView?: any\n  private _recordViewRow?: number\n  private _selectBlockWillBeReset: boolean = true\n\n  resetEdit() {\n    this.editTarget = null\n  }\n\n  handleOnScroll(e: WheelEvent) {\n    const { scrollTop, clientHeight } = e.target as HTMLElement\n    this.debounce(scrollTop, clientHeight)\n  }\n\n  // issue #13\n  // renderOptimisticRow() {\n  //   return\n  // }\n\n  render() {\n    var { row: focusedRow, column: focusedColumn } = this.focused || {}\n    var { row: editingRow, column: editingColumn } = this.editTarget || {}\n\n    var columns = this.columns.filter(column => !column.hidden)\n    var data = this.data\n    var { records } = data\n    var { appendable, classifier } = this.config.rows\n    const { start, end } = this._selectBlock || {}\n\n    /*\n     * 레코드를 추가할 수 있는 경우에는 항상 추가 레코드를 보여준다.\n     * 만약, 이전 방식처럼, 커서를 옮겨야만 새로운 레코드가 보이게 하고 싶다면, 조건부를 다음의 코드로 대체한다.\n     * -- if (focusedRow == records.length)\n     */\n    if (appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map((record, idxRow) => {\n        var attrFocusedRow = idxRow === focusedRow\n        var attrSelected = record['__selected__']\n        var attrOdd = idxRow % 2\n        var dirtyFields = record['__dirtyfields__'] || {}\n        var { emphasized } = classifier.call(null, record, idxRow) || {}\n\n        return html`\n          ${columns.map(\n            (column, idxColumn) => html`\n              <ox-grid-field\n                .data=${data}\n                .rowIndex=${idxRow}\n                .columnIndex=${idxColumn}\n                .column=${column}\n                .record=${record}\n                .emphasized=${emphasized}\n                ?gutter=${column.type == 'gutter'}\n                ?odd=${attrOdd}\n                ?focused-row=${attrFocusedRow}\n                ?selected-row=${attrSelected}\n                ?focused=${idxRow === focusedRow && idxColumn === focusedColumn}\n                ?editing=${idxRow === editingRow && idxColumn === editingColumn}\n                .value=${record[column.name]}\n                ?dirty=${!!dirtyFields[column.name]}\n              ></ox-grid-field>\n            `\n          )}\n          <ox-grid-field\n            .data=${data}\n            .rowIndex=${idxRow}\n            .record=${record}\n            .emphasized=${emphasized}\n            ?odd=${attrOdd}\n            ?focused-row=${attrFocusedRow}\n            ?selected-row=${attrSelected}\n          ></ox-grid-field>\n        `\n      })}\n      ${start && end ? html` <div select-block></div> ` : html``}\n    `\n  }\n\n  firstUpdated() {\n    // TODO issue #13\n    // this.addEventListener('scroll', this.handleOnScroll.bind(this))\n\n    /* focus() 를 받을 수 있도록 함. */\n    this.setAttribute('tabindex', '-1')\n\n    /*\n     * focusout 으로 property를 변경시키는 경우, focusout에 의해 update가 발생하는 경우에는,\n     * 그리드 내부의 컴포넌트가 갱신되는 현상을 초래하게 된다.\n     * 따라서, focusout 핸들러에서 update를 유발하는 코드는 강력하게 금지시킨다.\n     */\n    this.addEventListener('focusout', e => {\n      if (this._focusedListener) {\n        this.removeEventListener('keydown', this._focusedListener)\n        delete this._focusedListener\n      }\n    })\n\n    this.addEventListener('focusin', e => {\n      if (!this._focusedListener) {\n        this._focusedListener = dataGridBodyKeydownHandler.bind(this)\n        this.addEventListener('keydown', this._focusedListener)\n      }\n    })\n\n    this.addEventListener('set-select-block', async e => {\n      e.stopPropagation()\n\n      const { startRow = -1, startColumn = -1, endRow = -1, endColumn = -1 } = ((e as CustomEvent).detail as any) || {}\n\n      const start = this.getFieldByIndex(startRow, startColumn) as DataGridField\n      const end = this.getFieldByIndex(endRow, endColumn) as DataGridField\n\n      this.setSelectBlock(start, end)\n    })\n\n    this.renderRoot.addEventListener('mousemove', (event: Event) => {\n      const e = event as MouseEvent\n      if (e.buttons !== 1) {\n        this._selectBlockWillBeReset = true\n        return\n      }\n\n      const field = e.target as DataGridField\n\n      if (!this._selectBlock || this._selectBlockWillBeReset) {\n        this._selectBlockWillBeReset = false\n        this.setSelectBlock(field)\n\n        // this.dispatchEvent(\n        //   new CustomEvent('focus-change', {\n        //     bubbles: true,\n        //     composed: true,\n        //     detail: undefined\n        //   })\n        // )\n\n        return\n      }\n\n      var { start, end } = this._selectBlock || {}\n\n      if (start !== field && !end) {\n        /* cancel all selected text */\n        window.getSelection()?.removeAllRanges()\n      }\n\n      if (start === field && !end) {\n        return\n      }\n\n      if (start && end !== field) {\n        end = field\n\n        this.setSelectBlock(start, end)\n      }\n    })\n\n    this.renderRoot.addEventListener('mouseup', (event: Event) => {\n      this._selectBlockWillBeReset = true\n    })\n\n    this.renderRoot.addEventListener('click', dataGridBodyClickHandler.bind(this))\n\n    this.renderRoot.addEventListener('dblclick', dataGridBodyDblclickHandler.bind(this))\n\n    this.addEventListener('wheel', this._onWheelEvent.bind(this), supportsPassive ? { passive: true } : false)\n\n    const primaryColor = getComputedStyle(this).getPropertyValue('--primary-color')\n    this.style.setProperty(\n      '--focused-background-image',\n      `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='${primaryColor}' x='0' y='0' width='100%' height='100%' style='opacity:.3'/></svg>\")`\n    )\n\n    this.addEventListener('show-record-view', (e: Event) =>\n      this.popupRecordView((e as CustomEvent).detail as { row: number; record: GristRecord })\n    )\n  }\n\n  getFieldByIndex(rowIndex: number, columnIndex: number) {\n    if (rowIndex < 0) {\n      return\n    }\n\n    var columns = this.columns.filter(column => !column.hidden).length\n\n    return this.renderRoot.children.item(\n      rowIndex * (columns + 1) /* 1 means last dummy column */ + ((columnIndex + columns) % columns)\n    )\n  }\n\n  _onWheelEvent(e: WheelEvent) {\n    if (this.scrollHeight <= this.clientHeight) {\n      var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n      this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40)\n      supportsPassive || e.preventDefault()\n    }\n  }\n\n  startEditTarget(row: number, column: number) {\n    var { editable } = this.columns.filter(column => !column.hidden)[column].record\n\n    if (!editable) {\n      return\n    }\n\n    if (this.editTarget && this.editTarget.row == row && this.editTarget.column == column) {\n      return\n    }\n\n    this.editTarget = {\n      row,\n      column\n    }\n  }\n\n  shouldUpdate(changes: any) {\n    if (!changes.has('editTarget')) {\n      /*\n       * 큰 변화에 대해서는 실제 update가 발생되기 전에 editTarget을 초기화한다.\n       */\n      this.editTarget = null\n    }\n\n    return super.shouldUpdate(changes)\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('focused')) {\n      let element = this.renderRoot?.querySelector('[focused]')\n      if (!element) {\n        return\n      }\n\n      this.setSelectBlock()\n\n      let { top, left } = calcScrollPos(this, element)\n      // TODO this.scroll()을 사용하면, 효과가 좋으나 left 계산에 문제가 있는 것 같음.\n      // this.scroll({\n      //   top,\n      //   left,\n      //   behavior: 'smooth'\n      // })\n      if (top !== undefined) {\n        this.scrollTop = top\n      }\n      if (left !== undefined) {\n        this.scrollLeft = left\n      }\n    }\n\n    if (this._recordView) {\n      this._recordView.record = this.data.records[this._recordViewRow!]\n    }\n  }\n\n  focus() {\n    super.focus()\n\n    if (this.focused === ZERO_FOCUS) {\n      let { records } = this.data\n      let row = records.findIndex(record => record['__selected__'])\n\n      this.focused = { row: row == -1 ? 0 : row, column: 0 }\n    }\n  }\n\n  popupRecordView({ record, row }: { row: number; record: GristRecord }) {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = 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, record, row, this /* cautious */)\n    }\n\n    this._recordViewRow = row\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      record,\n      row,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n        delete this._recordViewRow\n      }\n    )\n  }\n\n  getSelectedBlockValues(): Array<Array<any>> | any | undefined {\n    var { start, end } = this._selectBlock || {}\n\n    if (!(start && end)) {\n      start = this.focusedField\n\n      if (typeof start!.value === 'string' || typeof start!.value === 'number') {\n        const selection = document.getSelection()\n        return selection?.toString() || this.focusedField?.value\n      }\n\n      end = start\n    }\n\n    if (start && end) {\n      const startRowIndex = start.rowIndex < end.rowIndex ? start.rowIndex : end.rowIndex\n      const endRowIndex = start.rowIndex < end.rowIndex ? end.rowIndex : start.rowIndex\n      const startColumnIndex = start.columnIndex < end.columnIndex ? start.columnIndex : end.columnIndex\n      const endColumnIndex = start.columnIndex < end.columnIndex ? end.columnIndex : start.columnIndex\n\n      const columnArray = new Array(endColumnIndex - startColumnIndex + 1).fill(startColumnIndex)\n      const columns = this.columns.filter(column => !column.hidden)\n\n      return new Array(endRowIndex - startRowIndex + 1).fill(startRowIndex).map((start, index) => {\n        const rowIndex = start + index\n        const record = this.data.records[rowIndex]\n\n        return columnArray.map((start, index) => {\n          const columnIndex = start + index\n          const column = columns[columnIndex]\n\n          return record?.[column.name]\n        })\n      })\n    }\n  }\n\n  async copy() {\n    const copied = this.getSelectedBlockValues()\n    await navigator.clipboard.writeText(\n      copied instanceof Array ? JSON.stringify(this.getSelectedBlockValues()) : copied\n    )\n\n    const selectBlock = this.selectBlock\n    if (selectBlock) {\n      selectBlock.setAttribute('data-tooltip', 'copied to clipboard!')\n      selectBlock.style.backgroundColor = 'red'\n      selectBlock.style.opacity = '0.5'\n      await sleep(500)\n      selectBlock.removeAttribute('data-tooltip')\n      selectBlock.style.backgroundColor = ''\n      selectBlock.style.opacity = ''\n    }\n  }\n\n  async paste() {\n    try {\n      const text = await navigator.clipboard.readText()\n      if (!text) {\n        return\n      }\n\n      const { row, column } = this.focused\n      const { records } = this.data\n      const columns = this.columns.filter(column => !column.hidden)\n      var block: Array<Array<any>>\n\n      try {\n        var parsed = JSON.parse(text)\n      } catch (ex) {\n        parsed = text\n      }\n\n      if (!(parsed instanceof Array)) {\n        block = [[parsed]]\n      } else {\n        block = parsed\n      }\n\n      block.forEach((record, rowIndex) => {\n        if (!(record instanceof Array)) {\n          return\n        }\n\n        var targetRecord = records[row + rowIndex] || { __dirty__: '+' }\n        if (row + rowIndex >= records.length) {\n          records.push(targetRecord)\n        }\n\n        record.map((item, columnIndex) => {\n          const targetColumn = columns[column + columnIndex]\n          if (targetColumn && !targetColumn.gutterName && targetColumn.record.editable) {\n            this.dispatchEvent(\n              new CustomEvent('field-change', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  before: targetRecord[targetColumn.name],\n                  after: item,\n                  column: targetColumn,\n                  record: targetRecord,\n                  row: row + rowIndex\n                }\n              })\n            )\n          }\n        })\n      })\n    } catch (e) {\n      console.error(e)\n    }\n  }\n\n  setSelectBlock(start?: DataGridField, end?: DataGridField) {\n    this._selectBlock = start && { start, end }\n\n    if (start && end && start !== end) {\n      const left = start.columnIndex < end.columnIndex ? start : end\n      const right = left === start ? end : start\n      const top = start.rowIndex < end.rowIndex ? start : end\n      const bottom = top === start ? end : start\n\n      const { offsetLeft } = left\n      const { offsetTop } = top\n      const width = right.offsetLeft - offsetLeft + right.offsetWidth\n      const height = bottom.offsetTop - offsetTop + bottom.offsetHeight\n\n      this.style.setProperty('--select-box-left', offsetLeft - 1 + 'px')\n      this.style.setProperty('--select-box-top', offsetTop - 1 + 'px')\n      this.style.setProperty('--select-box-width', width + 'px')\n      this.style.setProperty('--select-box-height', height + 'px')\n\n      this.dispatchEvent(\n        new CustomEvent('focus-change', {\n          bubbles: true,\n          composed: true,\n          detail: undefined\n        })\n      )\n    }\n  }\n}\n"]}
+{"version":3,"file":"data-grid-body.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-body.ts"],"names":[],"mappings":"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","sourcesContent":["import './data-grid-field'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport debounce from 'lodash-es/debounce'\n\nimport { TooltipStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\n\nimport { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config'\nimport { RecordViewHandler } from '../record-view/record-view-handler'\nimport { ColumnConfig, GristConfig, GristData, GristRecord } from '../types'\nimport { supportsPassive } from '../utils'\nimport { dataGridBodyStyle } from './data-grid-body-style'\nimport { DataGridField } from './data-grid-field'\nimport { dataGridBodyClickHandler } from './event-handlers/data-grid-body-click-handler'\nimport { dataGridBodyDblclickHandler } from './event-handlers/data-grid-body-dblclick-handler'\nimport { dataGridBodyKeydownHandler } from './event-handlers/data-grid-body-keydown-handler'\n\nconst THRESHOLD = 300\nconst DATA_PADDING = 3\nconst ROW_HEIGHT = 40\nconst GAP_SIZE = 1\n\nfunction calcScrollPos(parent: DataGridBody, child: Element) {\n  /* getBoundingClientRect는 safari에서 스크롤 상태에서 다른 브라우저와는 다른 값을 리턴함 - 사파리는 약간 이상 작동함. */\n  var { top: ct, left: cl, right: cr, bottom: cb } = child.getBoundingClientRect()\n  var { top: pt, left: pl, right: pr, bottom: pb } = parent.getBoundingClientRect()\n  var { scrollLeft, scrollTop } = parent\n  var scrollbarWidth = parent.clientWidth - parent.offsetWidth\n  var scrollbarHeight = parent.clientHeight - parent.offsetHeight\n\n  return {\n    left: cl < pl ? scrollLeft - (pl - cl) : cr > pr ? scrollLeft - (pr - cr) - scrollbarWidth : undefined,\n    top: ct < pt ? scrollTop - (pt - ct) : cb > pb ? scrollTop - (pb - cb) - scrollbarHeight : undefined\n  }\n}\n\nconst ZERO_FOCUS = {\n  row: 0,\n  column: 0\n}\n\n@customElement('ox-grid-body')\nexport class DataGridBody extends LitElement {\n  debounce = debounce((scrollTop: number, clientHeight: number) => {\n    const maxVisibleRows = Math.ceil(clientHeight / (ROW_HEIGHT + GAP_SIZE))\n    const from = Math.max(0, Math.floor(scrollTop / (ROW_HEIGHT + GAP_SIZE)) - maxVisibleRows * DATA_PADDING)\n    const to = Math.min(this.data.records?.length || 0, from + maxVisibleRows * (DATA_PADDING * 2 + 1))\n\n    this.from = from\n    this.to = to\n  }, THRESHOLD)\n\n  static styles = [\n    TooltipStyles,\n    dataGridBodyStyle,\n    css`\n      [select-block] {\n        position: absolute;\n        left: var(--select-box-left);\n        top: var(--select-box-top);\n        width: var(--select-box-width);\n        height: var(--select-box-height);\n        border: var(--grid-record-focused-cell-border);\n        background-image: var(--focused-background-image);\n        pointer-events: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) focused: { row: number; column: number } = ZERO_FOCUS\n  @property({ type: Object }) editTarget: { row: number; column: number } | null = null\n  @property({ type: Number }) from = -1\n  @property({ type: Number }) to = -1\n\n  @state() _selectBlock?: {\n    start: DataGridField\n    end?: DataGridField\n  }\n\n  @query('[select-block]') selectBlock?: HTMLDivElement\n  @query('ox-grid-field[focused]') focusedField?: DataGridField\n\n  private _focusedListener?: (e: KeyboardEvent) => void\n  private _recordView?: any\n  private _recordViewRow?: number\n  private _selectBlockWillBeReset: boolean = true\n\n  resetEdit() {\n    this.editTarget = null\n  }\n\n  handleOnScroll(e: WheelEvent) {\n    const { scrollTop, clientHeight } = e.target as HTMLElement\n    this.debounce(scrollTop, clientHeight)\n  }\n\n  // issue #13\n  // renderOptimisticRow() {\n  //   return\n  // }\n\n  render() {\n    var { row: focusedRow, column: focusedColumn } = this.focused || {}\n    var { row: editingRow, column: editingColumn } = this.editTarget || {}\n\n    var columns = this.columns.filter(column => !column.hidden)\n    var data = this.data\n    var { records } = data\n    var { appendable, classifier } = this.config.rows\n    const { start, end } = this._selectBlock || {}\n\n    /*\n     * 레코드를 추가할 수 있는 경우에는 항상 추가 레코드를 보여준다.\n     * 만약, 이전 방식처럼, 커서를 옮겨야만 새로운 레코드가 보이게 하고 싶다면, 조건부를 다음의 코드로 대체한다.\n     * -- if (focusedRow == records.length)\n     */\n    if (appendable) {\n      records = [...records, { __dirty__: '+' }]\n    }\n\n    return html`\n      ${records.map((record, idxRow) => {\n        var attrFocusedRow = idxRow === focusedRow\n        var attrSelected = record['__selected__']\n        var attrOdd = idxRow % 2\n        var dirtyFields = record['__dirtyfields__'] || {}\n        var { emphasized } = classifier.call(null, record, idxRow) || {}\n\n        return html`\n          ${columns.map(\n            (column, idxColumn) => html`\n              <ox-grid-field\n                .data=${data}\n                .rowIndex=${idxRow}\n                .columnIndex=${idxColumn}\n                .column=${column}\n                .record=${record}\n                .emphasized=${emphasized}\n                ?gutter=${column.type == 'gutter'}\n                ?odd=${attrOdd}\n                ?focused-row=${attrFocusedRow}\n                ?selected-row=${attrSelected}\n                ?focused=${idxRow === focusedRow && idxColumn === focusedColumn}\n                ?editing=${idxRow === editingRow && idxColumn === editingColumn}\n                .value=${record[column.name]}\n                ?dirty=${!!dirtyFields[column.name]}\n              ></ox-grid-field>\n            `\n          )}\n          <ox-grid-field\n            .data=${data}\n            .rowIndex=${idxRow}\n            .record=${record}\n            .emphasized=${emphasized}\n            ?odd=${attrOdd}\n            ?focused-row=${attrFocusedRow}\n            ?selected-row=${attrSelected}\n          ></ox-grid-field>\n        `\n      })}\n      ${start && end ? html` <div select-block></div> ` : html``}\n      <slot></slot>\n    `\n  }\n\n  firstUpdated() {\n    // TODO issue #13\n    // this.addEventListener('scroll', this.handleOnScroll.bind(this))\n\n    /* focus() 를 받을 수 있도록 함. */\n    this.setAttribute('tabindex', '-1')\n\n    /*\n     * focusout 으로 property를 변경시키는 경우, focusout에 의해 update가 발생하는 경우에는,\n     * 그리드 내부의 컴포넌트가 갱신되는 현상을 초래하게 된다.\n     * 따라서, focusout 핸들러에서 update를 유발하는 코드는 강력하게 금지시킨다.\n     */\n    this.addEventListener('focusout', e => {\n      if (this._focusedListener) {\n        this.removeEventListener('keydown', this._focusedListener)\n        delete this._focusedListener\n      }\n    })\n\n    this.addEventListener('focusin', e => {\n      if (!this._focusedListener) {\n        this._focusedListener = dataGridBodyKeydownHandler.bind(this)\n        this.addEventListener('keydown', this._focusedListener)\n      }\n    })\n\n    this.addEventListener('set-select-block', async e => {\n      e.stopPropagation()\n\n      const { startRow = -1, startColumn = -1, endRow = -1, endColumn = -1 } = ((e as CustomEvent).detail as any) || {}\n\n      const start = this.getFieldByIndex(startRow, startColumn) as DataGridField\n      const end = this.getFieldByIndex(endRow, endColumn) as DataGridField\n\n      this.setSelectBlock(start, end)\n    })\n\n    this.renderRoot.addEventListener('mousemove', (event: Event) => {\n      const e = event as MouseEvent\n      if (e.buttons !== 1) {\n        this._selectBlockWillBeReset = true\n        return\n      }\n\n      const field = e.target as DataGridField\n\n      if (!this._selectBlock || this._selectBlockWillBeReset) {\n        this._selectBlockWillBeReset = false\n        this.setSelectBlock(field)\n\n        // this.dispatchEvent(\n        //   new CustomEvent('focus-change', {\n        //     bubbles: true,\n        //     composed: true,\n        //     detail: undefined\n        //   })\n        // )\n\n        return\n      }\n\n      var { start, end } = this._selectBlock || {}\n\n      if (start !== field && !end) {\n        /* cancel all selected text */\n        window.getSelection()?.removeAllRanges()\n      }\n\n      if (start === field && !end) {\n        return\n      }\n\n      if (start && end !== field) {\n        end = field\n\n        this.setSelectBlock(start, end)\n      }\n    })\n\n    this.renderRoot.addEventListener('mouseup', (event: Event) => {\n      this._selectBlockWillBeReset = true\n    })\n\n    this.renderRoot.addEventListener('click', dataGridBodyClickHandler.bind(this))\n\n    this.renderRoot.addEventListener('dblclick', dataGridBodyDblclickHandler.bind(this))\n\n    this.addEventListener('wheel', this._onWheelEvent.bind(this), supportsPassive ? { passive: true } : false)\n\n    const primaryColor = getComputedStyle(this).getPropertyValue('--primary-color')\n    this.style.setProperty(\n      '--focused-background-image',\n      `url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='${primaryColor}' x='0' y='0' width='100%' height='100%' style='opacity:.3'/></svg>\")`\n    )\n\n    this.addEventListener('show-record-view', (e: Event) =>\n      this.popupRecordView((e as CustomEvent).detail as { row: number; record: GristRecord })\n    )\n  }\n\n  getFieldByIndex(rowIndex: number, columnIndex: number) {\n    if (rowIndex < 0) {\n      return\n    }\n\n    var columns = this.columns.filter(column => !column.hidden).length\n\n    return this.renderRoot.children.item(\n      rowIndex * (columns + 1) /* 1 means last dummy column */ + ((columnIndex + columns) % columns)\n    )\n  }\n\n  _onWheelEvent(e: WheelEvent) {\n    if (this.scrollHeight <= this.clientHeight) {\n      var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n      this.scrollLeft = Math.max(0, this.scrollLeft - delta * 40)\n      supportsPassive || e.preventDefault()\n    }\n  }\n\n  startEditTarget(row: number, column: number) {\n    var { editable } = this.columns.filter(column => !column.hidden)[column].record\n\n    if (!editable) {\n      return\n    }\n\n    if (this.editTarget && this.editTarget.row == row && this.editTarget.column == column) {\n      return\n    }\n\n    this.editTarget = {\n      row,\n      column\n    }\n  }\n\n  shouldUpdate(changes: any) {\n    if (!changes.has('editTarget')) {\n      /*\n       * 큰 변화에 대해서는 실제 update가 발생되기 전에 editTarget을 초기화한다.\n       */\n      this.editTarget = null\n    }\n\n    return super.shouldUpdate(changes)\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('focused')) {\n      let element = this.renderRoot?.querySelector('[focused]')\n      if (!element) {\n        return\n      }\n\n      this.setSelectBlock()\n\n      let { top, left } = calcScrollPos(this, element)\n      // TODO this.scroll()을 사용하면, 효과가 좋으나 left 계산에 문제가 있는 것 같음.\n      // this.scroll({\n      //   top,\n      //   left,\n      //   behavior: 'smooth'\n      // })\n      if (top !== undefined) {\n        this.scrollTop = top\n      }\n      if (left !== undefined) {\n        this.scrollLeft = left\n      }\n    }\n\n    if (this._recordView) {\n      this._recordView.record = this.data.records[this._recordViewRow!]\n    }\n  }\n\n  focus() {\n    super.focus()\n\n    if (this.focused === ZERO_FOCUS) {\n      let { records } = this.data\n      let row = records.findIndex(record => record['__selected__'])\n\n      this.focused = { row: row == -1 ? 0 : row, column: 0 }\n    }\n  }\n\n  popupRecordView({ record, row }: { row: number; record: GristRecord }) {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = 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, record, row, this /* cautious */)\n    }\n\n    this._recordViewRow = row\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      record,\n      row,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n        delete this._recordViewRow\n      }\n    )\n  }\n\n  getSelectedBlockValues(): Array<Array<any>> | any | undefined {\n    var { start, end } = this._selectBlock || {}\n\n    if (!(start && end)) {\n      start = this.focusedField\n\n      if (typeof start!.value === 'string' || typeof start!.value === 'number') {\n        const selection = document.getSelection()\n        return selection?.toString() || this.focusedField?.value\n      }\n\n      end = start\n    }\n\n    if (start && end) {\n      const startRowIndex = start.rowIndex < end.rowIndex ? start.rowIndex : end.rowIndex\n      const endRowIndex = start.rowIndex < end.rowIndex ? end.rowIndex : start.rowIndex\n      const startColumnIndex = start.columnIndex < end.columnIndex ? start.columnIndex : end.columnIndex\n      const endColumnIndex = start.columnIndex < end.columnIndex ? end.columnIndex : start.columnIndex\n\n      const columnArray = new Array(endColumnIndex - startColumnIndex + 1).fill(startColumnIndex)\n      const columns = this.columns.filter(column => !column.hidden)\n\n      return new Array(endRowIndex - startRowIndex + 1).fill(startRowIndex).map((start, index) => {\n        const rowIndex = start + index\n        const record = this.data.records[rowIndex]\n\n        return columnArray.map((start, index) => {\n          const columnIndex = start + index\n          const column = columns[columnIndex]\n\n          return record?.[column.name]\n        })\n      })\n    }\n  }\n\n  async copy() {\n    const copied = this.getSelectedBlockValues()\n    await navigator.clipboard.writeText(\n      copied instanceof Array ? JSON.stringify(this.getSelectedBlockValues()) : copied\n    )\n\n    const selectBlock = this.selectBlock\n    if (selectBlock) {\n      selectBlock.setAttribute('data-tooltip', 'copied to clipboard!')\n      selectBlock.style.backgroundColor = 'red'\n      selectBlock.style.opacity = '0.5'\n      await sleep(500)\n      selectBlock.removeAttribute('data-tooltip')\n      selectBlock.style.backgroundColor = ''\n      selectBlock.style.opacity = ''\n    }\n  }\n\n  async paste() {\n    try {\n      const text = await navigator.clipboard.readText()\n      if (!text) {\n        return\n      }\n\n      const { row, column } = this.focused\n      const { records } = this.data\n      const columns = this.columns.filter(column => !column.hidden)\n      var block: Array<Array<any>>\n\n      try {\n        var parsed = JSON.parse(text)\n      } catch (ex) {\n        parsed = text\n      }\n\n      if (!(parsed instanceof Array)) {\n        block = [[parsed]]\n      } else {\n        block = parsed\n      }\n\n      block.forEach((record, rowIndex) => {\n        if (!(record instanceof Array)) {\n          return\n        }\n\n        var targetRecord = records[row + rowIndex] || { __dirty__: '+' }\n        if (row + rowIndex >= records.length) {\n          records.push(targetRecord)\n        }\n\n        record.map((item, columnIndex) => {\n          const targetColumn = columns[column + columnIndex]\n          if (targetColumn && !targetColumn.gutterName && targetColumn.record.editable) {\n            this.dispatchEvent(\n              new CustomEvent('field-change', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  before: targetRecord[targetColumn.name],\n                  after: item,\n                  column: targetColumn,\n                  record: targetRecord,\n                  row: row + rowIndex\n                }\n              })\n            )\n          }\n        })\n      })\n    } catch (e) {\n      console.error(e)\n    }\n  }\n\n  setSelectBlock(start?: DataGridField, end?: DataGridField) {\n    this._selectBlock = start && { start, end }\n\n    if (start && end && start !== end) {\n      const left = start.columnIndex < end.columnIndex ? start : end\n      const right = left === start ? end : start\n      const top = start.rowIndex < end.rowIndex ? start : end\n      const bottom = top === start ? end : start\n\n      const { offsetLeft } = left\n      const { offsetTop } = top\n      const width = right.offsetLeft - offsetLeft + right.offsetWidth\n      const height = bottom.offsetTop - offsetTop + bottom.offsetHeight\n\n      this.style.setProperty('--select-box-left', offsetLeft - 1 + 'px')\n      this.style.setProperty('--select-box-top', offsetTop - 1 + 'px')\n      this.style.setProperty('--select-box-width', width + 'px')\n      this.style.setProperty('--select-box-height', height + 'px')\n\n      this.dispatchEvent(\n        new CustomEvent('focus-change', {\n          bubbles: true,\n          composed: true,\n          detail: undefined\n        })\n      )\n    }\n  }\n}\n"]}

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

@@ -1,3 +1,4 @@
+import '../empty-note';
 import './data-grid-header';
 import './data-grid-body';
 import './data-grid-footer';
@@ -14,6 +15,7 @@ export declare class DataGrid extends DataManipulator {
         row: number;
         column: number;
     };
+    empty?: boolean;
     body: LitElement;
     header: DataGridHeader;
     footer: LitElement;

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

@@ -1,4 +1,5 @@
 import { __decorate } from "tslib";
+import '../empty-note';
 import './data-grid-header';
 import './data-grid-body';
 import './data-grid-footer';
@@ -129,8 +130,17 @@ let DataGrid = class DataGrid extends DataManipulator {
         }}
       ></ox-grid-header>
 
-      <ox-grid-body .config=${this.config} .columns=${columns} .data=${data} .focused=${this.focused}></ox-grid-body>
-
+      <ox-grid-body .config=${this.config} .columns=${columns} .data=${data} .focused=${this.focused}>
+        ${this.empty
+            ? html `
+              <ox-empty-note
+                icon="list"
+                title="EMPTY LIST"
+                description="There are no records to be shown"
+              ></ox-empty-note>
+            `
+            : html ``}
+      </ox-grid-body>
       ${paginatable ? html ` <ox-grid-footer .data=${data} .pagination=${this.pagination}></ox-grid-footer> ` : html ``}
     `;
     }
@@ -156,6 +166,15 @@ DataGrid.styles = [
 
       ox-grid-body {
         flex: 1;
+        position: relative;
+      }
+
+      ox-empty-note {
+        display: block;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
       }
 
       @media print {
@@ -168,6 +187,9 @@ DataGrid.styles = [
 __decorate([
     property({ type: Object })
 ], DataGrid.prototype, "focused", void 0);
+__decorate([
+    property({ type: Boolean })
+], DataGrid.prototype, "empty", void 0);
 __decorate([
     query('ox-grid-body', true)
 ], DataGrid.prototype, "body", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"data-grid.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid.ts"],"names":[],"mappings":"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","sourcesContent":["import './data-grid-header'\nimport './data-grid-body'\nimport './data-grid-footer'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { ColumnConfig, GristRecord, PaginationConfig } from '../types'\nimport { supportsPassive } from '../utils'\nimport { DataGridHeader } from './data-grid-header'\n\n/**\n * DataGrid\n */\n@customElement('ox-grid')\nexport class DataGrid extends DataManipulator {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        overflow: hidden;\n\n        border-width: var(--grid-container-border-width);\n      }\n\n      ox-grid-body {\n        flex: 1;\n      }\n\n      @media print {\n        :host {\n          zoom: 80%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) focused?: { row: number; column: number }\n\n  @query('ox-grid-body', true) body!: LitElement\n  @query('ox-grid-header', true) header!: DataGridHeader\n  @query('ox-grid-footer', true) footer!: LitElement\n\n  private _widths?: string\n\n  firstUpdated() {\n    /* header and body scroll synchronization */\n    this.header.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.body.scrollLeft = this.header.scrollLeft\n      }\n    })\n\n    this.body.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.header.scrollLeft = this.body.scrollLeft\n      }\n    })\n\n    this.header.addEventListener('wheel', this.onWheelEvent.bind(this))\n    this.footer && this.footer.addEventListener('wheel', this.onWheelEvent.bind(this))\n\n    /* record selection processing */\n    this.addEventListener('select-all-change', e => {\n      if (this.data.records.length == 0) {\n        return\n      }\n\n      var { selected } = (e as CustomEvent).detail\n      var { records } = this.data\n\n      records.forEach(record => (record['__selected__'] = selected))\n\n      this.header.requestUpdate()\n      this.body.requestUpdate()\n    })\n\n    this.addEventListener('focus-change', e => {\n      const { row, column } = (e as CustomEvent).detail || {}\n      if (!this.focused || this.focused.row != row || this.focused.column != column) {\n        this.focused = { row, column }\n        this.focus()\n        this.requestUpdate()\n      }\n    })\n  }\n\n  onWheelEvent(e: WheelEvent) {\n    var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n    this.body.scrollLeft = Math.max(0, this.body.scrollLeft - delta * 30)\n\n    supportsPassive || e.preventDefault()\n  }\n\n  onSelectRecordChanged({\n    selectedRecords,\n    added,\n    removed\n  }: {\n    selectedRecords: GristRecord[]\n    added: GristRecord[]\n    removed: GristRecord[]\n  }): void {\n    super.onSelectRecordChanged({ selectedRecords, added, removed })\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  onRecordChanged(\n    recordData: GristRecord,\n    row: number,\n    column: ColumnConfig | null /* TODO column should be removed */\n  ) {\n    /* record-viewer 등 grid 외에서 변경되는 경우에도 header와 body를 refresh 하도록 한다. */\n    super.onRecordChanged(recordData, row, column)\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config') || changes.has('data')) {\n      /*\n       * 데이타 내용에 따라 동적으로 컬럼의 폭이 달라지는 경우(예를 들면, sequence field)가 있으므로,\n       * data의 변동에 대해서도 다시 계산되어야 한다.\n       */\n      this.calculateWidths(this.config.columns)\n\n      if (this.focused && 'row' in this.focused) {\n        var { row = 0, column = 0 } = this.focused\n        var { records: oldrecords = [] } = changes.get('data') as any\n        var { records: newrecords } = this.data\n\n        var oldrecord = oldrecords[row]\n\n        if (oldrecord && oldrecord !== newrecords[row]) {\n          var newrecord = newrecords.find(\n            record =>\n              /* TODO keyfields를 정의하고, keyfields의 동일성으로 확정해야 한다. */\n              oldrecord === record ||\n              ('id' in oldrecord && record.id == oldrecord.id) ||\n              ('name' in oldrecord && record.name == oldrecord.name)\n          )\n\n          this.focused = {\n            row: newrecord ? newrecords.indexOf(newrecord) : row,\n            column\n          }\n        }\n      }\n    }\n\n    /* grid fetch 후에 grid로 focus를 주어야 하는 지 검토가 필요하다. */\n    // this.focus()\n  }\n\n  calculateWidths(columns: ColumnConfig[]) {\n    /*\n     * 컬럼 모델 마지막에 'auto' cell을 추가하여, 자투리 영역을 꽉 채워서 표시한다.\n     */\n    this._widths = columns\n      .filter(column => !column.hidden)\n      .map(column => {\n        switch (typeof column.width) {\n          case 'number':\n            return column.width + 'px'\n          case 'string':\n            return column.width\n          case 'function':\n            return column.width.call(this, column)\n          default:\n            return 'auto'\n        }\n      })\n      .concat(['auto'])\n      .join(' ')\n\n    this.style.setProperty('--grid-template-columns', this._widths)\n    this.style.setProperty('--grid-template-print-columns', this._widths.replace(/px/gi, 'fr'))\n  }\n\n  render() {\n    var { pagination = {} as PaginationConfig, columns = [] } = this.config\n\n    var paginatable = !pagination.infinite\n    var data = this.data\n\n    return html`\n      <ox-grid-header\n        .columns=${columns}\n        .sorters=${this.sorters}\n        .filters=${this.filters}\n        .data=${data}\n        @column-width-change=${(e: CustomEvent) => {\n          let { idx, width } = e.detail\n          columns[idx].width = width\n          this.calculateWidths(columns)\n        }}\n      ></ox-grid-header>\n\n      <ox-grid-body .config=${this.config} .columns=${columns} .data=${data} .focused=${this.focused}></ox-grid-body>\n\n      ${paginatable ? html` <ox-grid-footer .data=${data} .pagination=${this.pagination}></ox-grid-footer> ` : html``}\n    `\n  }\n\n  focus() {\n    super.focus()\n\n    this.body.focus()\n  }\n\n  get pullToRefreshTarget() {\n    return this.body\n  }\n}\n"]}
+{"version":3,"file":"data-grid.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid.ts"],"names":[],"mappings":"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","sourcesContent":["import '../empty-note'\nimport './data-grid-header'\nimport './data-grid-body'\nimport './data-grid-footer'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { DataManipulator } from '../data-manipulator'\nimport { ColumnConfig, GristRecord, PaginationConfig } from '../types'\nimport { supportsPassive } from '../utils'\nimport { DataGridHeader } from './data-grid-header'\n\n/**\n * DataGrid\n */\n@customElement('ox-grid')\nexport class DataGrid extends DataManipulator {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        overflow: hidden;\n\n        border-width: var(--grid-container-border-width);\n      }\n\n      ox-grid-body {\n        flex: 1;\n        position: relative;\n      }\n\n      ox-empty-note {\n        display: block;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      @media print {\n        :host {\n          zoom: 80%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) focused?: { row: number; column: number }\n  @property({ type: Boolean }) empty?: boolean\n\n  @query('ox-grid-body', true) body!: LitElement\n  @query('ox-grid-header', true) header!: DataGridHeader\n  @query('ox-grid-footer', true) footer!: LitElement\n\n  private _widths?: string\n\n  firstUpdated() {\n    /* header and body scroll synchronization */\n    this.header.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.body.scrollLeft = this.header.scrollLeft\n      }\n    })\n\n    this.body.addEventListener('scroll', e => {\n      if (this.body.scrollLeft !== this.header.scrollLeft) {\n        this.header.scrollLeft = this.body.scrollLeft\n      }\n    })\n\n    this.header.addEventListener('wheel', this.onWheelEvent.bind(this))\n    this.footer && this.footer.addEventListener('wheel', this.onWheelEvent.bind(this))\n\n    /* record selection processing */\n    this.addEventListener('select-all-change', e => {\n      if (this.data.records.length == 0) {\n        return\n      }\n\n      var { selected } = (e as CustomEvent).detail\n      var { records } = this.data\n\n      records.forEach(record => (record['__selected__'] = selected))\n\n      this.header.requestUpdate()\n      this.body.requestUpdate()\n    })\n\n    this.addEventListener('focus-change', e => {\n      const { row, column } = (e as CustomEvent).detail || {}\n      if (!this.focused || this.focused.row != row || this.focused.column != column) {\n        this.focused = { row, column }\n        this.focus()\n        this.requestUpdate()\n      }\n    })\n  }\n\n  onWheelEvent(e: WheelEvent) {\n    var delta = Math.max(-1, Math.min(1, e.deltaY || 0))\n    this.body.scrollLeft = Math.max(0, this.body.scrollLeft - delta * 30)\n\n    supportsPassive || e.preventDefault()\n  }\n\n  onSelectRecordChanged({\n    selectedRecords,\n    added,\n    removed\n  }: {\n    selectedRecords: GristRecord[]\n    added: GristRecord[]\n    removed: GristRecord[]\n  }): void {\n    super.onSelectRecordChanged({ selectedRecords, added, removed })\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  onRecordChanged(\n    recordData: GristRecord,\n    row: number,\n    column: ColumnConfig | null /* TODO column should be removed */\n  ) {\n    /* record-viewer 등 grid 외에서 변경되는 경우에도 header와 body를 refresh 하도록 한다. */\n    super.onRecordChanged(recordData, row, column)\n\n    this.header.requestUpdate()\n    this.body.requestUpdate()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('config') || changes.has('data')) {\n      /*\n       * 데이타 내용에 따라 동적으로 컬럼의 폭이 달라지는 경우(예를 들면, sequence field)가 있으므로,\n       * data의 변동에 대해서도 다시 계산되어야 한다.\n       */\n      this.calculateWidths(this.config.columns)\n\n      if (this.focused && 'row' in this.focused) {\n        var { row = 0, column = 0 } = this.focused\n        var { records: oldrecords = [] } = changes.get('data') as any\n        var { records: newrecords } = this.data\n\n        var oldrecord = oldrecords[row]\n\n        if (oldrecord && oldrecord !== newrecords[row]) {\n          var newrecord = newrecords.find(\n            record =>\n              /* TODO keyfields를 정의하고, keyfields의 동일성으로 확정해야 한다. */\n              oldrecord === record ||\n              ('id' in oldrecord && record.id == oldrecord.id) ||\n              ('name' in oldrecord && record.name == oldrecord.name)\n          )\n\n          this.focused = {\n            row: newrecord ? newrecords.indexOf(newrecord) : row,\n            column\n          }\n        }\n      }\n    }\n\n    /* grid fetch 후에 grid로 focus를 주어야 하는 지 검토가 필요하다. */\n    // this.focus()\n  }\n\n  calculateWidths(columns: ColumnConfig[]) {\n    /*\n     * 컬럼 모델 마지막에 'auto' cell을 추가하여, 자투리 영역을 꽉 채워서 표시한다.\n     */\n    this._widths = columns\n      .filter(column => !column.hidden)\n      .map(column => {\n        switch (typeof column.width) {\n          case 'number':\n            return column.width + 'px'\n          case 'string':\n            return column.width\n          case 'function':\n            return column.width.call(this, column)\n          default:\n            return 'auto'\n        }\n      })\n      .concat(['auto'])\n      .join(' ')\n\n    this.style.setProperty('--grid-template-columns', this._widths)\n    this.style.setProperty('--grid-template-print-columns', this._widths.replace(/px/gi, 'fr'))\n  }\n\n  render() {\n    var { pagination = {} as PaginationConfig, columns = [] } = this.config\n\n    var paginatable = !pagination.infinite\n    var data = this.data\n\n    return html`\n      <ox-grid-header\n        .columns=${columns}\n        .sorters=${this.sorters}\n        .filters=${this.filters}\n        .data=${data}\n        @column-width-change=${(e: CustomEvent) => {\n          let { idx, width } = e.detail\n          columns[idx].width = width\n          this.calculateWidths(columns)\n        }}\n      ></ox-grid-header>\n\n      <ox-grid-body .config=${this.config} .columns=${columns} .data=${data} .focused=${this.focused}>\n        ${this.empty\n          ? html`\n              <ox-empty-note\n                icon=\"list\"\n                title=\"EMPTY LIST\"\n                description=\"There are no records to be shown\"\n              ></ox-empty-note>\n            `\n          : html``}\n      </ox-grid-body>\n      ${paginatable ? html` <ox-grid-footer .data=${data} .pagination=${this.pagination}></ox-grid-footer> ` : html``}\n    `\n  }\n\n  focus() {\n    super.focus()\n\n    this.body.focus()\n  }\n\n  get pullToRefreshTarget() {\n    return this.body\n  }\n}\n"]}

package/dist/src/data-grid/event-handlers/data-grid-body-click-handler.js

@@ -5,7 +5,6 @@
  */
 export function dataGridBodyClickHandler(e) {
     e.stopPropagation();
-    e.preventDefault();
     /* target should be 'ox-grid-field' */
     var target = e.target.closest('ox-grid-field');
     var { column, record, rowIndex, columnIndex } = target || {};

package/dist/src/data-grid/event-handlers/data-grid-body-click-handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid-body-click-handler.js","sourceRoot":"","sources":["../../../../src/data-grid/event-handlers/data-grid-body-click-handler.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,MAAM,UAAU,wBAAwB,CAAqB,CAAQ;IACnE,CAAC,CAAC,eAAe,EAAE,CAAA;IACnB,CAAC,CAAC,cAAc,EAAE,CAAA;IAElB,sCAAsC;IACtC,IAAI,MAAM,GAAI,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,eAAe,CAAkB,CAAA;IAC5E,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,MAAM,IAAI,EAAE,CAAA;IAE5D,IAAI,CAAC,MAAM,EAAE;QACX,mBAAmB;QACnB,OAAM;KACP;IAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;QAC9B,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE;YACN,GAAG,EAAE,QAAQ;YACb,MAAM,EAAE,WAAW;SACpB;KACF,CAAC,CACH,CAAA;IAED,6CAA6C;IAC7C;;MAEE;IAEF,+CAA+C;IAC/C,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE;QAC3C,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAA;KAC5C;SAAM;QACL,OAAO,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAA;QACpC,OAAM;KACP;IACD,8CAA8C;IAE9C,6BAA6B;IAC7B,IAAI,MAAM,EAAE;QACV,IAAI,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAA;QAC/B,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;KAC1E;IAED,2BAA2B;IAC3B,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAA;IACpD,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;AACnF,CAAC","sourcesContent":["/**\n * ox-grid-body 의 click handler\n *\n * - handler의 this 는 ox-grid-body임.\n */\n\nimport { DataGridBody } from '../data-grid-body'\nimport { DataGridField } from '../data-grid-field'\n\nexport function dataGridBodyClickHandler(this: DataGridBody, e: Event): void {\n  e.stopPropagation()\n  e.preventDefault()\n\n  /* target should be 'ox-grid-field' */\n  var target = (e.target as Element).closest('ox-grid-field') as DataGridField\n  var { column, record, rowIndex, columnIndex } = target || {}\n\n  if (!column) {\n    /* 여백 컬럼이 클릭된 경우 */\n    return\n  }\n\n  this.dispatchEvent(\n    new CustomEvent('focus-change', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        row: rowIndex,\n        column: columnIndex\n      }\n    })\n  )\n\n  /* 만약, 클릭 이벤트에 포커스만 바꾸고 싶다면, 아래 코멘트를 제거한다. */\n  /*  \n    this.resetEdit()\n  */\n\n  /* 만약, 클릭 이벤트에 포커스만 바꾸고 싶다면, 아래 부분을 코멘트처리한다. */\n  if (!isNaN(rowIndex) && !isNaN(columnIndex)) {\n    this.startEditTarget(rowIndex, columnIndex)\n  } else {\n    console.error('should not be here.')\n    return\n  }\n  /* 만약, 클릭 이벤트에 포커스만 바꾸고 싶다면, 여기까지 코멘트 처리한다. */\n\n  /* do column click handler */\n  if (column) {\n    var { click } = column.handlers\n    click && click(this.columns, this.data, column, record, rowIndex, target)\n  }\n\n  /* do rows click handler */\n  var { click: rowsClick } = this.config.rows.handlers\n  rowsClick && rowsClick(this.columns, this.data, column, record, rowIndex, target)\n}\n"]}
+{"version":3,"file":"data-grid-body-click-handler.js","sourceRoot":"","sources":["../../../../src/data-grid/event-handlers/data-grid-body-click-handler.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,MAAM,UAAU,wBAAwB,CAAqB,CAAQ;IACnE,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,sCAAsC;IACtC,IAAI,MAAM,GAAI,CAAC,CAAC,MAAkB,CAAC,OAAO,CAAC,eAAe,CAAkB,CAAA;IAC5E,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,MAAM,IAAI,EAAE,CAAA;IAE5D,IAAI,CAAC,MAAM,EAAE;QACX,mBAAmB;QACnB,OAAM;KACP;IAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;QAC9B,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI;QACd,MAAM,EAAE;YACN,GAAG,EAAE,QAAQ;YACb,MAAM,EAAE,WAAW;SACpB;KACF,CAAC,CACH,CAAA;IAED,6CAA6C;IAC7C;;MAEE;IAEF,+CAA+C;IAC/C,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE;QAC3C,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAA;KAC5C;SAAM;QACL,OAAO,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAA;QACpC,OAAM;KACP;IACD,8CAA8C;IAE9C,6BAA6B;IAC7B,IAAI,MAAM,EAAE;QACV,IAAI,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAA;QAC/B,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;KAC1E;IAED,2BAA2B;IAC3B,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAA;IACpD,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;AACnF,CAAC","sourcesContent":["/**\n * ox-grid-body 의 click handler\n *\n * - handler의 this 는 ox-grid-body임.\n */\n\nimport { DataGridBody } from '../data-grid-body'\nimport { DataGridField } from '../data-grid-field'\n\nexport function dataGridBodyClickHandler(this: DataGridBody, e: Event): void {\n  e.stopPropagation()\n\n  /* target should be 'ox-grid-field' */\n  var target = (e.target as Element).closest('ox-grid-field') as DataGridField\n  var { column, record, rowIndex, columnIndex } = target || {}\n\n  if (!column) {\n    /* 여백 컬럼이 클릭된 경우 */\n    return\n  }\n\n  this.dispatchEvent(\n    new CustomEvent('focus-change', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        row: rowIndex,\n        column: columnIndex\n      }\n    })\n  )\n\n  /* 만약, 클릭 이벤트에 포커스만 바꾸고 싶다면, 아래 코멘트를 제거한다. */\n  /*  \n    this.resetEdit()\n  */\n\n  /* 만약, 클릭 이벤트에 포커스만 바꾸고 싶다면, 아래 부분을 코멘트처리한다. */\n  if (!isNaN(rowIndex) && !isNaN(columnIndex)) {\n    this.startEditTarget(rowIndex, columnIndex)\n  } else {\n    console.error('should not be here.')\n    return\n  }\n  /* 만약, 클릭 이벤트에 포커스만 바꾸고 싶다면, 여기까지 코멘트 처리한다. */\n\n  /* do column click handler */\n  if (column) {\n    var { click } = column.handlers\n    click && click(this.columns, this.data, column, record, rowIndex, target)\n  }\n\n  /* do rows click handler */\n  var { click: rowsClick } = this.config.rows.handlers\n  rowsClick && rowsClick(this.columns, this.data, column, record, rowIndex, target)\n}\n"]}

package/dist/src/data-grist.d.ts

@@ -1,7 +1,6 @@
 import './data-grid/data-grid';
 import './data-list/data-list';
 import './data-card/data-card';
-import './empty-note';
 import { LitElement, PropertyValues } from 'lit';
 import { DataCard } from './data-card/data-card';
 import { DataConsumer } from './data-consumer';

package/dist/src/data-grist.js

@@ -2,7 +2,6 @@ import { __decorate } from "tslib";
 import './data-grid/data-grid';
 import './data-list/data-list';
 import './data-card/data-card';
-import './empty-note';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query, queryAsync, state } from 'lit/decorators.js';
 import isEmpty from 'lodash-es/isEmpty';
@@ -109,7 +108,7 @@ let DataGrist = class DataGrist extends LitElement {
     _setHeadroom() {
         var _a;
         (_a = this._headroom) === null || _a === void 0 ? void 0 : _a.destroy();
-        if (this.grist && this.head) {
+        if (this.grist && this.head && this.head.style.display !== 'none') {
             const style = getComputedStyle(this.grist);
             this.orginPaddingTop = style.paddingTop || '0';
             this.originMarginTop = style.marginTop || '0';
@@ -128,19 +127,14 @@ let DataGrist = class DataGrist extends LitElement {
             });
             this._headroom.init();
         }
+        else if (this.orginPaddingTop) {
+            this.grist.style.paddingTop = this.orginPaddingTop;
+            this.grist.style.marginTop = this.originMarginTop;
+        }
     }
     render() {
-        var oops = !this._showSpinner && this._data.records.length == 0;
+        const empty = !this._showSpinner && this._data.records.length == 0;
         return html `
-      ${oops
-            ? html `
-            <ox-empty-note
-              icon="list"
-              title="EMPTY LIST"
-              description="There are no records to be shown"
-            ></ox-empty-note>
-          `
-            : html ``}
       <div id="wrap" @keydown=${(e) => this.onKeydown(e)}>
         ${this.mode == 'GRID'
             ? html `
@@ -151,6 +145,7 @@ let DataGrist = class DataGrist extends LitElement {
                 .sorters=${this.sorters}
                 .filters=${this.filters}
                 .pagination=${this.pagination}
+                ?empty=${empty}
               >
               </ox-grid>
             `
@@ -162,6 +157,7 @@ let DataGrist = class DataGrist extends LitElement {
                 .data=${this._data}
                 .sorters=${this.sorters}
                 .filters=${this.filters}
+                ?empty=${empty}
               >
               </ox-card>
             `
@@ -172,6 +168,7 @@ let DataGrist = class DataGrist extends LitElement {
                 .data=${this._data}
                 .sorters=${this.sorters}
                 .filters=${this.filters}
+                ?empty=${empty}
               >
               </ox-list>
             `}
@@ -434,10 +431,9 @@ let DataGrist = class DataGrist extends LitElement {
         };
     }
     toggleHeadroom() {
-        const headroom = this.renderRoot.querySelector('slot[name="headroom"]');
-        if (headroom) {
-            const display = headroom.style.display;
-            headroom.style.display = display !== 'none' ? 'none' : 'block';
+        if (this.head) {
+            const display = this.head.style.display;
+            this.head.style.display = display !== 'none' ? 'none' : 'block';
             this._setHeadroom();
         }
     }
@@ -593,14 +589,6 @@ DataGrist.styles = [
         flex: 1;
       }
 
-      ox-empty-note {
-        display: block;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-      }
-
       slot[name='headroom'] {
         display: block;