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

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

@@ -0,0 +1,58 @@
+import { css } from 'lit';
+export const dataReportBodyStyle = css `
+  :host {
+    display: grid;
+    grid-template-columns: var(--report-template-columns);
+    grid-auto-rows: var(--report-record-height, min-content);
+
+    overflow: auto;
+    outline: none;
+  }
+
+  :host > [focused] {
+    border: var(--report-record-focused-border);
+  }
+
+  :host > [focused-row] {
+    background-color: var(--report-record-focused-background-color);
+  }
+
+  :host > [totalized] {
+    background-color: var(--report-totalized-background-color);
+    border-top: var(--report-totalized-border);
+    border-bottom: var(--report-totalized-border);
+    color: var(--report-totalized-color);
+
+    font-weight: 700;
+  }
+
+  :host > [grouped] {
+    background-color: var(--report-grouped-background-color);
+    border-right: var(--report-grouped-border);
+    border-bottom: var(--report-grouped-border);
+    color: var(--report-grouped-color);
+
+    font-weight: 600;
+  }
+
+  @media print {
+    :host {
+      -webkit-print-color-adjust: exact;
+      grid-template-columns: var(--report-template-print-columns);
+    }
+    :host > [focused] {
+      border-width: 0 1px 1px 0;
+      border-right: var(--report-grouped-border);
+      border-bottom: var(--report-grouped-border);
+    }
+
+    :host > [focused-row] {
+      background-color: initial;
+      color: #000;
+    }
+    :host > [grouped] {
+      background-color: var(--report-grouped-background-color);
+    }
+  }
+`;
+//# sourceMappingURL=data-report-body-style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-report-body-style.js","sourceRoot":"","sources":["../../../src/data-report/data-report-body-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDrC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const dataReportBodyStyle = css`\n  :host {\n    display: grid;\n    grid-template-columns: var(--report-template-columns);\n    grid-auto-rows: var(--report-record-height, min-content);\n\n    overflow: auto;\n    outline: none;\n  }\n\n  :host > [focused] {\n    border: var(--report-record-focused-border);\n  }\n\n  :host > [focused-row] {\n    background-color: var(--report-record-focused-background-color);\n  }\n\n  :host > [totalized] {\n    background-color: var(--report-totalized-background-color);\n    border-top: var(--report-totalized-border);\n    border-bottom: var(--report-totalized-border);\n    color: var(--report-totalized-color);\n\n    font-weight: 700;\n  }\n\n  :host > [grouped] {\n    background-color: var(--report-grouped-background-color);\n    border-right: var(--report-grouped-border);\n    border-bottom: var(--report-grouped-border);\n    color: var(--report-grouped-color);\n\n    font-weight: 600;\n  }\n\n  @media print {\n    :host {\n      -webkit-print-color-adjust: exact;\n      grid-template-columns: var(--report-template-print-columns);\n    }\n    :host > [focused] {\n      border-width: 0 1px 1px 0;\n      border-right: var(--report-grouped-border);\n      border-bottom: var(--report-grouped-border);\n    }\n\n    :host > [focused-row] {\n      background-color: initial;\n      color: #000;\n    }\n    :host > [grouped] {\n      background-color: var(--report-grouped-background-color);\n    }\n  }\n`\n"]}

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

@@ -0,0 +1,18 @@
+import './data-report-field.js';
+import { LitElement, PropertyValues } from 'lit';
+import { ColumnConfig, GristConfig, GristData } from '../types.js';
+export declare class DataReportBody extends LitElement {
+    static styles: import("lit").CSSResult[];
+    config: GristConfig;
+    columns: ColumnConfig[];
+    data: GristData;
+    focused?: {
+        row: number;
+        column: number;
+    };
+    private _focusedListener?;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
+    focus(): void;
+}

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

@@ -0,0 +1,181 @@
+import { __decorate } from "tslib";
+import './data-report-field.js';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config.js';
+import { dataReportBodyStyle } from './data-report-body-style.js';
+import { dataReportBodyClickHandler } from './event-handlers/data-report-body-click-handler.js';
+import { dataReportBodyDblclickHandler } from './event-handlers/data-report-body-dblclick-handler.js';
+import { dataReportBodyKeydownHandler } from './event-handlers/data-report-body-keydown-handler.js';
+function calcScrollPos(parent, child) {
+    /* getBoundingClientRect는 safari에서 스크롤 상태에서 다른 브라우저와는 다른 값을 리턴함 - 사파리는 약간 이상 작동함. */
+    var { top: ct, left: cl, right: cr, bottom: cb } = child.getBoundingClientRect();
+    var { top: pt, left: pl, right: pr, bottom: pb } = parent.getBoundingClientRect();
+    var { scrollLeft, scrollTop } = parent;
+    var scrollbarWidth = parent.clientWidth - parent.offsetWidth;
+    var scrollbarHeight = parent.clientHeight - parent.offsetHeight;
+    return {
+        left: cl < pl ? scrollLeft - (pl - cl) : cr > pr ? scrollLeft - (pr - cr) - scrollbarWidth : undefined,
+        top: ct < pt ? scrollTop - (pt - ct) : cb > pb ? scrollTop - (pb - cb) - scrollbarHeight : undefined
+    };
+}
+let DataReportBody = class DataReportBody extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.config = ZERO_CONFIG;
+        this.columns = [];
+        this.data = ZERO_DATA;
+    }
+    render() {
+        var { rows } = this.config;
+        var { groups } = rows || {};
+        var getColumnIndex = (name) => this.columns.filter(column => !column.hidden).findIndex(column => column.name == name);
+        var getColumn = (name) => this.columns.find(column => column.name == name);
+        var { row: focusedRow = 0, column: focusedColumn = 0 } = this.focused || {};
+        var columns = (this.columns || []).filter(column => !column.hidden && groups.map(group => group.column).indexOf(column.name) == -1);
+        var data = this.data;
+        var { records = [] } = data;
+        return html `
+      ${records.map((record, idxRow) => {
+            var attrFocusedRow = idxRow === focusedRow;
+            var totalic = record['*'];
+            var totalicColumn = totalic && (totalic.groupName == '*' ? getColumn(groups[0].column) : getColumn(totalic.groupName));
+            return html `
+          ${!totalic || (totalic && totalic.value)
+                ? html `
+                ${columns.map(column => {
+                    let columnIndex = getColumnIndex(column.name);
+                    return html `
+                    <ox-report-field
+                      .data=${data}
+                      .rowIndex=${idxRow}
+                      .columnIndex=${columnIndex}
+                      .column=${column}
+                      .record=${record}
+                      ?gutter=${column.type == 'gutter'}
+                      ?focused-row=${attrFocusedRow}
+                      ?focused=${attrFocusedRow && columnIndex === focusedColumn}
+                      ?totalized=${totalic}
+                      .value=${record[column.name]}
+                    ></ox-report-field>
+                  `;
+                })}
+                <ox-report-field
+                  .data=${data}
+                  .rowIndex=${idxRow}
+                  .record=${record}
+                  ?focused-row=${attrFocusedRow}
+                  ?totalized=${totalic}
+                ></ox-report-field>
+              `
+                : html ``}
+          ${!totalic
+                ? html ``
+                : html `
+                ${totalic.groupName == '*'
+                    ? html ``
+                    : html `
+                      <ox-report-field
+                        .data=${data}
+                        .rowIndex=${totalic.row - 1}
+                        .columnIndex=${totalic.column - 1}
+                        .column=${totalicColumn}
+                        .record=${record}
+                        ?focused-row=${totalic.row - 1 <= focusedRow && totalic.row - 1 + totalic.rowspan > focusedRow}
+                        ?focused=${totalic.row - 1 === focusedRow && totalic.column - 1 === focusedColumn}
+                        ?grouped=${true}
+                        .value=${record[totalic.groupName]}
+                        .style="grid-area: ${totalic.row} / ${totalic.column} / span ${totalic.rowspan} / span 1;"
+                      ></ox-report-field>
+                    `}
+                ${!totalic.value
+                    ? html ``
+                    : html `
+                      <ox-report-field
+                        .data=${data}
+                        .rowIndex=${idxRow}
+                        .columnIndex=${totalic.column - 1}
+                        .column=${totalic.titleColumn}
+                        .record=${record}
+                        ?focused-row=${attrFocusedRow}
+                        ?focused=${idxRow === focusedRow && totalic.column - 1 === focusedColumn}
+                        ?grouped=${true}
+                        .value=${totalic.value}
+                        .style="grid-area: ${totalic.row +
+                        totalic.rowspan} / ${totalic.column} / span 1 / span ${totalic.colspan};"
+                      ></ox-report-field>
+                    `}
+              `}
+        `;
+        })}
+    `;
+    }
+    firstUpdated() {
+        /* focus() 를 받을 수 있도록 함. */
+        this.setAttribute('tabindex', '-1');
+        /*
+         * focusout 으로 property를 변경시키는 경우, focusout에 의해 update가 발생하는 경우에는,
+         * 그리드 내부의 컴포넌트가 갱신되는 현상을 초래하게 된다.
+         * 따라서, focusout 핸들러에서 update를 유발하는 코드는 강력하게 금지시킨다.
+         */
+        this.addEventListener('focusout', e => {
+            if (this._focusedListener) {
+                window.removeEventListener('keydown', this._focusedListener);
+                delete this._focusedListener;
+            }
+        });
+        this.addEventListener('focusin', e => {
+            if (!this._focusedListener) {
+                this._focusedListener = dataReportBodyKeydownHandler.bind(this);
+                window.addEventListener('keydown', this._focusedListener);
+            }
+        });
+        this.renderRoot.addEventListener('click', dataReportBodyClickHandler.bind(this));
+        this.renderRoot.addEventListener('dblclick', dataReportBodyDblclickHandler.bind(this));
+    }
+    updated(changes) {
+        if (changes.has('focused')) {
+            let element = this.renderRoot.querySelector('[focused]');
+            if (!element) {
+                return;
+            }
+            let { top, left } = calcScrollPos(this, element);
+            // TODO this.scroll()을 사용하면, 효과가 좋으나 left 계산에 문제가 있는 것 같음.
+            // this.scroll({
+            //   top,
+            //   left,
+            //   behavior: 'smooth'
+            // })
+            if (top !== undefined) {
+                this.scrollTop = top;
+            }
+            if (left !== undefined) {
+                this.scrollLeft = left;
+            }
+        }
+    }
+    focus() {
+        super.focus();
+        if (!this.focused || this.focused.row == null) {
+            this.focused = { row: 0, column: 0 };
+        }
+    }
+};
+DataReportBody.styles = [dataReportBodyStyle];
+__decorate([
+    property({ type: Object })
+], DataReportBody.prototype, "config", void 0);
+__decorate([
+    property({ type: Array })
+], DataReportBody.prototype, "columns", void 0);
+__decorate([
+    property({ type: Object })
+], DataReportBody.prototype, "data", void 0);
+__decorate([
+    property({ type: Object })
+], DataReportBody.prototype, "focused", void 0);
+DataReportBody = __decorate([
+    customElement('ox-report-body')
+], DataReportBody);
+export { DataReportBody };
+//# sourceMappingURL=data-report-body.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-report-body.js","sourceRoot":"","sources":["../../../src/data-report/data-report-body.ts"],"names":[],"mappings":"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","sourcesContent":["import './data-report-field.js'\n\nimport { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config.js'\nimport { ColumnConfig, GristConfig, GristData } from '../types.js'\nimport { dataReportBodyStyle } from './data-report-body-style.js'\nimport { dataReportBodyClickHandler } from './event-handlers/data-report-body-click-handler.js'\nimport { dataReportBodyDblclickHandler } from './event-handlers/data-report-body-dblclick-handler.js'\nimport { dataReportBodyKeydownHandler } from './event-handlers/data-report-body-keydown-handler.js'\n\nfunction calcScrollPos(parent: DataReportBody, 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\n@customElement('ox-report-body')\nexport class DataReportBody extends LitElement {\n  static styles = [dataReportBodyStyle]\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 }\n\n  private _focusedListener?: EventListener\n\n  render() {\n    var { rows } = this.config\n    var { groups } = rows || {}\n\n    var getColumnIndex = (name: string) =>\n      this.columns.filter(column => !column.hidden).findIndex(column => column.name == name)\n    var getColumn = (name: string | number) => this.columns.find(column => column.name == name)\n\n    var { row: focusedRow = 0, column: focusedColumn = 0 } = this.focused || {}\n\n    var columns = (this.columns || []).filter(\n      column => !column.hidden && groups.map(group => group.column).indexOf(column.name) == -1\n    )\n    var data = this.data\n    var { records = [] } = data\n\n    return html`\n      ${records.map((record, idxRow) => {\n        var attrFocusedRow = idxRow === focusedRow\n        var totalic = record['*']\n        var totalicColumn =\n          totalic && (totalic.groupName == '*' ? getColumn(groups[0].column) : getColumn(totalic.groupName))\n\n        return html`\n          ${!totalic || (totalic && totalic.value)\n            ? html`\n                ${columns.map(column => {\n                  let columnIndex = getColumnIndex(column.name)\n                  return html`\n                    <ox-report-field\n                      .data=${data}\n                      .rowIndex=${idxRow}\n                      .columnIndex=${columnIndex}\n                      .column=${column}\n                      .record=${record}\n                      ?gutter=${column.type == 'gutter'}\n                      ?focused-row=${attrFocusedRow}\n                      ?focused=${attrFocusedRow && columnIndex === focusedColumn}\n                      ?totalized=${totalic}\n                      .value=${record[column.name]}\n                    ></ox-report-field>\n                  `\n                })}\n                <ox-report-field\n                  .data=${data}\n                  .rowIndex=${idxRow}\n                  .record=${record}\n                  ?focused-row=${attrFocusedRow}\n                  ?totalized=${totalic}\n                ></ox-report-field>\n              `\n            : html``}\n          ${!totalic\n            ? html``\n            : html`\n                ${totalic.groupName == '*'\n                  ? html``\n                  : html`\n                      <ox-report-field\n                        .data=${data}\n                        .rowIndex=${totalic.row - 1}\n                        .columnIndex=${totalic.column - 1}\n                        .column=${totalicColumn}\n                        .record=${record}\n                        ?focused-row=${totalic.row - 1 <= focusedRow && totalic.row - 1 + totalic.rowspan > focusedRow}\n                        ?focused=${totalic.row - 1 === focusedRow && totalic.column - 1 === focusedColumn}\n                        ?grouped=${true}\n                        .value=${record[totalic.groupName]}\n                        .style=\"grid-area: ${totalic.row} / ${totalic.column} / span ${totalic.rowspan} / span 1;\"\n                      ></ox-report-field>\n                    `}\n                ${!totalic.value\n                  ? html``\n                  : html`\n                      <ox-report-field\n                        .data=${data}\n                        .rowIndex=${idxRow}\n                        .columnIndex=${totalic.column - 1}\n                        .column=${totalic.titleColumn}\n                        .record=${record}\n                        ?focused-row=${attrFocusedRow}\n                        ?focused=${idxRow === focusedRow && totalic.column - 1 === focusedColumn}\n                        ?grouped=${true}\n                        .value=${totalic.value}\n                        .style=\"grid-area: ${totalic.row +\n                        totalic.rowspan} / ${totalic.column} / span 1 / span ${totalic.colspan};\"\n                      ></ox-report-field>\n                    `}\n              `}\n        `\n      })}\n    `\n  }\n\n  firstUpdated() {\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        window.removeEventListener('keydown', this._focusedListener)\n        delete this._focusedListener\n      }\n    })\n\n    this.addEventListener('focusin', e => {\n      if (!this._focusedListener) {\n        this._focusedListener = dataReportBodyKeydownHandler.bind(this) as EventListener\n        window.addEventListener('keydown', this._focusedListener)\n      }\n    })\n\n    this.renderRoot.addEventListener('click', dataReportBodyClickHandler.bind(this))\n    this.renderRoot.addEventListener('dblclick', dataReportBodyDblclickHandler.bind(this))\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      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\n  focus() {\n    super.focus()\n\n    if (!this.focused || this.focused.row == null) {\n      this.focused = { row: 0, column: 0 }\n    }\n  }\n}\n"]}

package/dist/src/data-report/data-report-component.d.ts

@@ -0,0 +1,21 @@
+import './data-report-header.js';
+import './data-report-body.js';
+import { LitElement, PropertyValues } from 'lit';
+import { ColumnConfig, GristConfig, GristData } from '../types.js';
+/**
+ * DataReportComponent
+ */
+export declare class DataReportComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    config: GristConfig;
+    data: GristData;
+    private _widths;
+    body: HTMLElement;
+    header: HTMLElement;
+    firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
+    calculateWidths(columns: ColumnConfig[]): void;
+    render(): import("lit-html").TemplateResult<1>;
+    focus(): void;
+    get pullToRefreshTarget(): HTMLElement;
+}

package/dist/src/data-report/data-report-component.js

@@ -0,0 +1,138 @@
+import { __decorate } from "tslib";
+import './data-report-header.js';
+import './data-report-body.js';
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config.js';
+import { ScrollbarStyles } from '@operato/styles';
+/**
+ * DataReportComponent
+ */
+let DataReportComponent = class DataReportComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.config = ZERO_CONFIG;
+        this.data = ZERO_DATA;
+        this._widths = '';
+    }
+    firstUpdated() {
+        var _a, _b;
+        /* header and body scroll synchronization */
+        (_a = this.header) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', (e) => {
+            const body = this.body;
+            const header = this.header;
+            if (body && header) {
+                if (body.scrollLeft !== header.scrollLeft) {
+                    body.scrollLeft = header.scrollLeft;
+                }
+            }
+        });
+        (_b = this.body) === null || _b === void 0 ? void 0 : _b.addEventListener('scroll', e => {
+            const body = this.body;
+            const header = this.header;
+            if (body && header) {
+                if (body.scrollLeft !== header.scrollLeft) {
+                    header.scrollLeft = body.scrollLeft;
+                }
+            }
+        });
+    }
+    updated(changes) {
+        if (changes.has('config') || changes.has('data')) {
+            /*
+             * 데이타 내용에 따라 동적으로 컬럼의 폭이 달라지는 경우(예를 들면, sequence field)가 있으므로,
+             * data의 변동에 대해서도 다시 계산되어야 한다.
+             */
+            this.calculateWidths(this.config && this.config.columns);
+        }
+    }
+    calculateWidths(columns) {
+        /*
+         * 컬럼 모델 마지막에 'auto' cell을 추가하여, 자투리 영역을 꽉 채워서 표시한다.
+         */
+        this._widths = columns
+            .filter(column => !column.hidden)
+            .map(column => {
+            switch (typeof column.width) {
+                case 'number':
+                    return column.width + 'px';
+                case 'string':
+                    return column.width;
+                case 'function':
+                    return column.width.call(this, column);
+                default:
+                    return 'auto';
+            }
+        })
+            .concat(['auto'])
+            .join(' ');
+        this.style.setProperty('--report-template-columns', this._widths);
+        this.style.setProperty('--report-template-print-columns', this._widths.replace(/px/gi, 'fr'));
+    }
+    render() {
+        var { columns } = this.config;
+        var data = this.data;
+        return html `
+      <ox-report-header
+        .config=${this.config}
+        .columns=${columns}
+        .data=${data}
+        @column-width-change=${(e) => {
+            let { idx, width } = e.detail;
+            columns[idx].width = width;
+            this.calculateWidths(columns);
+        }}
+      ></ox-report-header>
+
+      <ox-report-body .config=${this.config} .columns=${columns} .data=${data}></ox-report-body>
+    `;
+    }
+    focus() {
+        super.focus();
+        this.body.focus();
+    }
+    get pullToRefreshTarget() {
+        return this.body;
+    }
+};
+DataReportComponent.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+
+        border: 1px solid var(--report-header-border-color);
+        border-radius: var(--report-component-border-radius);
+      }
+
+      ox-report-body {
+        flex: 1;
+      }
+
+      @media print {
+        :host {
+          zoom: 80%;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], DataReportComponent.prototype, "config", void 0);
+__decorate([
+    property({ type: Object })
+], DataReportComponent.prototype, "data", void 0);
+__decorate([
+    query('ox-report-body', true)
+], DataReportComponent.prototype, "body", void 0);
+__decorate([
+    query('ox-report-header', true)
+], DataReportComponent.prototype, "header", void 0);
+DataReportComponent = __decorate([
+    customElement('ox-report-component')
+], DataReportComponent);
+export { DataReportComponent };
+//# sourceMappingURL=data-report-component.js.map

package/dist/src/data-report/data-report-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-report-component.js","sourceRoot":"","sources":["../../../src/data-report/data-report-component.ts"],"names":[],"mappings":"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","sourcesContent":["import './data-report-header.js'\nimport './data-report-body.js'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ColumnConfig, GristConfig, GristData } from '../types.js'\nimport { ZERO_CONFIG, ZERO_DATA } from '../configure/zero-config.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\n/**\n * DataReportComponent\n */\n\n@customElement('ox-report-component')\nexport class DataReportComponent extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        overflow: hidden;\n\n        border: 1px solid var(--report-header-border-color);\n        border-radius: var(--report-component-border-radius);\n      }\n\n      ox-report-body {\n        flex: 1;\n      }\n\n      @media print {\n        :host {\n          zoom: 80%;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) config: GristConfig = ZERO_CONFIG\n  @property({ type: Object }) data: GristData = ZERO_DATA\n\n  private _widths: string = ''\n\n  @query('ox-report-body', true) body!: HTMLElement\n  @query('ox-report-header', true) header!: HTMLElement\n\n  firstUpdated() {\n    /* header and body scroll synchronization */\n    this.header?.addEventListener('scroll', (e: Event) => {\n      const body = this.body\n      const header = this.header\n      if (body && header) {\n        if (body.scrollLeft !== header.scrollLeft) {\n          body.scrollLeft = header.scrollLeft\n        }\n      }\n    })\n\n    this.body?.addEventListener('scroll', e => {\n      const body = this.body\n      const header = this.header\n      if (body && header) {\n        if (body.scrollLeft !== header.scrollLeft) {\n          header.scrollLeft = body.scrollLeft\n        }\n      }\n    })\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 && this.config.columns)\n    }\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('--report-template-columns', this._widths)\n    this.style.setProperty('--report-template-print-columns', this._widths.replace(/px/gi, 'fr'))\n  }\n\n  render() {\n    var { columns } = this.config\n\n    var data = this.data\n\n    return html`\n      <ox-report-header\n        .config=${this.config}\n        .columns=${columns}\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-report-header>\n\n      <ox-report-body .config=${this.config} .columns=${columns} .data=${data}></ox-report-body>\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-report/data-report-field.d.ts

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

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

@@ -0,0 +1,99 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js';
+const DEFAULT_TEXT_ALIGN = 'left';
+let DataReportField = class DataReportField extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.record = ZERO_RECORD;
+        this.column = ZERO_COLUMN;
+        this.rowIndex = -1;
+        this.columnIndex = -1;
+    }
+    render() {
+        if (!this.column) {
+            return html ``;
+        }
+        var { value, column, record, rowIndex } = this;
+        var { renderer } = column.record;
+        return html ` ${renderer(value, column, record, rowIndex, this)} `;
+    }
+    updated(changes) {
+        if (changes.has('column')) {
+            var align = (this.column.record && 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-report-field-justify-content', justify);
+                this.style.setProperty('--data-report-field-text-align', align);
+            }
+        }
+    }
+};
+DataReportField.styles = [
+    css `
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: var(--data-report-field-justify-content, flex-start);
+        position: relative;
+
+        white-space: nowrap;
+        overflow: hidden;
+        background-color: var(--report-record-background-color);
+        padding: var(--report-record-field-padding);
+        border: 1px solid transparent;
+        border-bottom: var(--report-record-field-border-bottom);
+
+        font-size: var(--report-record-wide-fontsize);
+        text-overflow: ellipsis;
+
+        min-height: 30px;
+        box-sizing: border-box;
+      }
+
+      :host([gutter]) * {
+        cursor: default;
+        font-size: 1.2em;
+      }
+
+      * {
+        flex: 1;
+        margin: 0;
+        text-align: var(--data-report-field-text-align);
+      }
+
+      *[center] {
+        flex: none;
+        margin: 0 auto;
+      }
+    `
+];
+__decorate([
+    property({ attribute: true })
+], DataReportField.prototype, "align", void 0);
+__decorate([
+    property({ type: Object })
+], DataReportField.prototype, "record", void 0);
+__decorate([
+    property({ type: Object })
+], DataReportField.prototype, "column", void 0);
+__decorate([
+    property({ type: Number })
+], DataReportField.prototype, "rowIndex", void 0);
+__decorate([
+    property({ type: Number })
+], DataReportField.prototype, "columnIndex", void 0);
+__decorate([
+    property({ type: Object })
+], DataReportField.prototype, "value", void 0);
+DataReportField = __decorate([
+    customElement('ox-report-field')
+], DataReportField);
+export { DataReportField };
+//# sourceMappingURL=data-report-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-report-field.js","sourceRoot":"","sources":["../../../src/data-report/data-report-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkC,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAEtE,MAAM,kBAAkB,GAAG,MAAM,CAAA;AAG1B,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QA0CuB,WAAM,GAAgB,WAAW,CAAA;QACjC,WAAM,GAAiB,WAAW,CAAA;QAClC,aAAQ,GAAW,CAAC,CAAC,CAAA;QACrB,gBAAW,GAAW,CAAC,CAAC,CAAA;IA6BtD,CAAC;IA1BC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC9C,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;QAEhC,OAAO,IAAI,CAAA,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAA;IACnE,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,kBAAkB,CAAA;YAClF,IAAI,KAAK,IAAI,kBAAkB,EAAE,CAAC;gBAChC,IAAI,OAAO,GAAG,QAAQ,CAAA;gBACtB,QAAQ,KAAK,EAAE,CAAC;oBACd,KAAK,OAAO;wBACV,OAAO,GAAG,UAAU,CAAA;wBACpB,MAAK;gBACT,CAAC;gBACD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,qCAAqC,EAAE,OAAO,CAAC,CAAA;gBACtE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,gCAAgC,EAAE,KAAK,CAAC,CAAA;YACjE,CAAC;QACH,CAAC;IACH,CAAC;;AAxEM,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCF;CACF,AAtCY,CAsCZ;AAE8B;IAA9B,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;8CAAe;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAW;AA9C3B,eAAe;IAD3B,aAAa,CAAC,iBAAiB,CAAC;GACpB,eAAe,CA0E3B","sourcesContent":["import { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\nimport { ZERO_COLUMN, ZERO_RECORD } from '../configure/zero-config.js'\n\nconst DEFAULT_TEXT_ALIGN = 'left'\n\n@customElement('ox-report-field')\nexport class DataReportField extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        justify-content: var(--data-report-field-justify-content, flex-start);\n        position: relative;\n\n        white-space: nowrap;\n        overflow: hidden;\n        background-color: var(--report-record-background-color);\n        padding: var(--report-record-field-padding);\n        border: 1px solid transparent;\n        border-bottom: var(--report-record-field-border-bottom);\n\n        font-size: var(--report-record-wide-fontsize);\n        text-overflow: ellipsis;\n\n        min-height: 30px;\n        box-sizing: border-box;\n      }\n\n      :host([gutter]) * {\n        cursor: default;\n        font-size: 1.2em;\n      }\n\n      * {\n        flex: 1;\n        margin: 0;\n        text-align: var(--data-report-field-text-align);\n      }\n\n      *[center] {\n        flex: none;\n        margin: 0 auto;\n      }\n    `\n  ]\n\n  @property({ attribute: true }) align?: string\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Number }) rowIndex: number = -1\n  @property({ type: Number }) columnIndex: number = -1\n  @property({ type: Object }) value: any\n\n  render(): TemplateResult {\n    if (!this.column) {\n      return html``\n    }\n\n    var { value, column, record, rowIndex } = this\n    var { renderer } = column.record\n\n    return html` ${renderer(value, column, record, rowIndex, this)} `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('column')) {\n      var align = (this.column.record && 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-report-field-justify-content', justify)\n        this.style.setProperty('--data-report-field-text-align', align)\n      }\n    }\n  }\n}\n"]}

package/dist/src/data-report/data-report-header.d.ts

@@ -0,0 +1 @@
+export {};