@operato/data-grist 9.0.0-beta.56 → 9.0.0-beta.61

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

@@ -1,288 +0,0 @@
-import { __decorate } from "tslib";
-import '@material/web/icon/icon.js';
-import '../record-view/record-view.js';
-import './data-card-field.js';
-import './data-card-gutter.js';
-import './data-card-gutter-menu.js';
-import { LitElement, css, html } 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 { recordCardClickHandler } from './event-handlers/record-card-click-handler.js';
-import { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-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 RecordCard = class RecordCard extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.config = ZERO_CONFIG;
-        this.data = ZERO_DATA;
-        this.record = ZERO_RECORD;
-        this.rowIndex = -1;
-        /*
-         * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.
-         * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)
-         */
-        this.selectedRow = false;
-        this.emphasized = false;
-        this.clickHandler = recordCardClickHandler.bind(this);
-        this.dblclickHandler = recordCardDblClickHandler.bind(this);
-    }
-    firstUpdated() {
-        /*
-          long-press
-          TODO. performance를 확인한 후에 활성화하자.
-        */
-        // longpressable(this.renderRoot.querySelector('[content]'))
-        // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))
-        this.renderRoot.addEventListener('click', this.clickHandler);
-        this.renderRoot.addEventListener('dblclick', this.dblclickHandler);
-        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() {
-        const record = this.record;
-        const rowIndex = this.rowIndex;
-        const { columns, list } = this.config;
-        const { thumbnail, fields, details } = list || {};
-        const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || [];
-        const detailFields = details.map(field => columns.find(column => column.name == field)).filter(column => column) || [];
-        const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined;
-        const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList);
-        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 ``}
-      ${thumbnailColumn
-            ? html ` <ox-card-field
-            thumbnail
-            .rowIndex=${rowIndex}
-            .column=${thumbnailColumn}
-            .record=${record}
-            .value=${record[(thumbnailColumn === null || thumbnailColumn === void 0 ? void 0 : thumbnailColumn.name) || '']}
-          ></ox-card-field>`
-            : html ``}
-
-      <div content>
-        <div brief>
-          ${briefFields.map((column, idx) => html `
-              <ox-card-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-card-field>
-            `)}
-        </div>
-        ${detailFields.length > 0
-            ? html `
-              <div detail>
-                ${detailFields.map((column, idx) => html `
-                    <ox-card-field
-                      .rowIndex=${rowIndex}
-                      .column=${column}
-                      .record=${record}
-                      .value=${record[(column === null || column === void 0 ? void 0 : column.name) || '']}
-                    ></ox-card-field>
-                  `)}
-              </div>
-            `
-            : html ``}
-      </div>
-
-      <div gutters>
-        ${gutters.map(gutter => {
-            return html `
-            <ox-card-gutter
-              .rowIndex=${rowIndex}
-              .column=${gutter}
-              .record=${record}
-              .value=${record[gutter.name]}
-            ></ox-card-gutter>
-          `;
-        })}
-      </div>
-    `;
-    }
-    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;
-        });
-    }
-};
-RecordCard.styles = [
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-        position: relative;
-        background-color: var(--data-card-record-card-background-color);
-        border-radius: var(--data-card-record-card-border-radius);
-        border: var(--data-card-record-card-border);
-        height: min-content;
-        padding: var(--spacing-small) var(--spacing-none);
-      }
-
-      :host(:hover) {
-        background-color: var(--md-sys-color-surface);
-        border: var(--data-card-record-card-border-hover);
-        box-shadow: var(--data-card-record-card-boxshadow-hover);
-      }
-
-      :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);
-      }
-
-      [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));
-      }
-
-      [thumbnail] {
-        height: var(--data-card-thumbnail-height);
-        border-top-left-radius: var(--data-card-record-card-border-radius);
-        border-top-right-radius: var(--data-card-record-card-border-radius);
-        overflow: hidden;
-      }
-
-      [content] {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-tiny);
-        margin: var(--data-card-item-margin);
-      }
-
-      [brief] {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-tiny);
-        overflow: hidden;
-      }
-
-      [gutters] {
-        display: flex;
-        flex-direction: row;
-        gap: var(--spacing-small);
-        margin: var(--spacing-small) var(--spacing-medium);
-        justify-content: end;
-        align-items: stretch;
-      }
-
-      ox-card-field {
-        font: var(--data-card-item-etc-font);
-        color: var(--data-card-item-etc-color, var(--md-sys-color-on-surface));
-      }
-
-      ox-card-field[name] {
-        font: var(--data-card-item-name-font);
-        color: var(--data-card-item-name-color, var(--md-sys-color-secondary));
-      }
-
-      ox-card-field[desc] {
-        font: var(--data-card-item-disc-font);
-        color: var(--data-card-item-disc-color, var(--md-sys-color-tertiary));
-      }
-    `
-];
-__decorate([
-    property({ type: Object })
-], RecordCard.prototype, "config", void 0);
-__decorate([
-    property({ type: Object })
-], RecordCard.prototype, "data", void 0);
-__decorate([
-    property({ type: Object })
-], RecordCard.prototype, "record", void 0);
-__decorate([
-    property({ type: Number })
-], RecordCard.prototype, "rowIndex", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'selected-row' })
-], RecordCard.prototype, "selectedRow", void 0);
-__decorate([
-    property({ attribute: false })
-], RecordCard.prototype, "emphasized", void 0);
-RecordCard = __decorate([
-    customElement('ox-record-card')
-], RecordCard);
-export { RecordCard };
-//# sourceMappingURL=record-card.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"record-card.js","sourceRoot":"","sources":["../../../src/data-card/record-card.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../record-view/record-view.js'\nimport './data-card-field.js'\nimport './data-card-gutter.js'\nimport './data-card-gutter-menu.js'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { GristConfig, GristData, GristRecord } from '../types.js'\nimport { ZERO_CONFIG, ZERO_DATA, ZERO_RECORD } from '../configure/zero-config.js'\nimport { RecordViewHandler } from '../record-view/record-view-handler.js'\nimport { recordCardClickHandler } from './event-handlers/record-card-click-handler.js'\nimport { recordCardDblClickHandler } from './event-handlers/record-card-dblclick-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-card')\nexport class RecordCard extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        position: relative;\n        background-color: var(--data-card-record-card-background-color);\n        border-radius: var(--data-card-record-card-border-radius);\n        border: var(--data-card-record-card-border);\n        height: min-content;\n        padding: var(--spacing-small) var(--spacing-none);\n      }\n\n      :host(:hover) {\n        background-color: var(--md-sys-color-surface);\n        border: var(--data-card-record-card-border-hover);\n        box-shadow: var(--data-card-record-card-boxshadow-hover);\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      [dirty] {\n        position: absolute;\n        margin: var(--spacing-none);\n        height: 20px;\n\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      [thumbnail] {\n        height: var(--data-card-thumbnail-height);\n        border-top-left-radius: var(--data-card-record-card-border-radius);\n        border-top-right-radius: var(--data-card-record-card-border-radius);\n        overflow: hidden;\n      }\n\n      [content] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        margin: var(--data-card-item-margin);\n      }\n\n      [brief] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny);\n        overflow: hidden;\n      }\n\n      [gutters] {\n        display: flex;\n        flex-direction: row;\n        gap: var(--spacing-small);\n        margin: var(--spacing-small) var(--spacing-medium);\n        justify-content: end;\n        align-items: stretch;\n      }\n\n      ox-card-field {\n        font: var(--data-card-item-etc-font);\n        color: var(--data-card-item-etc-color, var(--md-sys-color-on-surface));\n      }\n\n      ox-card-field[name] {\n        font: var(--data-card-item-name-font);\n        color: var(--data-card-item-name-color, var(--md-sys-color-secondary));\n      }\n\n      ox-card-field[desc] {\n        font: var(--data-card-item-disc-font);\n        color: var(--data-card-item-disc-color, var(--md-sys-color-tertiary));\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n  /*\n   * row-selector를 사용자가 변경할 때, record-card의 update를 유도하기 위해 selected-row attribute를 property에 추가함.\n   * (이를 해주지 않으면, 리스트 refresh 경우에 selected-row checkbox가 클리어되지 않는 현상이 발생함.)\n   */\n  @property({ type: Boolean, attribute: 'selected-row' }) selectedRow: boolean = false\n  @property({ attribute: false }) emphasized: any = false\n\n  private _recordView: any\n  private clickHandler = recordCardClickHandler.bind(this) as EventListener\n  private dblclickHandler = recordCardDblClickHandler.bind(this) as EventListener\n\n  firstUpdated() {\n    /*\n      long-press\n      TODO. performance를 확인한 후에 활성화하자.\n    */\n    // longpressable(this.renderRoot.querySelector('[content]'))\n    // this.renderRoot.addEventListener('long-press', recordPartialLongPressHandler.bind(this))\n    this.renderRoot.addEventListener('click', this.clickHandler)\n    this.renderRoot.addEventListener('dblclick', this.dblclickHandler)\n\n    this.addEventListener('show-record-view', () => this.popupRecordView())\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('record') && this._recordView) {\n      this._recordView.record = this.record\n    }\n\n    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    const record = this.record\n    const rowIndex = this.rowIndex\n    const { columns, list } = this.config\n    const { thumbnail, fields, details } = list || {}\n\n    const briefFields = fields.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n    const detailFields =\n      details.map(field => columns.find(column => column.name == field)).filter(column => column) || []\n\n    const thumbnailColumn = thumbnail ? columns.find(column => column.name == thumbnail) : undefined\n\n    const gutters = (columns || []).filter(column => column.type == 'gutter' && column.forList)\n\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      ${thumbnailColumn\n        ? html` <ox-card-field\n            thumbnail\n            .rowIndex=${rowIndex}\n            .column=${thumbnailColumn}\n            .record=${record}\n            .value=${record[thumbnailColumn?.name || '']}\n          ></ox-card-field>`\n        : html``}\n\n      <div content>\n        <div brief>\n          ${briefFields.map(\n            (column, idx) => html`\n              <ox-card-field\n                .rowIndex=${rowIndex}\n                .column=${column}\n                .record=${record}\n                .value=${record[column?.name || '']}\n                ?name=${idx == 0}\n                ?desc=${idx == 1}\n              ></ox-card-field>\n            `\n          )}\n        </div>\n        ${detailFields.length > 0\n          ? html`\n              <div detail>\n                ${detailFields.map(\n                  (column, idx) => html`\n                    <ox-card-field\n                      .rowIndex=${rowIndex}\n                      .column=${column}\n                      .record=${record}\n                      .value=${record[column?.name || '']}\n                    ></ox-card-field>\n                  `\n                )}\n              </div>\n            `\n          : html``}\n      </div>\n\n      <div gutters>\n        ${gutters.map(gutter => {\n          return html`\n            <ox-card-gutter\n              .rowIndex=${rowIndex}\n              .column=${gutter}\n              .record=${record}\n              .value=${record[gutter.name]}\n            ></ox-card-gutter>\n          `\n        })}\n      </div>\n    `\n  }\n\n  popupRecordView() {\n    var titleField = this.config.list.fields[0] || 'name'\n    var title = this.record[titleField]\n\n    /* field가 오브젝트형인 경우에는 렌더러를 타이틀로 사용한다. */\n    if (typeof title == 'object') {\n      var column = this.config.columns.find(column => column.name == titleField)\n      title = column?.record.renderer(title, column, this.record, this.rowIndex, this /* cautious */)\n    }\n\n    this._recordView = RecordViewHandler(\n      this.config.columns,\n      this.record,\n      this.rowIndex,\n      this,\n      {\n        title\n      },\n      () => {\n        delete this._recordView\n      }\n    )\n  }\n}\n"]}

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

@@ -1,10 +0,0 @@
-import { FetchHandler, GristData } from './types.js';
-export interface DataConsumer extends EventTarget {
-    data: any;
-    _data: GristData;
-    mode: 'GRID' | 'LIST' | 'CARD' | 'REPORT';
-    checkDirties(): void;
-    fetchHandler?: FetchHandler;
-    showSpinner(): void;
-    hideSpinner(): void;
-}

package/dist/src/data-consumer.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=data-consumer.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"data-consumer.js","sourceRoot":"","sources":["../../src/data-consumer.ts"],"names":[],"mappings":"","sourcesContent":["import { FetchHandler, GristData } from './types.js'\n\nexport interface DataConsumer extends EventTarget {\n  data: any\n  _data: GristData\n  mode: 'GRID' | 'LIST' | 'CARD' | 'REPORT'\n  checkDirties(): void\n  fetchHandler?: FetchHandler\n  showSpinner(): void\n  hideSpinner(): void\n}\n"]}

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

@@ -1,16 +0,0 @@
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { ColumnConfig, GristRecord } from '../types.js';
-export declare class DataGridAccumField extends LitElement {
-    static styles: import("lit").CSSResult[];
-    align: string;
-    record: GristRecord;
-    column: ColumnConfig;
-    rowIndex: number;
-    columnIndex: number;
-    editing: boolean;
-    value: {};
-    emphasized: any;
-    fixed?: string;
-    render(): TemplateResult;
-    updated(changes: PropertyValues<this>): void;
-}

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

@@ -1,133 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { ZERO_COLUMN } from '../configure/zero-config.js';
-import { i18next } from '@operato/i18n';
-const DEFAULT_TEXT_ALIGN = 'left';
-let DataGridAccumField = class DataGridAccumField extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.align = DEFAULT_TEXT_ALIGN;
-        this.record = {};
-        this.column = ZERO_COLUMN;
-        this.rowIndex = -1;
-        this.columnIndex = 0;
-        this.editing = false;
-        this.value = {};
-        this.emphasized = false;
-    }
-    render() {
-        if (!this.column || !this.column.accumulator) {
-            return this.columnIndex == 0 ? html `<md-icon>functions</md-icon>` : html `${nothing}`;
-        }
-        var { value, column, record, rowIndex } = this;
-        var { renderer } = column.record;
-        // tag가 true이면 value 앞에 (sum) 같은 태그 생성
-        var { accumulator } = column;
-        let tag = '';
-        if (typeof accumulator === 'object' && typeof accumulator.type === 'string' && (accumulator === null || accumulator === void 0 ? void 0 : accumulator.tag)) {
-            tag = `(${i18next.t(`label.accumulator_${accumulator.type}`)})`;
-        }
-        return html `${tag}&nbsp;${renderer === null || renderer === void 0 ? void 0 : renderer.call(this, value, column, record, rowIndex, this)}`;
-    }
-    updated(changes) {
-        if (changes.has('column')) {
-            var align = this.column.record.align || DEFAULT_TEXT_ALIGN;
-            if (align != DEFAULT_TEXT_ALIGN) {
-                let justify = 'center';
-                switch (align) {
-                    case 'right':
-                        justify = 'flex-end';
-                        break;
-                }
-                this.style.setProperty('--data-grid-field-justify-content', justify);
-                this.style.setProperty('--data-grid-field-text-align', align);
-            }
-        }
-        if (changes.has('fixed')) {
-            if (this.fixed) {
-                this.style.left = this.fixed + 'px';
-            }
-            else {
-                this.style.left = 'unset';
-            }
-        }
-    }
-};
-DataGridAccumField.styles = [
-    css `
-      :host {
-        display: flex;
-
-        align-items: center;
-        justify-content: var(--data-grid-field-justify-content, flex-start);
-        position: relative;
-
-        white-space: nowrap;
-        background-color: var(--md-sys-color-primary-container);
-        border: var(--grid-record-border-bottom);
-        border-width: 1px 0;
-        padding: var(--spacing-small);
-
-        font-size: var(--grid-record-wide-fontsize);
-        color: var(--md-sys-color-primary);
-        font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));
-
-        min-height: 30px;
-        box-sizing: border-box;
-      }
-
-      span,
-      pre {
-        display: block;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-
-      * {
-        margin: 0;
-        text-align: var(--data-grid-field-text-align);
-      }
-
-      *[center] {
-        flex: none;
-        margin: 0 auto;
-      }
-
-      md-icon {
-        font-size: 1.5em;
-      }
-    `
-];
-__decorate([
-    property({ type: String, attribute: true })
-], DataGridAccumField.prototype, "align", void 0);
-__decorate([
-    property({ type: Object })
-], DataGridAccumField.prototype, "record", void 0);
-__decorate([
-    property({ type: Object })
-], DataGridAccumField.prototype, "column", void 0);
-__decorate([
-    property({ type: Number })
-], DataGridAccumField.prototype, "rowIndex", void 0);
-__decorate([
-    property({ type: Number })
-], DataGridAccumField.prototype, "columnIndex", void 0);
-__decorate([
-    property({ type: Boolean })
-], DataGridAccumField.prototype, "editing", void 0);
-__decorate([
-    property({ type: Object })
-], DataGridAccumField.prototype, "value", void 0);
-__decorate([
-    property({ attribute: false })
-], DataGridAccumField.prototype, "emphasized", void 0);
-__decorate([
-    property({ type: String, attribute: true })
-], DataGridAccumField.prototype, "fixed", void 0);
-DataGridAccumField = __decorate([
-    customElement('ox-grid-accum-field')
-], DataGridAccumField);
-export { DataGridAccumField };
-//# sourceMappingURL=data-grid-accum-field.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"data-grid-accum-field.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-accum-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_COLUMN } from '../configure/zero-config.js'\nimport { AccumulatorObject, ColumnConfig, GristRecord } from '../types.js'\nimport { i18next } from '@operato/i18n'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-grid-accum-field')\nexport class DataGridAccumField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n\n        align-items: center;\n        justify-content: var(--data-grid-field-justify-content, flex-start);\n        position: relative;\n\n        white-space: nowrap;\n        background-color: var(--md-sys-color-primary-container);\n        border: var(--grid-record-border-bottom);\n        border-width: 1px 0;\n        padding: var(--spacing-small);\n\n        font-size: var(--grid-record-wide-fontsize);\n        color: var(--md-sys-color-primary);\n        font-weight: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500));\n\n        min-height: 30px;\n        box-sizing: border-box;\n      }\n\n      span,\n      pre {\n        display: block;\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      * {\n        margin: 0;\n        text-align: var(--data-grid-field-text-align);\n      }\n\n      *[center] {\n        flex: none;\n        margin: 0 auto;\n      }\n\n      md-icon {\n        font-size: 1.5em;\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) align = DEFAULT_TEXT_ALIGN\n  @property({ type: Object }) record: GristRecord = {}\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex = -1\n  @property({ type: Number }) columnIndex = 0\n  @property({ type: Boolean }) editing = false\n  @property({ type: Object }) value = {}\n  @property({ attribute: false }) emphasized: any = false\n  @property({ type: String, attribute: true }) fixed?: string\n\n  render(): TemplateResult {\n    if (!this.column || !this.column.accumulator) {\n      return this.columnIndex == 0 ? html`<md-icon>functions</md-icon>` : html`${nothing}`\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer } = column.record\n\n    // tag가 true이면 value 앞에 (sum) 같은 태그 생성\n    var { accumulator } = column\n    let tag = ''\n    if (typeof accumulator === 'object' && typeof accumulator.type === 'string' && accumulator?.tag) {\n      tag = `(${i18next.t(`label.accumulator_${accumulator.type}`)})`\n    }\n\n    return html`${tag}&nbsp;${renderer?.call(this, value, column, record, rowIndex, this)}`\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('column')) {\n      var align = this.column.record.align || DEFAULT_TEXT_ALIGN\n      if (align != DEFAULT_TEXT_ALIGN) {\n        let justify = 'center'\n        switch (align) {\n          case 'right':\n            justify = 'flex-end'\n            break\n        }\n        this.style.setProperty('--data-grid-field-justify-content', justify)\n        this.style.setProperty('--data-grid-field-text-align', align)\n      }\n    }\n\n    if (changes.has('fixed')) {\n      if (this.fixed) {\n        this.style.left = this.fixed + 'px'\n      } else {\n        this.style.left = 'unset'\n      }\n    }\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-export declare const dataGridBodyStyle: import("lit").CSSResult;

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

@@ -1,99 +0,0 @@
-import { css } from 'lit';
-export const dataGridBodyStyle = css `
-  :host {
-    display: grid;
-    grid-template-columns: var(--grid-template-columns);
-    grid-auto-rows: var(--grid-record-height, min-content);
-
-    overflow: auto;
-    outline: none;
-    color: var(--grid-record-color);
-    position: relative;
-    border-bottom: var(--grid-body-bottom-border);
-  }
-
-  ox-grid-field[odd] {
-    background-color: var(--grid-record-odd-background-color);
-  }
-
-  ox-grid-field[disabled] {
-    background-color: var(--grid-record-disabled-background-color, var(--grid-record-background-color));
-    color: var(--grid-record-disabled-color, var(--grid-record-color));
-    opacity: var(--grid-record-disabled-opacity, 1);
-  }
-  ox-grid-field[odd][disabled] {
-    background-color: var(
-      --grid-odd-record-disabled-background-color,
-      var(--grid-record-disabled-background-color, var(--grid-record-odd-background-color))
-    );
-    color: var(--grid-odd-record-disabled-color, var(--grid-record-disabled-color, var(--grid-record-color)));
-    opacity: var(--grid-odd-record-disabled-opacity, var(--grid-record-disabled-opacity, 1));
-  }
-
-  ox-grid-field[selected-row] {
-    background-color: var(--grid-record-selected-background-color);
-    color: var(--grid-record-selected-color);
-  }
-
-  ox-grid-field[focused-row] {
-    box-shadow: var(--grid-record-focused-box-shadow);
-    font-weight: bold;
-    color: var(--grid-record-focused-color);
-    background-image: var(--focused-background-image);
-    background-blend-mode: darken;
-  }
-
-  ox-grid-field[focused] {
-    border: var(--grid-record-focused-cell-border);
-  }
-
-  ox-grid-field[emphasized-row],
-  ox-grid-field[emphasized-row][focused] {
-    background-color: var(--grid-record-emphasized-background-color);
-    color: var(--grid-record-emphasized-color);
-  }
-
-  [editing] {
-    background-color: var(--grid-record-editing-background-color);
-  }
-
-  @media print {
-    :host {
-      grid-template-columns: var(--grid-template-print-columns);
-    }
-    ox-grid-field[focused] {
-      border: none;
-    }
-
-    ox-grid-field[selected-row] {
-      background-color: transparent;
-    }
-
-    ox-grid-field[emphasized-row] {
-      background-color: transparent;
-      color: initial;
-    }
-
-    ox-grid-field[focused-row] {
-      background-color: transparent;
-      color: initial;
-    }
-
-    ox-grid-field[editing] {
-      background-color: transparent;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    ox-grid-field[focused-row] {
-      background-blend-mode: lighten;
-    }
-  }
-
-  @media (prefers-color-scheme: light) {
-    ox-grid-field[focused-row] {
-      background-blend-mode: darken;
-    }
-  }
-`;
-//# sourceMappingURL=data-grid-body-style.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"data-grid-body-style.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-body-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const dataGridBodyStyle = css`\n  :host {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-auto-rows: var(--grid-record-height, min-content);\n\n    overflow: auto;\n    outline: none;\n    color: var(--grid-record-color);\n    position: relative;\n    border-bottom: var(--grid-body-bottom-border);\n  }\n\n  ox-grid-field[odd] {\n    background-color: var(--grid-record-odd-background-color);\n  }\n\n  ox-grid-field[disabled] {\n    background-color: var(--grid-record-disabled-background-color, var(--grid-record-background-color));\n    color: var(--grid-record-disabled-color, var(--grid-record-color));\n    opacity: var(--grid-record-disabled-opacity, 1);\n  }\n  ox-grid-field[odd][disabled] {\n    background-color: var(\n      --grid-odd-record-disabled-background-color,\n      var(--grid-record-disabled-background-color, var(--grid-record-odd-background-color))\n    );\n    color: var(--grid-odd-record-disabled-color, var(--grid-record-disabled-color, var(--grid-record-color)));\n    opacity: var(--grid-odd-record-disabled-opacity, var(--grid-record-disabled-opacity, 1));\n  }\n\n  ox-grid-field[selected-row] {\n    background-color: var(--grid-record-selected-background-color);\n    color: var(--grid-record-selected-color);\n  }\n\n  ox-grid-field[focused-row] {\n    box-shadow: var(--grid-record-focused-box-shadow);\n    font-weight: bold;\n    color: var(--grid-record-focused-color);\n    background-image: var(--focused-background-image);\n    background-blend-mode: darken;\n  }\n\n  ox-grid-field[focused] {\n    border: var(--grid-record-focused-cell-border);\n  }\n\n  ox-grid-field[emphasized-row],\n  ox-grid-field[emphasized-row][focused] {\n    background-color: var(--grid-record-emphasized-background-color);\n    color: var(--grid-record-emphasized-color);\n  }\n\n  [editing] {\n    background-color: var(--grid-record-editing-background-color);\n  }\n\n  @media print {\n    :host {\n      grid-template-columns: var(--grid-template-print-columns);\n    }\n    ox-grid-field[focused] {\n      border: none;\n    }\n\n    ox-grid-field[selected-row] {\n      background-color: transparent;\n    }\n\n    ox-grid-field[emphasized-row] {\n      background-color: transparent;\n      color: initial;\n    }\n\n    ox-grid-field[focused-row] {\n      background-color: transparent;\n      color: initial;\n    }\n\n    ox-grid-field[editing] {\n      background-color: transparent;\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    ox-grid-field[focused-row] {\n      background-blend-mode: lighten;\n    }\n  }\n\n  @media (prefers-color-scheme: light) {\n    ox-grid-field[focused-row] {\n      background-blend-mode: darken;\n    }\n  }\n`\n"]}

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

@@ -1,52 +0,0 @@
-import './data-grid-field.js';
-import './data-grid-accum-field.js';
-import { LitElement, PropertyValues } from 'lit';
-import { ColumnConfig, GristConfig, GristData, GristRecord } from '../types.js';
-import { DataGridField } from './data-grid-field.js';
-export declare class DataGridBody extends LitElement {
-    debounce: import("lodash").DebouncedFunc<(scrollTop: number, clientHeight: number) => void>;
-    static styles: import("lit").CSSResult[];
-    config: GristConfig;
-    columns: ColumnConfig[];
-    data: GristData;
-    focused: {
-        row: number;
-        column: number;
-    };
-    editTarget: {
-        row: number;
-        column: number;
-        valueWith: string | null;
-    } | null;
-    from: number;
-    to: number;
-    fixedLefts: number[];
-    _selectBlock?: {
-        start: DataGridField;
-        end?: DataGridField;
-    };
-    selectBlock?: HTMLDivElement;
-    focusedField?: DataGridField;
-    private _focusedListener?;
-    private _recordView?;
-    private _recordViewRow?;
-    private _draggable?;
-    resetEdit(): void;
-    handleOnScroll(e: WheelEvent): void;
-    render(): import("lit-html").TemplateResult<1>;
-    firstUpdated(): void;
-    getFieldByIndex(rowIndex: number, columnIndex: number, residue?: boolean): DataGridField | undefined;
-    startEditTarget(row: number, column: number, valueWith?: string | null): void;
-    shouldUpdate(changes: any): boolean;
-    updated(changes: PropertyValues<this>): void;
-    focus(): void;
-    popupRecordView({ record, row }: {
-        row: number;
-        record: GristRecord;
-    }): void;
-    getSelectedBlockValues(): Array<Array<any>> | any | undefined;
-    copy(): Promise<void>;
-    paste(): Promise<void>;
-    setSelectBlock(start?: DataGridField, end?: DataGridField): void;
-    buildAccumulatorRecord(): GristRecord;
-}