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

package/dist/src/personalizer/ox-grist-personalizer.js

@@ -0,0 +1,212 @@
+import { __decorate } from "tslib";
+import '@material/web/button/outlined-button.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { OxPopupList } from '@operato/popup';
+let OxGristPersonalizer = class OxGristPersonalizer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.debug = false;
+    }
+    render() {
+        return html `
+      <md-icon
+        @click=${(e) => {
+            const grist = this.closest('ox-grist');
+            const { config, compiledConfig, sorters, pagination, mode } = grist;
+            const { columns: compiledColumns } = compiledConfig;
+            const columns = compiledColumns
+                .filter(ccolumn => {
+                const column = config.columns.find((column) => column.name == ccolumn.name);
+                return column && column.name && column.type !== 'gutter' && !column.hidden && !column.unusable;
+            })
+                .map(column => compiledColumns.find(compiledColumn => compiledColumn.name == column.name));
+            this.preference = {
+                columns: columns.map(column => {
+                    return {
+                        name: column.name,
+                        hidden: column.hidden,
+                        width: column.width
+                    };
+                }),
+                sorters,
+                pagination: {
+                    ...pagination,
+                    limit: grist.getCurrentLimit()
+                },
+                mode
+            };
+            const template = html `
+            <div class="personalizer-header" slot="header">
+              <div
+                style=${`
+                  display: flex;
+                  align-items: center;
+                  margin: 0 0 0 auto;
+                  min-height: 1.4em;
+                  color: var(--ox-grist-p13n-button-color, var(--md-sys-color-on-primary));
+                  background-color: var(--ox-grist-p13n-button-background-color, var(--md-sys-color-primary));
+                  border-radius: var(--md-sys-shape-corner-small);
+                  padding: 0 var(--spacing-small);
+                  cursor: pointer;
+                `}
+                @click=${async (e) => {
+                if (grist.personalConfigProvider) {
+                    const { mode, columns, sorters, pagination } = this.preference || {};
+                    grist.personalConfig = this.preference = await grist.personalConfigProvider.save({
+                        mode,
+                        columns,
+                        sorters,
+                        pagination
+                    });
+                }
+                popup.close();
+            }}
+              >
+                ${String(i18next.t('button.save'))}
+              </div>
+              <div
+                style=${`
+                  display: flex;
+                  align-items: center;
+                  margin: 0 0 0 var(--spacing-small, 4px);
+                  min-height: 1.4em;
+                  color: var(--ox-grist-p13n-button-color, var(--md-sys-color-on-primary));
+                  background-color: var(--ox-grist-p13n-button-background-color, var(--md-sys-color-primary));
+                  border-radius: var(--md-sys-shape-corner-small);
+                  padding: 0 var(--spacing-small);
+                  cursor: pointer;
+                `}
+                @click=${async (e) => {
+                if (grist.personalConfigProvider) {
+                    grist.personalConfig = this.preference = {};
+                    await grist.personalConfigProvider.reset();
+                }
+                popup.close();
+            }}
+              >
+                ${String(i18next.t('button.delete'))}
+              </div>
+              <md-icon
+                style=${`
+                  --md-icon-size: 1.2em;
+                  margin-left: var(--spacing-tiny, 2px);
+                  cursor: pointer;
+                `}
+                @click=${async (e) => popup.close()}
+                title=${String(i18next.t('button.close'))}
+                >close</md-icon
+              >
+            </div>
+
+            ${columns.map(column => html `
+                <ox-checkbox label="checkbox" ?checked=${!column.hidden} value=${column.name} option
+                  >${column.header.renderer(column)}<span
+                    style="position: absolute; right: 10px; cursor: row-resize;opacity:.5"
+                    handle
+                    >☰</span
+                  ></ox-checkbox
+                >
+              `)}
+          `;
+            const popup = OxPopupList.open({
+                template,
+                multiple: true,
+                sortable: true,
+                debug: this.debug,
+                attrSelected: 'checked',
+                top: e.pageY,
+                left: e.pageX,
+                styles: css `
+              :host {
+                width: 240px;
+                min-height: 300px;
+                max-height: 80%;
+                overflow: auto;
+              }
+
+              ::slotted(.personalizer-header) {
+                --md-icon-size: 1.4em;
+
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                text-transform: capitalize;
+                box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
+              }
+
+              ::slotted([option]) {
+                position: relative;
+                user-select: none;
+              }
+            `
+            });
+            popup.onselect = (e) => {
+                var _a;
+                const selected = e.detail;
+                const pconfig = grist.personalConfig || {};
+                const pcolumns = ((_a = this.preference) === null || _a === void 0 ? void 0 : _a.columns) || columns;
+                pconfig.columns = pcolumns.map(column => {
+                    return {
+                        name: column.name,
+                        hidden: selected.indexOf(column.name) == -1,
+                        width: column.width
+                    };
+                });
+                this.preference = pconfig;
+                grist.personalConfig = this.preference;
+                grist.applyUpdatedConfiguration();
+            };
+            popup.addEventListener('sorted', (e) => {
+                const sorted = e.detail;
+                const pconfig = grist.personalConfig || {};
+                pconfig.columns = sorted.map(element => {
+                    var _a;
+                    const name = element.value;
+                    return {
+                        name,
+                        hidden: !element.hasAttribute('checked'),
+                        width: (_a = columns.find(column => column.name == name)) === null || _a === void 0 ? void 0 : _a.width
+                    };
+                });
+                this.preference = pconfig;
+                grist.personalConfig = this.preference;
+                grist.applyUpdatedConfiguration();
+            });
+        }}
+        >settings</md-icon
+      >
+    `;
+    }
+};
+OxGristPersonalizer.styles = [
+    css `
+      md-icon {
+        --md-icon-size: 14px;
+        width: 16px;
+        height: 16px;
+        color: var(--ox-grist-p13n-color, var(--md-sys-color-on-primary));
+        background-color: var(--ox-grist-p13n-background-color, var(--md-sys-color-primary));
+        border-radius: 0px 0px 7px 7px;
+        cursor: pointer;
+        padding-top: var(--spacing-small);
+
+        &:hover {
+          color: var(--ox-grist-p13n-hover-color, var(--md-sys-color-on-primary));
+          background-color: var(--ox-grist-p13n-hover-background-color, var(--md-sys-color-surface-tint));
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Boolean, attribute: true })
+], OxGristPersonalizer.prototype, "debug", void 0);
+__decorate([
+    state()
+], OxGristPersonalizer.prototype, "preference", void 0);
+OxGristPersonalizer = __decorate([
+    customElement('ox-grist-personalizer')
+], OxGristPersonalizer);
+export { OxGristPersonalizer };
+//# sourceMappingURL=ox-grist-personalizer.js.map

package/dist/src/personalizer/ox-grist-personalizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-grist-personalizer.js","sourceRoot":"","sources":["../../../src/personalizer/ox-grist-personalizer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/outlined-button.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { OxPopupList } from '@operato/popup'\nimport { OxCheckbox } from '@operato/input'\n\nimport { ColumnConfig, PersonalGristPreference } from '../types.js'\nimport { DataGrist } from '../data-grist.js'\n\n@customElement('ox-grist-personalizer')\nexport class OxGristPersonalizer extends LitElement {\n  static styles = [\n    css`\n      md-icon {\n        --md-icon-size: 14px;\n        width: 16px;\n        height: 16px;\n        color: var(--ox-grist-p13n-color, var(--md-sys-color-on-primary));\n        background-color: var(--ox-grist-p13n-background-color, var(--md-sys-color-primary));\n        border-radius: 0px 0px 7px 7px;\n        cursor: pointer;\n        padding-top: var(--spacing-small);\n\n        &:hover {\n          color: var(--ox-grist-p13n-hover-color, var(--md-sys-color-on-primary));\n          background-color: var(--ox-grist-p13n-hover-background-color, var(--md-sys-color-surface-tint));\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: true }) debug: boolean = false\n\n  @state() private preference?: PersonalGristPreference\n\n  render() {\n    return html`\n      <md-icon\n        @click=${(e: MouseEvent) => {\n          const grist = this.closest('ox-grist') as DataGrist\n\n          const { config, compiledConfig, sorters, pagination, mode } = grist\n          const { columns: compiledColumns } = compiledConfig\n\n          const columns = compiledColumns\n            .filter(ccolumn => {\n              const column = config.columns.find((column: Partial<ColumnConfig>) => column.name == ccolumn.name)\n              return column && column.name && column.type !== 'gutter' && !column.hidden && !column.unusable\n            })\n            .map(column => compiledColumns.find(compiledColumn => compiledColumn.name == column.name)!)\n\n          this.preference = {\n            columns: columns.map(column => {\n              return {\n                name: column.name,\n                hidden: column.hidden,\n                width: column.width\n              }\n            }),\n            sorters,\n            pagination: {\n              ...pagination,\n              limit: grist.getCurrentLimit()\n            },\n            mode\n          }\n\n          const template = html`\n            <div class=\"personalizer-header\" slot=\"header\">\n              <div\n                style=${`\n                  display: flex;\n                  align-items: center;\n                  margin: 0 0 0 auto;\n                  min-height: 1.4em;\n                  color: var(--ox-grist-p13n-button-color, var(--md-sys-color-on-primary));\n                  background-color: var(--ox-grist-p13n-button-background-color, var(--md-sys-color-primary));\n                  border-radius: var(--md-sys-shape-corner-small);\n                  padding: 0 var(--spacing-small);\n                  cursor: pointer;\n                `}\n                @click=${async (e: MouseEvent) => {\n                  if (grist.personalConfigProvider) {\n                    const { mode, columns, sorters, pagination } = this.preference || {}\n                    grist.personalConfig = this.preference = await grist.personalConfigProvider.save({\n                      mode,\n                      columns,\n                      sorters,\n                      pagination\n                    })\n                  }\n                  popup.close()\n                }}\n              >\n                ${String(i18next.t('button.save'))}\n              </div>\n              <div\n                style=${`\n                  display: flex;\n                  align-items: center;\n                  margin: 0 0 0 var(--spacing-small, 4px);\n                  min-height: 1.4em;\n                  color: var(--ox-grist-p13n-button-color, var(--md-sys-color-on-primary));\n                  background-color: var(--ox-grist-p13n-button-background-color, var(--md-sys-color-primary));\n                  border-radius: var(--md-sys-shape-corner-small);\n                  padding: 0 var(--spacing-small);\n                  cursor: pointer;\n                `}\n                @click=${async (e: MouseEvent) => {\n                  if (grist.personalConfigProvider) {\n                    grist.personalConfig = this.preference = {}\n                    await grist.personalConfigProvider.reset()\n                  }\n                  popup.close()\n                }}\n              >\n                ${String(i18next.t('button.delete'))}\n              </div>\n              <md-icon\n                style=${`\n                  --md-icon-size: 1.2em;\n                  margin-left: var(--spacing-tiny, 2px);\n                  cursor: pointer;\n                `}\n                @click=${async (e: MouseEvent) => popup.close()}\n                title=${String(i18next.t('button.close'))}\n                >close</md-icon\n              >\n            </div>\n\n            ${columns.map(\n              column => html`\n                <ox-checkbox label=\"checkbox\" ?checked=${!column.hidden} value=${column.name} option\n                  >${column.header.renderer(column)}<span\n                    style=\"position: absolute; right: 10px; cursor: row-resize;opacity:.5\"\n                    handle\n                    >☰</span\n                  ></ox-checkbox\n                >\n              `\n            )}\n          `\n\n          const popup = OxPopupList.open({\n            template,\n            multiple: true,\n            sortable: true,\n            debug: this.debug,\n            attrSelected: 'checked',\n            top: e.pageY,\n            left: e.pageX,\n            styles: css`\n              :host {\n                width: 240px;\n                min-height: 300px;\n                max-height: 80%;\n                overflow: auto;\n              }\n\n              ::slotted(.personalizer-header) {\n                --md-icon-size: 1.4em;\n\n                display: flex;\n                flex-direction: row;\n                align-items: center;\n                text-transform: capitalize;\n                box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);\n              }\n\n              ::slotted([option]) {\n                position: relative;\n                user-select: none;\n              }\n            `\n          })\n\n          popup.onselect = (e: Event) => {\n            const selected = (e as CustomEvent).detail\n\n            const pconfig: PersonalGristPreference = grist.personalConfig || {}\n            const pcolumns = this.preference?.columns || columns\n\n            pconfig.columns = pcolumns.map(column => {\n              return {\n                name: column.name,\n                hidden: selected.indexOf(column.name) == -1,\n                width: column.width\n              }\n            })\n\n            this.preference = pconfig\n\n            grist.personalConfig = this.preference\n\n            grist.applyUpdatedConfiguration()\n          }\n\n          popup.addEventListener('sorted', (e: Event) => {\n            const sorted = (e as CustomEvent).detail as HTMLElement[]\n\n            const pconfig: PersonalGristPreference = grist.personalConfig || {}\n\n            pconfig.columns = sorted.map(element => {\n              const name = (element as OxCheckbox).value\n              return {\n                name,\n                hidden: !element.hasAttribute('checked'),\n                width: columns.find(column => column.name == name)?.width\n              }\n            })\n\n            this.preference = pconfig\n\n            grist.personalConfig = this.preference\n\n            grist.applyUpdatedConfiguration()\n          })\n        }}\n        >settings</md-icon\n      >\n    `\n  }\n}\n"]}

package/dist/src/record-view/event-handlers/record-view-body-click-handler.d.ts

@@ -0,0 +1,7 @@
+import { RecordViewBody } from '../record-view-body.js';
+/**
+ * ox-record-view-body 의 click handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export declare function recordViewBodyClickHandler(this: RecordViewBody, e: Event): void;

package/dist/src/record-view/event-handlers/record-view-body-click-handler.js

@@ -0,0 +1,27 @@
+/**
+ * ox-record-view-body 의 click handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export function recordViewBodyClickHandler(e) {
+    var _a;
+    e.stopPropagation();
+    /* target should be 'ox-grid-field' */
+    var target = e.target;
+    if (this.currentTarget) {
+        this.focus();
+        this.currentTarget.removeAttribute('editing');
+    }
+    let editable = (_a = target === null || target === void 0 ? void 0 : target.column) === null || _a === void 0 ? void 0 : _a.record.editable;
+    if (typeof editable === 'function') {
+        editable = editable.call(this, target.value, target.column, target.record, target.rowIndex, this);
+    }
+    if (target.tagName !== 'OX-GRID-FIELD' || !editable) {
+        this.focus();
+        this.currentTarget = null;
+        return;
+    }
+    this.currentTarget = target;
+    target.setAttribute('editing', 'true');
+}
+//# sourceMappingURL=record-view-body-click-handler.js.map

package/dist/src/record-view/event-handlers/record-view-body-click-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-view-body-click-handler.js","sourceRoot":"","sources":["../../../../src/record-view/event-handlers/record-view-body-click-handler.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,MAAM,UAAU,0BAA0B,CAAuB,CAAQ;;IACvE,CAAC,CAAC,eAAe,EAAE,CAAA;IAEnB,sCAAsC;IACtC,IAAI,MAAM,GAAG,CAAC,CAAC,MAAuB,CAAA;IAEtC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,IAAI,CAAC,KAAK,EAAE,CAAA;QACZ,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;IAC/C,CAAC;IAED,IAAI,QAAQ,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,0CAAE,MAAM,CAAC,QAAQ,CAAA;IAC9C,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACnC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;IACnG,CAAC;IAED,IAAI,MAAM,CAAC,OAAO,KAAK,eAAe,IAAI,CAAC,QAAQ,EAAE,CAAC;QACpD,IAAI,CAAC,KAAK,EAAE,CAAA;QACZ,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;QACzB,OAAM;IACR,CAAC;IAED,IAAI,CAAC,aAAa,GAAG,MAAM,CAAA;IAC3B,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AACxC,CAAC","sourcesContent":["import { DataGridField } from '../../data-grid/data-grid-field.js'\nimport { RecordViewBody } from '../record-view-body.js'\n\n/**\n * ox-record-view-body 의 click handler\n *\n * - handler의 this 는 ox-record-view-body임.\n */\nexport function recordViewBodyClickHandler(this: RecordViewBody, e: Event): void {\n  e.stopPropagation()\n\n  /* target should be 'ox-grid-field' */\n  var target = e.target as DataGridField\n\n  if (this.currentTarget) {\n    this.focus()\n    this.currentTarget.removeAttribute('editing')\n  }\n\n  let editable = target?.column?.record.editable\n  if (typeof editable === 'function') {\n    editable = editable.call(this, target.value, target.column, target.record, target.rowIndex, this)\n  }\n\n  if (target.tagName !== 'OX-GRID-FIELD' || !editable) {\n    this.focus()\n    this.currentTarget = null\n    return\n  }\n\n  this.currentTarget = target\n  target.setAttribute('editing', 'true')\n}\n"]}

package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.d.ts

@@ -0,0 +1,7 @@
+import { RecordViewBody } from '../record-view-body.js';
+/**
+ * ox-record-view-body 의 keydown handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export declare function recordViewBodyKeydownHandler(this: RecordViewBody, e: Event): Promise<void>;

package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.js

@@ -0,0 +1,22 @@
+/**
+ * ox-record-view-body 의 keydown handler
+ *
+ * - handler의 this 는 ox-record-view-body임.
+ */
+export async function recordViewBodyKeydownHandler(e) {
+    switch (e.key) {
+        case 'Esc':
+        case 'Escape':
+        /* TODO 편집이 취소되어야 한다. */
+        case 'Enter':
+            /* 먼저, focus를 옮겨놓아야, focusout 으로 인해서 popup이 닫히는 것을 방지할 수 있다. */
+            this.focus();
+            if (this.currentTarget) {
+                this.currentTarget.removeAttribute('editing');
+            }
+            this.currentTarget = null;
+            break;
+        default:
+    }
+}
+//# sourceMappingURL=record-view-body-keydown-handler.js.map

package/dist/src/record-view/event-handlers/record-view-body-keydown-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-view-body-keydown-handler.js","sourceRoot":"","sources":["../../../../src/record-view/event-handlers/record-view-body-keydown-handler.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,KAAK,UAAU,4BAA4B,CAAuB,CAAQ;IAC/E,QAAS,CAAmB,CAAC,GAAG,EAAE,CAAC;QACjC,KAAK,KAAK,CAAC;QACX,KAAK,QAAQ,CAAC;QACd,wBAAwB;QACxB,KAAK,OAAO;YACV,+DAA+D;YAC/D,IAAI,CAAC,KAAK,EAAE,CAAA;YAEZ,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;YAC/C,CAAC;YAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;YAEzB,MAAK;QACP,QAAQ;IACV,CAAC;AACH,CAAC","sourcesContent":["import { RecordViewBody } from '../record-view-body.js'\n\n/**\n * ox-record-view-body 의 keydown handler\n *\n * - handler의 this 는 ox-record-view-body임.\n */\nexport async function recordViewBodyKeydownHandler(this: RecordViewBody, e: Event): Promise<void> {\n  switch ((e as KeyboardEvent).key) {\n    case 'Esc':\n    case 'Escape':\n    /* TODO 편집이 취소되어야 한다. */\n    case 'Enter':\n      /* 먼저, focus를 옮겨놓아야, focusout 으로 인해서 popup이 닫히는 것을 방지할 수 있다. */\n      this.focus()\n\n      if (this.currentTarget) {\n        this.currentTarget.removeAttribute('editing')\n      }\n\n      this.currentTarget = null\n\n      break\n    default:\n  }\n}\n"]}

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

@@ -0,0 +1,2 @@
+export * from './record-view.js';
+export * from './ox-record-creator.js';

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

@@ -0,0 +1,3 @@
+export * from './record-view.js';
+export * from './ox-record-creator.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/record-view/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,wBAAwB,CAAA","sourcesContent":["export * from './record-view.js'\nexport * from './ox-record-creator.js'\n"]}

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

@@ -0,0 +1,26 @@
+import '@material/web/icon/icon.js';
+import './record-view.js';
+import { LitElement } from 'lit';
+import { DataGrist } from '../data-grist.js';
+import { GristRecord, ValidationReason } from '../types.js';
+export declare class OxRecordCreator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    grist?: DataGrist;
+    callback?: (record: GristRecord) => boolean;
+    customPopupCallback?: (popup: any) => boolean;
+    lightPopup: boolean;
+    preventCloseOnBlur: boolean;
+    constructor();
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    validateRecord(record: GristRecord): {
+        field: string;
+        reason: ValidationReason;
+    }[];
+    openLightPopup(): void;
+    openPopup(): void;
+    lightPopupRecordView(): void;
+    popupRecordView(): void;
+    lightPopupCustomCreator(originalContent: HTMLElement): void;
+    popupCustomCreator(originalContent: HTMLElement): void;
+}

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

@@ -0,0 +1,247 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import './record-view.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { OxPopup } from '@operato/popup';
+import { ValidationReason } from '../types.js';
+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
+            .filter(column => !column.hidden)
+            .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) {
+                    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;
+                        const view = e.currentTarget;
+                        const invalidFields = await this.validateRecord(view.record);
+                        if (invalidFields.length > 0) {
+                            view.setFocusOnInvalid(invalidFields);
+                            return false;
+                        }
+                        if (await ((_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, view.record))) {
+                            popup.close();
+                        }
+                        else {
+                            console.error('validation failed');
+                        }
+                    });
+                    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":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './record-view.js'\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.js'\nimport { ColumnConfig, GristRecord, ValidationReason } from '../types.js'\nimport { RecordView } from './record-view.js'\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\n      .filter(column => !column.hidden)\n      .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            const invalidFields = await this.validateRecord(view.record)\n            if (invalidFields.length > 0) {\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              const invalidFields = await this.validateRecord(view.record)\n              if (invalidFields.length > 0) {\n                view.setFocusOnInvalid(invalidFields)\n                return false\n              }\n\n              if (await this.callback?.(view.record)) {\n                popup.close()\n              } else {\n                console.error('validation failed')\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"]}