@operato/data-grist 7.1.26 → 7.1.27

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

@@ -0,0 +1,260 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import './record-view';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { OxPopup } from '@operato/popup';
+import { ValidationReason } from '../types';
+let OxRecordCreator = class OxRecordCreator extends LitElement {
+    constructor() {
+        super();
+        this.lightPopup = false;
+        this.preventCloseOnBlur = false;
+        this.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (this.lightPopup) {
+                this.openLightPopup();
+            }
+            else {
+                this.openPopup();
+            }
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.grist = this.closest('ox-grist');
+    }
+    render() {
+        return html `
+      <slot></slot>
+      <slot name="popup"></slot>
+    `;
+    }
+    validateRecord(record) {
+        const columns = this.grist.compiledConfig.columns;
+        const invalidFields = [];
+        columns.forEach(column => {
+            var _a;
+            if (((_a = column.record) === null || _a === void 0 ? void 0 : _a.mandatory) &&
+                (record[column.name] === undefined || record[column.name] === null || record[column.name] === '')) {
+                invalidFields.push({
+                    field: column.name,
+                    reason: ValidationReason.MANDATORY
+                });
+            }
+        });
+        return invalidFields;
+    }
+    openLightPopup() {
+        var _a;
+        const slot = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name='popup']`);
+        const slottedElements = slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true });
+        const originalContent = slottedElements === null || slottedElements === void 0 ? void 0 : slottedElements[0];
+        if (originalContent) {
+            this.lightPopupCustomCreator(originalContent);
+        }
+        else {
+            this.lightPopupRecordView();
+        }
+    }
+    openPopup() {
+        var _a;
+        const slot = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name='popup']`);
+        const slottedElements = slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true });
+        const originalContent = slottedElements === null || slottedElements === void 0 ? void 0 : slottedElements[0];
+        if (originalContent) {
+            this.popupCustomCreator(originalContent);
+        }
+        else {
+            this.popupRecordView();
+        }
+    }
+    lightPopupRecordView() {
+        const config = this.grist.compiledConfig;
+        var title = 'create';
+        const rowIndex = -1;
+        var record = {};
+        const columns = config.columns;
+        var popup = OxPopup.open({
+            template: html `
+        <div title>${title}</div>
+        <ox-record-view
+          @field-change=${(e) => {
+                const view = e.currentTarget;
+                var { after, before, column, record, row } = e.detail;
+                var validation = column.validation;
+                if (validation && typeof validation == 'function') {
+                    if (!validation.call(this, after, before, record, column)) {
+                        return;
+                    }
+                }
+                view.record = {
+                    ...record,
+                    [column.name]: after
+                };
+            }}
+          .columns=${columns}
+          .record=${record}
+          .rowIndex=${rowIndex}
+          @reset=${(e) => {
+                const view = e.currentTarget;
+                view.record = {};
+            }}
+          @cancel=${(e) => {
+                popup.close();
+            }}
+          @ok=${async (e) => {
+                const view = e.currentTarget;
+                // 레코드 밸리데이션 체크
+                const invalidFields = await this.validateRecord(view.record);
+                if (invalidFields.length > 0) {
+                    // const firstInvalidField = invalidFields[0];
+                    // if (firstInvalidField) {
+                    //   view.setFocus(firstInvalidField.field)
+                    // }
+                    view.setFocusOnInvalid(invalidFields);
+                    return false;
+                }
+                popup.close();
+                this.dispatchEvent(new CustomEvent('ok', {
+                    bubbles: true,
+                    composed: true,
+                    detail: view.record
+                }));
+            }}
+        ></ox-record-view>
+      `,
+            parent: document.body,
+            preventCloseOnBlur: this.preventCloseOnBlur
+        });
+    }
+    popupRecordView() {
+        const config = this.grist.compiledConfig;
+        const rowIndex = -1;
+        var record = {};
+        const columns = config.columns;
+        var title = 'create';
+        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
+                },
+                callback: (popup) => {
+                    recordView.addEventListener('reset', (e) => {
+                        const view = e.currentTarget;
+                        view.record = {};
+                    });
+                    recordView.addEventListener('cancel', (e) => {
+                        popup.close();
+                    });
+                    recordView.addEventListener('ok', async (e) => {
+                        var _a, _b;
+                        const view = e.currentTarget;
+                        // 레코드 밸리데이션 체크
+                        const invalidFields = await this.validateRecord(view.record);
+                        if (invalidFields.length > 0) {
+                            const firstInvalidField = invalidFields[0];
+                            if (firstInvalidField) {
+                                const fieldElement = (_a = view.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[name="${firstInvalidField}"]`);
+                                if (fieldElement) {
+                                    ;
+                                    fieldElement.focus();
+                                }
+                            }
+                            return false;
+                        }
+                        if (await ((_b = this.callback) === null || _b === void 0 ? void 0 : _b.call(this, view.record))) {
+                            popup.close();
+                        }
+                        else {
+                            // 밸리데이션 실패 시 처리
+                            console.error('레코드 밸리데이션 실패');
+                            // 여기에 사용자에게 오류 메시지를 표시하는 로직을 추가할 수 있습니다.
+                        }
+                    });
+                    recordView.addEventListener('field-change', async (e) => {
+                        const view = e.currentTarget;
+                        var { after, before, column, record, row } = e.detail;
+                        var validation = column.validation;
+                        if (validation && typeof validation == 'function') {
+                            if (!(await validation.call(this, after, before, record, column))) {
+                                return;
+                            }
+                        }
+                        view.record = {
+                            ...record,
+                            [column.name]: after
+                        };
+                    });
+                    popup.onclosed = () => { };
+                }
+            }
+        }));
+    }
+    lightPopupCustomCreator(originalContent) {
+        var _a;
+        const title = 'create';
+        const popupContent = originalContent.cloneNode(true);
+        popupContent.removeAttribute('slot');
+        OxPopup.open({
+            template: html `
+        <div title>${title}</div>
+        ${popupContent}
+      `,
+            parent: document.body,
+            preventCloseOnBlur: this.preventCloseOnBlur
+        });
+        (_a = this.customPopupCallback) === null || _a === void 0 ? void 0 : _a.call(this, popupContent); // 사용자 정의 팝업용 콜백 실행
+    }
+    popupCustomCreator(originalContent) {
+        const title = 'create';
+        const popupContent = originalContent.cloneNode(true);
+        popupContent.removeAttribute('slot');
+        document.dispatchEvent(new CustomEvent('open-popup', {
+            detail: {
+                template: popupContent,
+                options: {
+                    backdrop: true,
+                    size: 'large',
+                    title
+                },
+                callback: this.customPopupCallback
+            }
+        }));
+    }
+};
+OxRecordCreator.styles = [
+    css `
+      ::slotted([slot='popup']) {
+        display: none;
+      }
+    `
+];
+__decorate([
+    state()
+], OxRecordCreator.prototype, "grist", void 0);
+__decorate([
+    property({ type: Object })
+], OxRecordCreator.prototype, "callback", void 0);
+__decorate([
+    property({ type: Object })
+], OxRecordCreator.prototype, "customPopupCallback", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'light-popup' })
+], OxRecordCreator.prototype, "lightPopup", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'prevent-close-on-blur' })
+], OxRecordCreator.prototype, "preventCloseOnBlur", void 0);
+OxRecordCreator = __decorate([
+    customElement('ox-record-creator')
+], OxRecordCreator);
+export { OxRecordCreator };
+//# sourceMappingURL=ox-record-creator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-record-creator.js","sourceRoot":"","sources":["../../../src/record-view/ox-record-creator.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,eAAe,CAAA;AAEtB,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,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAGxC,OAAO,EAA6B,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAI/D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAgB7C;QACE,KAAK,EAAE,CAAA;QAJ8C,eAAU,GAAY,KAAK,CAAA;QACjB,uBAAkB,GAAG,KAAK,CAAA;QAKzF,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE;YAC1C,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,IAAI,CAAC,cAAc,EAAE,CAAA;YACvB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,EAAE,CAAA;YAClB,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAc,CAAA;IACpD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;KAGV,CAAA;IACH,CAAC;IAED,cAAc,CAAC,MAAmB;QAChC,MAAM,OAAO,GAAG,IAAI,CAAC,KAAM,CAAC,cAAc,CAAC,OAAO,CAAA;QAClD,MAAM,aAAa,GAAkD,EAAE,CAAA;QAEvE,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;;YACvB,IACE,CAAA,MAAA,MAAM,CAAC,MAAM,0CAAE,SAAS;gBACxB,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,SAAS,IAAI,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EACjG,CAAC;gBACD,aAAa,CAAC,IAAI,CAAC;oBACjB,KAAK,EAAE,MAAM,CAAC,IAAI;oBAClB,MAAM,EAAE,gBAAgB,CAAC,SAAS;iBACnC,CAAC,CAAA;YACJ,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,aAAa,CAAA;IACtB,CAAC;IAED,cAAc;;QACZ,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,oBAAoB,CAAoB,CAAA;QACpF,MAAM,eAAe,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;QACjE,MAAM,eAAe,GAAG,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,CAAC,CAAgB,CAAA;QAE3D,IAAI,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,uBAAuB,CAAC,eAAe,CAAC,CAAA;QAC/C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,oBAAoB,EAAE,CAAA;QAC7B,CAAC;IACH,CAAC;IAED,SAAS;;QACP,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,oBAAoB,CAAoB,CAAA;QACpF,MAAM,eAAe,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;QACjE,MAAM,eAAe,GAAG,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,CAAC,CAAgB,CAAA;QAE3D,IAAI,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC,CAAA;QAC1C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,EAAE,CAAA;QACxB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAM,CAAC,cAAc,CAAA;QACzC,IAAI,KAAK,GAAG,QAAQ,CAAA;QACpB,MAAM,QAAQ,GAAG,CAAC,CAAC,CAAA;QACnB,IAAI,MAAM,GAAgB,EAAE,CAAA;QAC5B,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAA;QAE9B,IAAI,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;YACvB,QAAQ,EAAE,IAAI,CAAA;qBACC,KAAK;;0BAEA,CAAC,CAAc,EAAE,EAAE;gBACjC,MAAM,IAAI,GAAG,CAAC,CAAC,aAA2B,CAAA;gBAE1C,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAI,CAAiB,CAAC,MAM/D,CAAA;gBAED,IAAI,UAAU,GAAG,MAAM,CAAC,UAAU,CAAA;gBAClC,IAAI,UAAU,IAAI,OAAO,UAAU,IAAI,UAAU,EAAE,CAAC;oBAClD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;wBAC1D,OAAM;oBACR,CAAC;gBACH,CAAC;gBAED,IAAI,CAAC,MAAM,GAAG;oBACZ,GAAG,MAAM;oBACT,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK;iBACrB,CAAA;YACH,CAAC;qBACU,OAAO;oBACR,MAAM;sBACJ,QAAQ;mBACX,CAAC,CAAQ,EAAE,EAAE;gBACpB,MAAM,IAAI,GAAG,CAAC,CAAC,aAA2B,CAAA;gBAC1C,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;YAClB,CAAC;oBACS,CAAC,CAAQ,EAAE,EAAE;gBACrB,KAAK,CAAC,KAAK,EAAE,CAAA;YACf,CAAC;gBACK,KAAK,EAAE,CAAQ,EAAE,EAAE;gBACvB,MAAM,IAAI,GAAG,CAAC,CAAC,aAA2B,CAAA;gBAE1C,eAAe;gBACf,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;gBAC5D,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBAC7B,8CAA8C;oBAC9C,2BAA2B;oBAC3B,2CAA2C;oBAC3C,IAAI;oBACJ,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAA;oBACrC,OAAO,KAAK,CAAA;gBACd,CAAC;gBAED,KAAK,CAAC,KAAK,EAAE,CAAA;gBAEb,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,IAAI,EAAE;oBACpB,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE,IAAI,CAAC,MAAM;iBACpB,CAAC,CACH,CAAA;YACH,CAAC;;OAEJ;YACD,MAAM,EAAE,QAAQ,CAAC,IAAI;YACrB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;SAC5C,CAAC,CAAA;IACJ,CAAC;IAED,eAAe;QACb,MAAM,MAAM,GAAG,IAAI,CAAC,KAAM,CAAC,cAAc,CAAA;QACzC,MAAM,QAAQ,GAAG,CAAC,CAAC,CAAA;QACnB,IAAI,MAAM,GAAgB,EAAE,CAAA;QAC5B,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAA;QAE9B,IAAI,KAAK,GAAG,QAAQ,CAAA;QAEpB,IAAI,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAe,CAAA;QAEvE,UAAU,CAAC,OAAO,GAAG,OAAO,CAAA;QAC5B,UAAU,CAAC,MAAM,GAAG,MAAM,CAAA;QAC1B,UAAU,CAAC,QAAQ,GAAG,QAAQ,CAAA;QAE9B,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,MAAM,EAAE;gBACN,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE;oBACP,QAAQ,EAAE,IAAI;oBACd,IAAI,EAAE,OAAO;oBACb,KAAK;iBACN;gBACD,QAAQ,EAAE,CAAC,KAAU,EAAE,EAAE;oBACvB,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE;wBAChD,MAAM,IAAI,GAAG,CAAC,CAAC,aAA2B,CAAA;wBAC1C,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;oBAClB,CAAC,CAAC,CAAA;oBAEF,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE;wBACjD,KAAK,CAAC,KAAK,EAAE,CAAA;oBACf,CAAC,CAAC,CAAA;oBAEF,UAAU,CAAC,gBAAgB,CAAC,IAAI,EAAE,KAAK,EAAE,CAAQ,EAAE,EAAE;;wBACnD,MAAM,IAAI,GAAG,CAAC,CAAC,aAA2B,CAAA;wBAE1C,eAAe;wBACf,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;wBAC5D,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;4BAC7B,MAAM,iBAAiB,GAAG,aAAa,CAAC,CAAC,CAAC,CAAA;4BAC1C,IAAI,iBAAiB,EAAE,CAAC;gCACtB,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,UAAU,iBAAiB,IAAI,CAAC,CAAA;gCACpF,IAAI,YAAY,EAAE,CAAC;oCACjB,CAAC;oCAAC,YAA4B,CAAC,KAAK,EAAE,CAAA;gCACxC,CAAC;4BACH,CAAC;4BACD,OAAO,KAAK,CAAA;wBACd,CAAC;wBAED,IAAI,MAAM,CAAA,MAAA,IAAI,CAAC,QAAQ,qDAAG,IAAI,CAAC,MAAM,CAAC,CAAA,EAAE,CAAC;4BACvC,KAAK,CAAC,KAAK,EAAE,CAAA;wBACf,CAAC;6BAAM,CAAC;4BACN,gBAAgB;4BAChB,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,CAAA;4BAC7B,yCAAyC;wBAC3C,CAAC;oBACH,CAAC,CAAC,CAAA;oBAEF,UAAU,CAAC,gBAAgB,CAAC,cAAc,EAAE,KAAK,EAAE,CAAQ,EAAE,EAAE;wBAC7D,MAAM,IAAI,GAAG,CAAC,CAAC,aAA2B,CAAA;wBAE1C,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAI,CAAiB,CAAC,MAM/D,CAAA;wBAED,IAAI,UAAU,GAAG,MAAM,CAAC,UAAU,CAAA;wBAClC,IAAI,UAAU,IAAI,OAAO,UAAU,IAAI,UAAU,EAAE,CAAC;4BAClD,IAAI,CAAC,CAAC,MAAM,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC;gCAClE,OAAM;4BACR,CAAC;wBACH,CAAC;wBAED,IAAI,CAAC,MAAM,GAAG;4BACZ,GAAG,MAAM;4BACT,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK;yBACrB,CAAA;oBACH,CAAC,CAAC,CAAA;oBAEF,KAAK,CAAC,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;gBAC3B,CAAC;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,uBAAuB,CAAC,eAA4B;;QAClD,MAAM,KAAK,GAAG,QAAQ,CAAA;QACtB,MAAM,YAAY,GAAG,eAAe,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAA;QACnE,YAAY,CAAC,eAAe,CAAC,MAAM,CAAC,CAAA;QAEpC,OAAO,CAAC,IAAI,CAAC;YACX,QAAQ,EAAE,IAAI,CAAA;qBACC,KAAK;UAChB,YAAY;OACf;YACD,MAAM,EAAE,QAAQ,CAAC,IAAI;YACrB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;SAC5C,CAAC,CAAA;QAEF,MAAA,IAAI,CAAC,mBAAmB,qDAAG,YAAY,CAAC,CAAA,CAAC,mBAAmB;IAC9D,CAAC;IAED,kBAAkB,CAAC,eAA4B;QAC7C,MAAM,KAAK,GAAG,QAAQ,CAAA;QACtB,MAAM,YAAY,GAAG,eAAe,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAA;QACnE,YAAY,CAAC,eAAe,CAAC,MAAM,CAAC,CAAA;QAEpC,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,MAAM,EAAE;gBACN,QAAQ,EAAE,YAAY;gBACtB,OAAO,EAAE;oBACP,QAAQ,EAAE,IAAI;oBACd,IAAI,EAAE,OAAO;oBACb,KAAK;iBACN;gBACD,QAAQ,EAAE,IAAI,CAAC,mBAAmB;aACnC;SACF,CAAC,CACH,CAAA;IACH,CAAC;;AA7RM,sBAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,AANY,CAMZ;AAEQ;IAAR,KAAK,EAAE;8CAAkB;AAEE;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA4C;AAC3C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAA8C;AAClB;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;mDAA4B;AACjB;IAAhE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;2DAA2B;AAdhF,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA+R3B","sourcesContent":["import '@material/web/icon/icon.js'\nimport './record-view'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\n\nimport { DataGrist } from '../data-grist'\nimport { ColumnConfig, GristRecord, ValidationReason } from '../types'\nimport { RecordView } from './record-view'\n\n@customElement('ox-record-creator')\nexport class OxRecordCreator extends LitElement {\n  static styles = [\n    css`\n      ::slotted([slot='popup']) {\n        display: none;\n      }\n    `\n  ]\n\n  @state() grist?: DataGrist\n\n  @property({ type: Object }) callback?: (record: GristRecord) => boolean\n  @property({ type: Object }) customPopupCallback?: (popup: any) => boolean\n  @property({ type: Boolean, attribute: 'light-popup' }) lightPopup: boolean = false\n  @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur = false\n\n  constructor() {\n    super()\n\n    this.addEventListener('click', (e: Event) => {\n      e.preventDefault()\n      e.stopPropagation()\n\n      if (this.lightPopup) {\n        this.openLightPopup()\n      } else {\n        this.openPopup()\n      }\n    })\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.grist = this.closest('ox-grist') as DataGrist\n  }\n\n  render() {\n    return html`\n      <slot></slot>\n      <slot name=\"popup\"></slot>\n    `\n  }\n\n  validateRecord(record: GristRecord): { field: string; reason: ValidationReason }[] {\n    const columns = this.grist!.compiledConfig.columns\n    const invalidFields: { field: string; reason: ValidationReason }[] = []\n\n    columns.forEach(column => {\n      if (\n        column.record?.mandatory &&\n        (record[column.name] === undefined || record[column.name] === null || record[column.name] === '')\n      ) {\n        invalidFields.push({\n          field: column.name,\n          reason: ValidationReason.MANDATORY\n        })\n      }\n    })\n\n    return invalidFields\n  }\n\n  openLightPopup() {\n    const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement\n    const slottedElements = slot?.assignedElements({ flatten: true })\n    const originalContent = slottedElements?.[0] as HTMLElement\n\n    if (originalContent) {\n      this.lightPopupCustomCreator(originalContent)\n    } else {\n      this.lightPopupRecordView()\n    }\n  }\n\n  openPopup() {\n    const slot = this.renderRoot?.querySelector(`slot[name='popup']`) as HTMLSlotElement\n    const slottedElements = slot?.assignedElements({ flatten: true })\n    const originalContent = slottedElements?.[0] as HTMLElement\n\n    if (originalContent) {\n      this.popupCustomCreator(originalContent)\n    } else {\n      this.popupRecordView()\n    }\n  }\n\n  lightPopupRecordView() {\n    const config = this.grist!.compiledConfig\n    var title = 'create'\n    const rowIndex = -1\n    var record: GristRecord = {}\n    const columns = config.columns\n\n    var popup = OxPopup.open({\n      template: html`\n        <div title>${title}</div>\n        <ox-record-view\n          @field-change=${(e: CustomEvent) => {\n            const view = e.currentTarget as RecordView\n\n            var { after, before, column, record, row } = (e as CustomEvent).detail as {\n              after: any\n              before: any\n              column: ColumnConfig\n              record: GristRecord\n              row: number\n            }\n\n            var validation = column.validation\n            if (validation && typeof validation == 'function') {\n              if (!validation.call(this, after, before, record, column)) {\n                return\n              }\n            }\n\n            view.record = {\n              ...record,\n              [column.name]: after\n            }\n          }}\n          .columns=${columns}\n          .record=${record}\n          .rowIndex=${rowIndex}\n          @reset=${(e: Event) => {\n            const view = e.currentTarget as RecordView\n            view.record = {}\n          }}\n          @cancel=${(e: Event) => {\n            popup.close()\n          }}\n          @ok=${async (e: Event) => {\n            const view = e.currentTarget as RecordView\n\n            // 레코드 밸리데이션 체크\n            const invalidFields = await this.validateRecord(view.record)\n            if (invalidFields.length > 0) {\n              // const firstInvalidField = invalidFields[0];\n              // if (firstInvalidField) {\n              //   view.setFocus(firstInvalidField.field)\n              // }\n              view.setFocusOnInvalid(invalidFields)\n              return false\n            }\n\n            popup.close()\n\n            this.dispatchEvent(\n              new CustomEvent('ok', {\n                bubbles: true,\n                composed: true,\n                detail: view.record\n              })\n            )\n          }}\n        ></ox-record-view>\n      `,\n      parent: document.body,\n      preventCloseOnBlur: this.preventCloseOnBlur\n    })\n  }\n\n  popupRecordView() {\n    const config = this.grist!.compiledConfig\n    const rowIndex = -1\n    var record: GristRecord = {}\n    const columns = config.columns\n\n    var title = 'create'\n\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\n          },\n          callback: (popup: any) => {\n            recordView.addEventListener('reset', (e: Event) => {\n              const view = e.currentTarget as RecordView\n              view.record = {}\n            })\n\n            recordView.addEventListener('cancel', (e: Event) => {\n              popup.close()\n            })\n\n            recordView.addEventListener('ok', async (e: Event) => {\n              const view = e.currentTarget as RecordView\n\n              // 레코드 밸리데이션 체크\n              const invalidFields = await this.validateRecord(view.record)\n              if (invalidFields.length > 0) {\n                const firstInvalidField = invalidFields[0]\n                if (firstInvalidField) {\n                  const fieldElement = view.renderRoot?.querySelector(`[name=\"${firstInvalidField}\"]`)\n                  if (fieldElement) {\n                    ;(fieldElement as HTMLElement).focus()\n                  }\n                }\n                return false\n              }\n\n              if (await this.callback?.(view.record)) {\n                popup.close()\n              } else {\n                // 밸리데이션 실패 시 처리\n                console.error('레코드 밸리데이션 실패')\n                // 여기에 사용자에게 오류 메시지를 표시하는 로직을 추가할 수 있습니다.\n              }\n            })\n\n            recordView.addEventListener('field-change', async (e: Event) => {\n              const view = e.currentTarget as RecordView\n\n              var { after, before, column, record, row } = (e as CustomEvent).detail as {\n                after: any\n                before: any\n                column: ColumnConfig\n                record: GristRecord\n                row: number\n              }\n\n              var validation = column.validation\n              if (validation && typeof validation == 'function') {\n                if (!(await validation.call(this, after, before, record, column))) {\n                  return\n                }\n              }\n\n              view.record = {\n                ...record,\n                [column.name]: after\n              }\n            })\n\n            popup.onclosed = () => {}\n          }\n        }\n      })\n    )\n  }\n\n  lightPopupCustomCreator(originalContent: HTMLElement) {\n    const title = 'create'\n    const popupContent = originalContent.cloneNode(true) as HTMLElement\n    popupContent.removeAttribute('slot')\n\n    OxPopup.open({\n      template: html`\n        <div title>${title}</div>\n        ${popupContent}\n      `,\n      parent: document.body,\n      preventCloseOnBlur: this.preventCloseOnBlur\n    })\n\n    this.customPopupCallback?.(popupContent) // 사용자 정의 팝업용 콜백 실행\n  }\n\n  popupCustomCreator(originalContent: HTMLElement) {\n    const title = 'create'\n    const popupContent = originalContent.cloneNode(true) as HTMLElement\n    popupContent.removeAttribute('slot')\n\n    document.dispatchEvent(\n      new CustomEvent('open-popup', {\n        detail: {\n          template: popupContent,\n          options: {\n            backdrop: true,\n            size: 'large',\n            title\n          },\n          callback: this.customPopupCallback\n        }\n      })\n    )\n  }\n}\n"]}

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

@@ -1,7 +1,7 @@
 import '@material/web/icon/icon.js';
 import '../data-grid/data-grid-field';
 import { LitElement } from 'lit';
-import { ColumnConfig, GristRecord } from '../types';
+import { ColumnConfig, GristRecord, ValidationReason } from '../types';
 export declare class RecordViewBody extends LitElement {
     static styles: import("lit").CSSResult[];
     columns: ColumnConfig[];
@@ -10,6 +10,11 @@ export declare class RecordViewBody extends LitElement {
     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

@@ -5,6 +5,7 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ZERO_RECORD } from '../configure/zero-config';
 import { recordViewBodyClickHandler } from './event-handlers/record-view-body-click-handler';
+import i18next from 'i18next';
 let RecordViewBody = class RecordViewBody extends LitElement {
     constructor() {
         super(...arguments);
@@ -22,8 +23,31 @@ let RecordViewBody = class RecordViewBody extends LitElement {
         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) {
-        var _a;
         if (event.key === 'Tab') {
             const fields = Array.from(this.renderRoot.querySelectorAll('ox-grid-field[tabstop]'));
             const focused = this.renderRoot.querySelector('ox-grid-field[editing]');
@@ -33,7 +57,8 @@ let RecordViewBody = class RecordViewBody extends LitElement {
                 return; // Let the default behavior happen if it's the last or first element
             }
             event.preventDefault();
-            (_a = fields[nextIndex]) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }));
+            const nextField = fields[nextIndex];
+            nextField && this.setFocus(nextField);
         }
     }
     render() {
@@ -49,7 +74,7 @@ let RecordViewBody = class RecordViewBody extends LitElement {
             }
             let dirtyFields = record['__dirtyfields__'] || {};
             return html `
-            <label ?editable=${editable} ?wide=${wide}>
+            <label ?editable=${editable} ?wide=${wide} data-name=${column.name}>
               <span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span>
               <md-icon>edit</md-icon>
             </label>
@@ -149,7 +174,21 @@ RecordViewBody.styles = [
         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;

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

@@ -1 +1 @@
-{"version":3,"file":"record-view-body.js","sourceRoot":"","sources":["../../../src/record-view/record-view-body.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,iDAAiD,CAAA;AAGrF,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAkHsB,YAAO,GAAmB,EAAE,CAAA;QAC3B,WAAM,GAAgB,WAAW,CAAA;QACjC,aAAQ,GAAW,CAAC,CAAC,CAAA;IA4EnD,CAAC;IAxEC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QAElC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACjD,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,0BAA0B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;IACtD,CAAC;IAED,UAAU,CAAC,KAAoB;;QAC7B,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YACxB,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC,CAAA;YACrF,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAA;YACvE,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK,OAAO,CAAC,CAAA;YAEjE,IAAI,SAAS,GAAG,YAAY,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;YAExD,IAAI,SAAS,IAAI,MAAM,CAAC,MAAM,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;gBAChD,OAAM,CAAC,oEAAoE;YAC7E,CAAC;YAED,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAA,MAAM,CAAC,SAAS,CAAC,0CAAE,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAC/F,CAAC;IACH,CAAC;IAED,MAAM;QACJ,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAA;QACvF,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM,CAAA;QACxB,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;QAE5B,OAAO,IAAI,CAAA;;UAEL,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC9B,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;YACjD,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;gBACnC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAA;YACrF,CAAC;YAED,IAAI,WAAW,GAAG,MAAM,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAA;YAEjD,OAAO,IAAI,CAAA;+BACU,QAAQ,UAAU,IAAI;sBAC/B,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;;;;0BAI5C,QAAQ;wBACV,MAAM;wBACN,MAAM;uBACP,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC;uBACnB,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC;yBACxB,CAAC,CAAC,QAAQ;sBACb,IAAI;;WAEf,CAAA;QACH,CAAC,CAAC;;KAEL,CAAA;IACH,CAAC;IAED,YAAY,CAAC,MAAoB;QAC/B,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,MAAM,CAAA;QAChC,IAAI,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;QAEvC,OAAO,IAAI,CAAA,IAAI,KAAK,GAAG,CAAA;IACzB,CAAC;;AA9LM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6GF;CACF,AA/GY,CA+GZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CAA6B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AApHtC,cAAc;IAD1B,aAAa,CAAC,qBAAqB,CAAC;GACxB,cAAc,CAgM1B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../data-grid/data-grid-field'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\nimport { recordViewBodyClickHandler } from './event-handlers/record-view-body-click-handler'\n\n@customElement('ox-record-view-body')\nexport class RecordViewBody extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        justify-content: center;\n      }\n\n      div[content] {\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        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      @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  _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      fields[nextIndex]?.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }))\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, mandatory, wide } = column.record\n          if (typeof editable === 'function') {\n            editable = editable.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}>\n              <span>${mandatory ? '*' : ''}${this._renderLabel(column)}</span>\n              <md-icon>edit</md-icon>\n            </label>\n            <ox-grid-field\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"]}
+{"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'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord, ValidationReason } from '../types'\nimport { recordViewBodyClickHandler } from './event-handlers/record-view-body-click-handler'\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        justify-content: center;\n      }\n\n      div[content] {\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        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\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, mandatory, wide } = column.record\n          if (typeof editable === 'function') {\n            editable = editable.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              .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.d.ts

@@ -3,14 +3,20 @@ import './record-view-body';
 import '@operato/input/ox-input-file.js';
 import '../data-grid/data-grid-field';
 import { LitElement } from 'lit';
-import { ColumnConfig, GristRecord } from '../types';
+import { ColumnConfig, GristRecord, ValidationReason } from '../types';
+import { RecordViewBody } from './record-view-body';
 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

@@ -4,7 +4,7 @@ import './record-view-body';
 import '@operato/input/ox-input-file.js';
 import '../data-grid/data-grid-field';
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { ScrollbarStyles } from '@operato/styles';
 import { ZERO_RECORD } from '../configure/zero-config';
 let RecordView = class RecordView extends LitElement {
@@ -28,6 +28,9 @@ let RecordView = class RecordView extends LitElement {
     firstUpdated() {
         this.setAttribute('tabindex', '0');
     }
+    setFocusOnInvalid(invalidFields) {
+        this.body.setFocusOnInvalid(invalidFields);
+    }
     onReset() {
         this.focus();
         this.dispatchEvent(new CustomEvent('reset', {
@@ -104,6 +107,9 @@ __decorate([
 __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);

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

@@ -1 +1 @@
-{"version":3,"file":"record-view.js","sourceRoot":"","sources":["../../../src/record-view/record-view.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iCAAiC,CAAA;AACxC,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAI/C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAkDsB,YAAO,GAAmB,EAAE,CAAA;QAC3B,WAAM,GAAgB,WAAW,CAAA;QACjC,aAAQ,GAAW,CAAC,CAAC,CAAA;IA+CnD,CAAC;IA7CC,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,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;;AAjGM,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;AApDtC,UAAU;IADtB,aAAa,CAAC,gBAAgB,CAAC;GACnB,UAAU,CAmGtB","sourcesContent":["import '@material/web/icon/icon.js'\nimport './record-view-body'\nimport '@operato/input/ox-input-file.js'\nimport '../data-grid/data-grid-field'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { ZERO_RECORD } from '../configure/zero-config'\nimport { ColumnConfig, GristRecord } from '../types'\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  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  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"]}
+{"version":3,"file":"record-view.js","sourceRoot":"","sources":["../../../src/record-view/record-view.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iCAAiC,CAAA;AACxC,OAAO,8BAA8B,CAAA;AAErC,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,0BAA0B,CAAA;AAM/C,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 './record-view-body'\nimport '@operato/input/ox-input-file.js'\nimport '../data-grid/data-grid-field'\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'\nimport { ColumnConfig, GristRecord, ValidationReason } from '../types'\n\nimport { RecordViewBody } from './record-view-body'\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/types.d.ts

@@ -687,3 +687,9 @@ export type FilterPreference = {
     hidden?: boolean;
     value?: any;
 };
+export declare enum ValidationReason {
+    MANDATORY = "MANDATORY",
+    FORMAT = "FORMAT",
+    RANGE = "RANGE",
+    UNIQUE = "UNIQUE"
+}

package/dist/src/types.js

@@ -13,4 +13,11 @@ export var InheritedValueType;
     InheritedValueType["Include"] = "Include";
     InheritedValueType["Only"] = "Only";
 })(InheritedValueType || (InheritedValueType = {}));
+export var ValidationReason;
+(function (ValidationReason) {
+    ValidationReason["MANDATORY"] = "MANDATORY";
+    ValidationReason["FORMAT"] = "FORMAT";
+    ValidationReason["RANGE"] = "RANGE";
+    ValidationReason["UNIQUE"] = "UNIQUE";
+})(ValidationReason || (ValidationReason = {}));
 //# sourceMappingURL=types.js.map