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

package/dist/src/record-view/record-view-body.d.ts

@@ -0,0 +1,21 @@
+import '@material/web/icon/icon.js';
+import '../data-grid/data-grid-field.js';
+import { LitElement } from 'lit';
+import { ColumnConfig, GristRecord, ValidationReason } from '../types.js';
+export declare class RecordViewBody extends LitElement {
+    static styles: import("lit").CSSResult[];
+    columns: ColumnConfig[];
+    record: GristRecord;
+    rowIndex: number;
+    currentTarget: any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    setFocus(fieldElement: HTMLElement): void;
+    setFocusOnInvalid(invalidFields: {
+        field: string;
+        reason: ValidationReason;
+    }[]): void;
+    _onKeyDown(event: KeyboardEvent): void;
+    render(): import("lit-html").TemplateResult<1>;
+    _renderLabel(column: ColumnConfig): import("lit-html").TemplateResult<1>;
+}

package/dist/src/record-view/record-view-body.js

@@ -0,0 +1,252 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '../data-grid/data-grid-field.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ZERO_RECORD } from '../configure/zero-config.js';
+import { recordViewBodyClickHandler } from './event-handlers/record-view-body-click-handler.js';
+import i18next from 'i18next';
+let RecordViewBody = class RecordViewBody extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.record = ZERO_RECORD;
+        this.rowIndex = -1;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('tabindex', '0');
+        this.addEventListener('keydown', this._onKeyDown);
+        this.renderRoot.addEventListener('click', recordViewBodyClickHandler.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('keydown', this._onKeyDown);
+    }
+    setFocus(fieldElement) {
+        fieldElement === null || fieldElement === void 0 ? void 0 : fieldElement.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }));
+    }
+    setFocusOnInvalid(invalidFields) {
+        const allLabels = this.renderRoot.querySelectorAll('label');
+        allLabels.forEach((label) => {
+            label.classList.remove('highlight-invalid');
+            label.removeAttribute('data-reason');
+        });
+        // 유효성 검사를 통과하지 못한 필드에 대해 처리
+        invalidFields.forEach(({ field, reason }, index) => {
+            const labelElement = this.renderRoot.querySelector(`[data-name="${field}"]`);
+            const fieldElement = this.renderRoot.querySelector(`[data-name="${field}"] + ox-grid-field`);
+            // 동적으로 data-reason 속성을 설정하여 메시지를 변경
+            if (labelElement) {
+                labelElement.classList.add('highlight-invalid');
+                labelElement.setAttribute('data-reason', '(' + i18next.t(`text.validation-reason.${reason}`) + ')');
+            }
+            // 첫 번째 필드에 포커스 설정
+            if (index === 0 && fieldElement) {
+                this.setFocus(fieldElement);
+            }
+        });
+    }
+    _onKeyDown(event) {
+        if (event.key === 'Tab') {
+            const fields = Array.from(this.renderRoot.querySelectorAll('ox-grid-field[tabstop]'));
+            const focused = this.renderRoot.querySelector('ox-grid-field[editing]');
+            const focusedIndex = fields.findIndex(field => field === focused);
+            let nextIndex = focusedIndex + (event.shiftKey ? -1 : 1);
+            if (nextIndex >= fields.length || nextIndex < 0) {
+                return; // Let the default behavior happen if it's the last or first element
+            }
+            event.preventDefault();
+            const nextField = fields[nextIndex];
+            nextField && this.setFocus(nextField);
+        }
+    }
+    render() {
+        var columns = this.columns.filter(column => !column.hidden && column.type !== 'gutter');
+        var record = this.record;
+        var rowIndex = this.rowIndex;
+        return html `
+      <div content>
+        ${columns.map((column, index) => {
+            let { editable, disabled, mandatory, wide } = column.record;
+            if (typeof editable === 'function') {
+                editable = editable.call(this, record[column.name], column, record, rowIndex, this);
+            }
+            if (typeof disabled === 'function') {
+                disabled = disabled.call(this, record[column.name], column, record, rowIndex, this);
+            }
+            let dirtyFields = record['__dirtyfields__'] || {};
+            return html `
+            <label ?editable=${editable} ?wide=${wide} data-name=${column.name}>
+              <span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span>
+              <md-icon>edit</md-icon>
+            </label>
+            <ox-grid-field
+              ?disabled=${disabled}
+              .rowIndex=${rowIndex}
+              .column=${column}
+              .record=${record}
+              .value=${record[column.name]}
+              ?dirty=${!!dirtyFields[column.name]}
+              ?tabstop=${!!editable}
+              ?wide=${wide}
+            ></ox-grid-field>
+          `;
+        })}
+      </div>
+    `;
+    }
+    _renderLabel(column) {
+        var { renderer } = column.header;
+        var title = renderer.call(this, column);
+        return html ` ${title} `;
+    }
+};
+RecordViewBody.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+      }
+
+      :host > * {
+        align-self: stretch;
+      }
+
+      div[content] {
+        align-self: center;
+
+        display: grid;
+        grid-template-columns: 2fr 3fr 2fr 3fr;
+        grid-auto-rows: min-content;
+        grid-gap: var(--spacing-large) 0;
+
+        padding: var(--spacing-large) var(--spacing-huge);
+        font-size: 16px; /* for ios safari */
+        flex: 1;
+        width: 100%;
+        max-width: 1300px;
+        box-sizing: border-box;
+      }
+
+      label {
+        display: flex;
+        align-items: center;
+        position: relative;
+        text-transform: capitalize;
+        padding: var(--record-view-item-padding);
+        font: var(--record-view-label-font);
+        color: var(--record-view-label-color);
+        text-align: right;
+        padding-right: var(--spacing-large);
+      }
+
+      label[wide] {
+        grid-column: 1 / 2;
+      }
+
+      label md-icon {
+        display: none;
+      }
+
+      label > span {
+        margin-left: auto;
+      }
+
+      label[editable] md-icon {
+        display: inline-block;
+        font-size: var(--record-view-label-icon-size);
+        opacity: 0.5;
+      }
+
+      ox-grid-field {
+        background-color: var(--record-view-grid-field-background-color, var(--md-sys-color-surface-container-lowest));
+        border: var(--record-view-grid-field-border);
+        border-radius: var(--md-sys-shape-corner-small);
+        padding: var(--spacing-tiny) var(--spacing-small);
+
+        font: var(--record-view-font);
+        color: var(--record-view-color);
+
+        max-width: 360px;
+      }
+
+      ox-grid-field[editing='true'] {
+        border: var(--record-view-edit-border);
+      }
+
+      ox-grid-field[wide] {
+        grid-column: 2 / 5;
+        width: 100%;
+        max-width: 986px;
+      }
+
+      :first-child + ox-grid-field {
+        color: var(--record-view-focus-color);
+        font-weight: bold;
+      }
+
+      .highlight-invalid {
+        position: relative;
+        padding: var(--spacing-tiny) var(--spacing-small);
+      }
+
+      .highlight-invalid::after {
+        content: attr(data-reason); /* 콘텐츠를 동적으로 변경하기 위해 data-reason 속성을 사용 */
+        color: red;
+        font-size: 12px;
+        position: absolute;
+        left: 0;
+        bottom: -8px; /* 라벨 아래쪽에 메시지를 표시 */
+      }
+
+      @media only screen and (max-width: 1000px) {
+        div[content] {
+          grid-template-columns: 2fr 3fr;
+          padding: var(--spacing-medium);
+        }
+
+        label[wide] {
+          grid-column: 1 / 2;
+        }
+
+        ox-grid-field[wide] {
+          grid-column: 2 / 3;
+          width: 100%;
+          max-width: 360px;
+        }
+      }
+
+      @media only screen and (max-width: 600px) {
+        div[content] {
+          grid-template-columns: 2fr 3fr;
+          padding: var(--spacing-medium);
+        }
+
+        label[wide] {
+          grid-column: 1 / 2;
+        }
+
+        ox-grid-field[wide] {
+          grid-column: 1 / 3;
+          width: 100%;
+          max-width: unset;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Array })
+], RecordViewBody.prototype, "columns", void 0);
+__decorate([
+    property({ type: Object })
+], RecordViewBody.prototype, "record", void 0);
+__decorate([
+    property({ type: Number })
+], RecordViewBody.prototype, "rowIndex", void 0);
+RecordViewBody = __decorate([
+    customElement('ox-record-view-body')
+], RecordViewBody);
+export { RecordViewBody };
+//# sourceMappingURL=record-view-body.js.map

package/dist/src/record-view/record-view-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-view-body.js","sourceRoot":"","sources":["../../../src/record-view/record-view-body.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../data-grid/data-grid-field.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_RECORD } from '../configure/zero-config.js'\nimport { ColumnConfig, GristRecord, ValidationReason } from '../types.js'\nimport { recordViewBodyClickHandler } from './event-handlers/record-view-body-click-handler.js'\nimport i18next from 'i18next'\n\n@customElement('ox-record-view-body')\nexport class RecordViewBody extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: center;\n      }\n\n      :host > * {\n        align-self: stretch;\n      }\n\n      div[content] {\n        align-self: center;\n\n        display: grid;\n        grid-template-columns: 2fr 3fr 2fr 3fr;\n        grid-auto-rows: min-content;\n        grid-gap: var(--spacing-large) 0;\n\n        padding: var(--spacing-large) var(--spacing-huge);\n        font-size: 16px; /* for ios safari */\n        flex: 1;\n        width: 100%;\n        max-width: 1300px;\n        box-sizing: border-box;\n      }\n\n      label {\n        display: flex;\n        align-items: center;\n        position: relative;\n        text-transform: capitalize;\n        padding: var(--record-view-item-padding);\n        font: var(--record-view-label-font);\n        color: var(--record-view-label-color);\n        text-align: right;\n        padding-right: var(--spacing-large);\n      }\n\n      label[wide] {\n        grid-column: 1 / 2;\n      }\n\n      label md-icon {\n        display: none;\n      }\n\n      label > span {\n        margin-left: auto;\n      }\n\n      label[editable] md-icon {\n        display: inline-block;\n        font-size: var(--record-view-label-icon-size);\n        opacity: 0.5;\n      }\n\n      ox-grid-field {\n        background-color: var(--record-view-grid-field-background-color, var(--md-sys-color-surface-container-lowest));\n        border: var(--record-view-grid-field-border);\n        border-radius: var(--md-sys-shape-corner-small);\n        padding: var(--spacing-tiny) var(--spacing-small);\n\n        font: var(--record-view-font);\n        color: var(--record-view-color);\n\n        max-width: 360px;\n      }\n\n      ox-grid-field[editing='true'] {\n        border: var(--record-view-edit-border);\n      }\n\n      ox-grid-field[wide] {\n        grid-column: 2 / 5;\n        width: 100%;\n        max-width: 986px;\n      }\n\n      :first-child + ox-grid-field {\n        color: var(--record-view-focus-color);\n        font-weight: bold;\n      }\n\n      .highlight-invalid {\n        position: relative;\n        padding: var(--spacing-tiny) var(--spacing-small);\n      }\n\n      .highlight-invalid::after {\n        content: attr(data-reason); /* 콘텐츠를 동적으로 변경하기 위해 data-reason 속성을 사용 */\n        color: red;\n        font-size: 12px;\n        position: absolute;\n        left: 0;\n        bottom: -8px; /* 라벨 아래쪽에 메시지를 표시 */\n      }\n\n      @media only screen and (max-width: 1000px) {\n        div[content] {\n          grid-template-columns: 2fr 3fr;\n          padding: var(--spacing-medium);\n        }\n\n        label[wide] {\n          grid-column: 1 / 2;\n        }\n\n        ox-grid-field[wide] {\n          grid-column: 2 / 3;\n          width: 100%;\n          max-width: 360px;\n        }\n      }\n\n      @media only screen and (max-width: 600px) {\n        div[content] {\n          grid-template-columns: 2fr 3fr;\n          padding: var(--spacing-medium);\n        }\n\n        label[wide] {\n          grid-column: 1 / 2;\n        }\n\n        ox-grid-field[wide] {\n          grid-column: 1 / 3;\n          width: 100%;\n          max-width: unset;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n\n  public currentTarget: any\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n\n    this.addEventListener('keydown', this._onKeyDown)\n    this.renderRoot.addEventListener('click', recordViewBodyClickHandler.bind(this))\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.removeEventListener('keydown', this._onKeyDown)\n  }\n\n  setFocus(fieldElement: HTMLElement) {\n    fieldElement?.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }))\n  }\n\n  setFocusOnInvalid(invalidFields: { field: string; reason: ValidationReason }[]) {\n    const allLabels = this.renderRoot.querySelectorAll('label')\n    allLabels.forEach((label: HTMLLabelElement) => {\n      label.classList.remove('highlight-invalid')\n      label.removeAttribute('data-reason')\n    })\n\n    // 유효성 검사를 통과하지 못한 필드에 대해 처리\n    invalidFields.forEach(({ field, reason }, index) => {\n      const labelElement = this.renderRoot.querySelector(`[data-name=\"${field}\"]`) as HTMLLabelElement\n      const fieldElement = this.renderRoot.querySelector(`[data-name=\"${field}\"] + ox-grid-field`) as HTMLInputElement\n\n      // 동적으로 data-reason 속성을 설정하여 메시지를 변경\n      if (labelElement) {\n        labelElement.classList.add('highlight-invalid')\n        labelElement.setAttribute('data-reason', '(' + i18next.t(`text.validation-reason.${reason}`) + ')')\n      }\n\n      // 첫 번째 필드에 포커스 설정\n      if (index === 0 && fieldElement) {\n        this.setFocus(fieldElement)\n      }\n    })\n  }\n\n  _onKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Tab') {\n      const fields = Array.from(this.renderRoot.querySelectorAll('ox-grid-field[tabstop]'))\n      const focused = this.renderRoot.querySelector('ox-grid-field[editing]')\n      const focusedIndex = fields.findIndex(field => field === focused)\n\n      let nextIndex = focusedIndex + (event.shiftKey ? -1 : 1)\n\n      if (nextIndex >= fields.length || nextIndex < 0) {\n        return // Let the default behavior happen if it's the last or first element\n      }\n\n      event.preventDefault()\n      const nextField = fields[nextIndex] as HTMLInputElement\n      nextField && this.setFocus(nextField)\n    }\n  }\n\n  render() {\n    var columns = this.columns.filter(column => !column.hidden && column.type !== 'gutter')\n    var record = this.record\n    var rowIndex = this.rowIndex\n\n    return html`\n      <div content>\n        ${columns.map((column, index) => {\n          let { editable, disabled, mandatory, wide } = column.record\n          if (typeof editable === 'function') {\n            editable = editable.call(this, record[column.name], column, record, rowIndex, this)\n          }\n          if (typeof disabled === 'function') {\n            disabled = disabled.call(this, record[column.name], column, record, rowIndex, this)\n          }\n\n          let dirtyFields = record['__dirtyfields__'] || {}\n\n          return html`\n            <label ?editable=${editable} ?wide=${wide} data-name=${column.name}>\n              <span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span>\n              <md-icon>edit</md-icon>\n            </label>\n            <ox-grid-field\n              ?disabled=${disabled}\n              .rowIndex=${rowIndex}\n              .column=${column}\n              .record=${record}\n              .value=${record[column.name]}\n              ?dirty=${!!dirtyFields[column.name]}\n              ?tabstop=${!!editable}\n              ?wide=${wide}\n            ></ox-grid-field>\n          `\n        })}\n      </div>\n    `\n  }\n\n  _renderLabel(column: ColumnConfig) {\n    var { renderer } = column.header\n    var title = renderer.call(this, column)\n\n    return html` ${title} `\n  }\n}\n"]}

package/dist/src/record-view/record-view-handler.d.ts

@@ -0,0 +1,9 @@
+import { RecordCard } from '../data-card/record-card.js';
+import { DataGridBody } from '../data-grid/data-grid-body.js';
+import { DataGridField } from '../data-grid/data-grid-field.js';
+import { RecordPartial } from '../data-list/record-partial.js';
+import { RecordView } from './record-view.js';
+import { ColumnConfig, GristRecord } from '../types.js';
+export declare const RecordViewHandler: (columns: ColumnConfig[], record: GristRecord, rowIndex: number, field: DataGridField | RecordCard | RecordPartial | DataGridBody, popupOptions: {
+    [key: string]: any;
+}, closeCallback?: () => void) => RecordView;

package/dist/src/record-view/record-view-handler.js

@@ -0,0 +1,57 @@
+/*
+ * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,
+ * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.
+ */
+export const RecordViewHandler = function (columns, record, rowIndex, field, popupOptions, closeCallback) {
+    var recordView = document.createElement('ox-record-view');
+    recordView.columns = columns;
+    recordView.record = record;
+    recordView.rowIndex = rowIndex;
+    document.dispatchEvent(new CustomEvent('open-popup', {
+        detail: {
+            template: recordView,
+            options: {
+                backdrop: true,
+                size: 'large',
+                title: record['name'],
+                ...popupOptions
+            },
+            callback: (popup) => {
+                recordView.addEventListener('field-change', (e) => {
+                    field.dispatchEvent(new CustomEvent('field-change', {
+                        bubbles: true,
+                        composed: true,
+                        detail: e.detail
+                    }));
+                });
+                recordView.addEventListener('reset', (e) => {
+                    field.dispatchEvent(new CustomEvent('record-reset', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            record: record,
+                            row: rowIndex
+                        }
+                    }));
+                });
+                recordView.addEventListener('cancel', (e) => {
+                    field.dispatchEvent(new CustomEvent('record-reset', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            record: record,
+                            row: rowIndex
+                        }
+                    }));
+                    popup.close();
+                });
+                recordView.addEventListener('ok', (e) => {
+                    popup.close();
+                });
+                popup.onclosed = closeCallback;
+            }
+        }
+    }));
+    return recordView;
+};
+//# sourceMappingURL=record-view-handler.js.map

package/dist/src/record-view/record-view-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-view-handler.js","sourceRoot":"","sources":["../../../src/record-view/record-view-handler.ts"],"names":[],"mappings":"AAOA;;;GAGG;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAC/B,OAAuB,EACvB,MAAmB,EACnB,QAAgB,EAChB,KAAgE,EAChE,YAAoC,EACpC,aAA0B;IAE1B,IAAI,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAe,CAAA;IAEvE,UAAU,CAAC,OAAO,GAAG,OAAO,CAAA;IAC5B,UAAU,CAAC,MAAM,GAAG,MAAM,CAAA;IAC1B,UAAU,CAAC,QAAQ,GAAG,QAAQ,CAAA;IAE9B,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,YAAY,EAAE;QAC5B,MAAM,EAAE;YACN,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE;gBACP,QAAQ,EAAE,IAAI;gBACd,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;gBACrB,GAAG,YAAY;aAChB;YACD,QAAQ,EAAE,CAAC,KAAU,EAAE,EAAE;gBACvB,UAAU,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAQ,EAAE,EAAE;oBACvD,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;wBAC9B,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAG,CAAS,CAAC,MAAM;qBAC1B,CAAC,CACH,CAAA;gBACH,CAAC,CAAC,CAAA;gBAEF,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE;oBAChD,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;wBAC9B,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE;4BACN,MAAM,EAAE,MAAM;4BACd,GAAG,EAAE,QAAQ;yBACd;qBACF,CAAC,CACH,CAAA;gBACH,CAAC,CAAC,CAAA;gBAEF,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE;oBACjD,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;wBAC9B,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE;4BACN,MAAM,EAAE,MAAM;4BACd,GAAG,EAAE,QAAQ;yBACd;qBACF,CAAC,CACH,CAAA;oBACD,KAAK,CAAC,KAAK,EAAE,CAAA;gBACf,CAAC,CAAC,CAAA;gBAEF,UAAU,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAQ,EAAE,EAAE;oBAC7C,KAAK,CAAC,KAAK,EAAE,CAAA;gBACf,CAAC,CAAC,CAAA;gBAEF,KAAK,CAAC,QAAQ,GAAG,aAAa,CAAA;YAChC,CAAC;SACF;KACK,CAAC,CACV,CAAA;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA","sourcesContent":["import { RecordCard } from '../data-card/record-card.js'\nimport { DataGridBody } from '../data-grid/data-grid-body.js'\nimport { DataGridField } from '../data-grid/data-grid-field.js'\nimport { RecordPartial } from '../data-list/record-partial.js'\nimport { RecordView } from './record-view.js'\nimport { ColumnConfig, GristRecord } from '../types.js'\n\n/*\n * handler들은 ox-grid-field 로부터 호출되는 것을 전제로 하며,\n * 전반적인 처리를 위해서, columns 및 data 정보를 포함해서 제공할 수 있어야 한다.\n */\n\nexport const RecordViewHandler = function (\n  columns: ColumnConfig[],\n  record: GristRecord,\n  rowIndex: number,\n  field: DataGridField | RecordCard | RecordPartial | DataGridBody,\n  popupOptions: { [key: string]: any },\n  closeCallback?: () => void\n): RecordView {\n  var recordView = document.createElement('ox-record-view') as RecordView\n\n  recordView.columns = columns\n  recordView.record = record\n  recordView.rowIndex = rowIndex\n\n  document.dispatchEvent(\n    new CustomEvent('open-popup', {\n      detail: {\n        template: recordView,\n        options: {\n          backdrop: true,\n          size: 'large',\n          title: record['name'],\n          ...popupOptions\n        },\n        callback: (popup: any) => {\n          recordView.addEventListener('field-change', (e: Event) => {\n            field.dispatchEvent(\n              new CustomEvent('field-change', {\n                bubbles: true,\n                composed: true,\n                detail: (e as any).detail\n              })\n            )\n          })\n\n          recordView.addEventListener('reset', (e: Event) => {\n            field.dispatchEvent(\n              new CustomEvent('record-reset', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  record: record,\n                  row: rowIndex\n                }\n              })\n            )\n          })\n\n          recordView.addEventListener('cancel', (e: Event) => {\n            field.dispatchEvent(\n              new CustomEvent('record-reset', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                  record: record,\n                  row: rowIndex\n                }\n              })\n            )\n            popup.close()\n          })\n\n          recordView.addEventListener('ok', (e: Event) => {\n            popup.close()\n          })\n\n          popup.onclosed = closeCallback\n        }\n      }\n    } as any)\n  )\n\n  return recordView\n}\n"]}

package/dist/src/record-view/record-view.d.ts

@@ -0,0 +1,23 @@
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-file.js';
+import '../data-grid/data-grid-field.js';
+import './record-view-body.js';
+import { LitElement } from 'lit';
+import { ColumnConfig, GristRecord, ValidationReason } from '../types.js';
+import { RecordViewBody } from './record-view-body.js';
+export declare class RecordView extends LitElement {
+    static styles: import("lit").CSSResult[];
+    columns: ColumnConfig[];
+    record: GristRecord;
+    rowIndex: number;
+    body: RecordViewBody;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    setFocusOnInvalid(invalidFields: {
+        field: string;
+        reason: ValidationReason;
+    }[]): void;
+    onReset(): void;
+    onCancel(): void;
+    onOK(): void;
+}

package/dist/src/record-view/record-view.js

@@ -0,0 +1,117 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-file.js';
+import '../data-grid/data-grid-field.js';
+import './record-view-body.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+import { ZERO_RECORD } from '../configure/zero-config.js';
+let RecordView = class RecordView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = [];
+        this.record = ZERO_RECORD;
+        this.rowIndex = -1;
+    }
+    render() {
+        return html `
+      <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>
+      </ox-record-view-body>
+      <div footer>
+        <button @click=${this.onReset.bind(this)}><md-icon>refresh</md-icon><span>Reset</span></button>
+        <button @click=${this.onCancel.bind(this)}><md-icon>clear</md-icon><span>Cancel</span></button>
+        <button @click=${this.onOK.bind(this)} ok><md-icon>task_alt</md-icon><span>OK</span></button>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        this.setAttribute('tabindex', '0');
+    }
+    setFocusOnInvalid(invalidFields) {
+        this.body.setFocusOnInvalid(invalidFields);
+    }
+    onReset() {
+        this.focus();
+        this.dispatchEvent(new CustomEvent('reset', {
+            detail: this.record
+        }));
+    }
+    onCancel() {
+        this.focus();
+        this.dispatchEvent(new CustomEvent('cancel', {
+            detail: this.record
+        }));
+    }
+    onOK() {
+        this.focus();
+        this.dispatchEvent(new CustomEvent('ok', {
+            detail: this.record
+        }));
+    }
+};
+RecordView.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--record-view-background-color);
+      }
+
+      ox-record-view-body {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      [footer] {
+        text-align: right;
+        background-color: var(--record-view-footer-background);
+        box-shadow: var(--context-toolbar-shadow-line);
+      }
+
+      [footer] button {
+        display: inline-block;
+        align-items: center;
+        justify-content: center;
+
+        background-color: transparent;
+        border: var(--record-view-footer-button-border);
+        border-width: var(--record-view-footer-button-border-width);
+        padding: var(--spacing-tiny) var(--spacing-medium);
+        color: var(--record-view-footer-button-color);
+        font-size: var(--md-sys-typescale-title-medium-size, 1rem);
+        line-height: 2;
+      }
+
+      [footer] button * {
+        vertical-align: middle;
+      }
+
+      [footer] button md-icon {
+        --md-icon-size: var(--icon-size-small);
+        margin-right: var(--spacing-small, 4px);
+      }
+
+      [footer] button[ok] {
+        background-color: var(--record-view-footer-focus-background);
+      }
+    `
+];
+__decorate([
+    property({ type: Array })
+], RecordView.prototype, "columns", void 0);
+__decorate([
+    property({ type: Object })
+], RecordView.prototype, "record", void 0);
+__decorate([
+    property({ type: Number })
+], RecordView.prototype, "rowIndex", void 0);
+__decorate([
+    query('ox-record-view-body')
+], RecordView.prototype, "body", void 0);
+RecordView = __decorate([
+    customElement('ox-record-view')
+], RecordView);
+export { RecordView };
+//# sourceMappingURL=record-view.js.map

package/dist/src/record-view/record-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-view.js","sourceRoot":"","sources":["../../../src/record-view/record-view.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,iCAAiC,CAAA;AACxC,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAMlD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAkDsB,YAAO,GAAmB,EAAE,CAAA;QAC3B,WAAM,GAAgB,WAAW,CAAA;QACjC,aAAQ,GAAW,CAAC,CAAC,CAAA;IAqDnD,CAAC;IAjDC,MAAM;QACJ,OAAO,IAAI,CAAA;sCACuB,IAAI,CAAC,OAAO,YAAY,IAAI,CAAC,MAAM,cAAc,IAAI,CAAC,QAAQ;;;yBAG3E,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;yBACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;yBACxB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;KAExC,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;IACpC,CAAC;IAED,iBAAiB,CAAC,aAA4D;QAC5E,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAA;IAC5C,CAAC;IAED,OAAO;QACL,IAAI,CAAC,KAAK,EAAE,CAAA;QAEZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,OAAO,EAAE;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,KAAK,EAAE,CAAA;QAEZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;IAED,IAAI;QACF,IAAI,CAAC,KAAK,EAAE,CAAA;QAEZ,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,IAAI,EAAE;YACpB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CACH,CAAA;IACH,CAAC;;AAvGM,iBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CF;CACF,AA/CY,CA+CZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAA6B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAsB;AAEnB;IAA7B,KAAK,CAAC,qBAAqB,CAAC;wCAAsB;AAtDxC,UAAU;IADtB,aAAa,CAAC,gBAAgB,CAAC;GACnB,UAAU,CAyGtB","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-file.js'\nimport '../data-grid/data-grid-field.js'\nimport './record-view-body.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ZERO_RECORD } from '../configure/zero-config.js'\nimport { ColumnConfig, GristRecord, ValidationReason } from '../types.js'\n\nimport { RecordViewBody } from './record-view-body.js'\n\n@customElement('ox-record-view')\nexport class RecordView extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--record-view-background-color);\n      }\n\n      ox-record-view-body {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      [footer] {\n        text-align: right;\n        background-color: var(--record-view-footer-background);\n        box-shadow: var(--context-toolbar-shadow-line);\n      }\n\n      [footer] button {\n        display: inline-block;\n        align-items: center;\n        justify-content: center;\n\n        background-color: transparent;\n        border: var(--record-view-footer-button-border);\n        border-width: var(--record-view-footer-button-border-width);\n        padding: var(--spacing-tiny) var(--spacing-medium);\n        color: var(--record-view-footer-button-color);\n        font-size: var(--md-sys-typescale-title-medium-size, 1rem);\n        line-height: 2;\n      }\n\n      [footer] button * {\n        vertical-align: middle;\n      }\n\n      [footer] button md-icon {\n        --md-icon-size: var(--icon-size-small);\n        margin-right: var(--spacing-small, 4px);\n      }\n\n      [footer] button[ok] {\n        background-color: var(--record-view-footer-focus-background);\n      }\n    `\n  ]\n\n  @property({ type: Array }) columns: ColumnConfig[] = []\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) rowIndex: number = -1\n\n  @query('ox-record-view-body') body!: RecordViewBody\n\n  render() {\n    return html`\n      <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>\n      </ox-record-view-body>\n      <div footer>\n        <button @click=${this.onReset.bind(this)}><md-icon>refresh</md-icon><span>Reset</span></button>\n        <button @click=${this.onCancel.bind(this)}><md-icon>clear</md-icon><span>Cancel</span></button>\n        <button @click=${this.onOK.bind(this)} ok><md-icon>task_alt</md-icon><span>OK</span></button>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.setAttribute('tabindex', '0')\n  }\n\n  setFocusOnInvalid(invalidFields: { field: string; reason: ValidationReason }[]) {\n    this.body.setFocusOnInvalid(invalidFields)\n  }\n\n  onReset() {\n    this.focus()\n\n    this.dispatchEvent(\n      new CustomEvent('reset', {\n        detail: this.record\n      })\n    )\n  }\n\n  onCancel() {\n    this.focus()\n\n    this.dispatchEvent(\n      new CustomEvent('cancel', {\n        detail: this.record\n      })\n    )\n  }\n\n  onOK() {\n    this.focus()\n\n    this.dispatchEvent(\n      new CustomEvent('ok', {\n        detail: this.record\n      })\n    )\n  }\n}\n"]}

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

@@ -0,0 +1,13 @@
+export * from './registry.js';
+export * from './ox-grist-renderer.js';
+export * from './ox-grist-renderer-boolean.js';
+export * from './ox-grist-renderer-color.js';
+export * from './ox-grist-renderer-date.js';
+export * from './ox-grist-renderer-link.js';
+export * from './ox-grist-renderer-password.js';
+export * from './ox-grist-renderer-progress.js';
+export * from './ox-grist-renderer-text.js';
+export * from './ox-grist-renderer-select.js';
+export * from './ox-grist-renderer-image.js';
+export * from './ox-grist-renderer-file.js';
+export * from './ox-grist-renderer-json5.js';

package/dist/src/renderers/index.js

@@ -0,0 +1,14 @@
+export * from './registry.js';
+export * from './ox-grist-renderer.js';
+export * from './ox-grist-renderer-boolean.js';
+export * from './ox-grist-renderer-color.js';
+export * from './ox-grist-renderer-date.js';
+export * from './ox-grist-renderer-link.js';
+export * from './ox-grist-renderer-password.js';
+export * from './ox-grist-renderer-progress.js';
+export * from './ox-grist-renderer-text.js';
+export * from './ox-grist-renderer-select.js';
+export * from './ox-grist-renderer-image.js';
+export * from './ox-grist-renderer-file.js';
+export * from './ox-grist-renderer-json5.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/renderers/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAE7B,cAAc,wBAAwB,CAAA;AACtC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA","sourcesContent":["export * from './registry.js'\n\nexport * from './ox-grist-renderer.js'\nexport * from './ox-grist-renderer-boolean.js'\nexport * from './ox-grist-renderer-color.js'\nexport * from './ox-grist-renderer-date.js'\nexport * from './ox-grist-renderer-link.js'\nexport * from './ox-grist-renderer-password.js'\nexport * from './ox-grist-renderer-progress.js'\nexport * from './ox-grist-renderer-text.js'\nexport * from './ox-grist-renderer-select.js'\nexport * from './ox-grist-renderer-image.js'\nexport * from './ox-grist-renderer-file.js'\nexport * from './ox-grist-renderer-json5.js'\n"]}

package/dist/src/renderers/ox-grist-renderer-boolean.d.ts

@@ -0,0 +1,2 @@
+import { FieldRenderer } from '../types.js';
+export declare const OxGristRendererBoolean: FieldRenderer;

package/dist/src/renderers/ox-grist-renderer-boolean.js

@@ -0,0 +1,39 @@
+import { html } from 'lit';
+export const OxGristRendererBoolean = (value, column, record, rowIndex, field) => {
+    let { editable } = column.record;
+    if (typeof editable === 'function') {
+        editable = editable.call(field, value, column, record, rowIndex, field);
+    }
+    return html `
+    <input
+      type="checkbox"
+      .checked=${!!value && !!String(value).match(/true/i)}
+      ?disabled=${!editable}
+      @pointerdown=${(e) => {
+        /* edit mode로 전환되지 않도록 차단함. 체크박스인풋은 렌더러 모드에서도 처리가능하므로. */
+        e.stopPropagation();
+    }}
+      @click=${(e) => {
+        e.stopPropagation();
+        /*
+         * 특별하게, checkbox인 경우에, editor가 활성화되지 않아도, renderer에서 값을 변경할 수 있게 함.
+         * checkbox가 클릭되면, 클릭에 의해 변경된 값을 레코드에 반영하기 위해서 value-changed 이벤트를 발생시킨다.
+         *
+         * 만일, readonly인 경우에는 click 이벤트가 발생하지 않으므로, 클릭으로 에디트할 수 없게 됨.
+         */
+        field.dispatchEvent(new CustomEvent('field-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                before: value,
+                after: e.target.checked,
+                column: column,
+                record: record,
+                row: rowIndex
+            }
+        }));
+    }}
+    />
+  `;
+};
+//# sourceMappingURL=ox-grist-renderer-boolean.js.map

package/dist/src/renderers/ox-grist-renderer-boolean.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer-boolean.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-boolean.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC9F,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;IAChC,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACnC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;IACzE,CAAC;IAED,OAAO,IAAI,CAAA;;;iBAGI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;kBACxC,CAAC,QAAQ;qBACN,CAAC,CAAQ,EAAE,EAAE;QAC1B,yDAAyD;QACzD,CAAC,CAAC,eAAe,EAAE,CAAA;IACrB,CAAC;eACQ,CAAC,CAAQ,EAAE,EAAE;QACpB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB;;;;;WAKG;QACH,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,MAAM,EAAE,KAAK;gBACb,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,OAAO;gBAC7C,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,MAAM;gBACd,GAAG,EAAE,QAAQ;aACd;SACF,CAAC,CACH,CAAA;IACH,CAAC;;GAEJ,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { FieldRenderer } from '../types.js'\nimport { html } from 'lit'\n\nexport const OxGristRendererBoolean: FieldRenderer = (value, column, record, rowIndex, field) => {\n  let { editable } = column.record\n  if (typeof editable === 'function') {\n    editable = editable.call(field, value, column, record, rowIndex, field)\n  }\n\n  return html`\n    <input\n      type=\"checkbox\"\n      .checked=${!!value && !!String(value).match(/true/i)}\n      ?disabled=${!editable}\n      @pointerdown=${(e: Event) => {\n        /* edit mode로 전환되지 않도록 차단함. 체크박스인풋은 렌더러 모드에서도 처리가능하므로. */\n        e.stopPropagation()\n      }}\n      @click=${(e: Event) => {\n        e.stopPropagation()\n        /*\n         * 특별하게, checkbox인 경우에, editor가 활성화되지 않아도, renderer에서 값을 변경할 수 있게 함.\n         * checkbox가 클릭되면, 클릭에 의해 변경된 값을 레코드에 반영하기 위해서 value-changed 이벤트를 발생시킨다.\n         *\n         * 만일, readonly인 경우에는 click 이벤트가 발생하지 않으므로, 클릭으로 에디트할 수 없게 됨.\n         */\n        field.dispatchEvent(\n          new CustomEvent('field-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              before: value,\n              after: (e.target as HTMLInputElement).checked,\n              column: column,\n              record: record,\n              row: rowIndex\n            }\n          })\n        )\n      }}\n    />\n  `\n}\n"]}

package/dist/src/renderers/ox-grist-renderer-color.d.ts

@@ -0,0 +1,2 @@
+import { FieldRenderer } from '../types.js';
+export declare const OxGristRendererColor: FieldRenderer;

package/dist/src/renderers/ox-grist-renderer-color.js

@@ -0,0 +1,12 @@
+import { html } from 'lit';
+export const OxGristRendererColor = (value, column, record, rowIndex, field) => {
+    value = value == null ? '#000' : value;
+    return html `
+    <div
+      style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:${value};"
+    >
+      ${value ? html `<p>${value}</p>` : html `<p>&nbsp</p>`}
+    </div>
+  `;
+};
+//# sourceMappingURL=ox-grist-renderer-color.js.map

package/dist/src/renderers/ox-grist-renderer-color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-renderer-color.js","sourceRoot":"","sources":["../../../src/renderers/ox-grist-renderer-color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAI1B,MAAM,CAAC,MAAM,oBAAoB,GAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAC5F,KAAK,GAAG,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAA;IAEtC,OAAO,IAAI,CAAA;;8GAEiG,KAAK;;QAE3G,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,cAAc;;GAEvD,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { FieldRenderer } from '../types.js'\n\nexport const OxGristRendererColor: FieldRenderer = (value, column, record, rowIndex, field) => {\n  value = value == null ? '#000' : value\n\n  return html`\n    <div\n      style=\"display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:${value};\"\n    >\n      ${value ? html`<p>${value}</p>` : html`<p>&nbsp</p>`}\n    </div>\n  `\n}\n"]}

package/dist/src/renderers/ox-grist-renderer-date.d.ts

@@ -0,0 +1,2 @@
+import { FieldRenderer } from '../types.js';
+export declare const OxGristRendererDate: FieldRenderer;