@operato/app 1.0.0-alpha.2 → 1.0.0-alpha.22

package/dist/src/grist/index.js

@@ -2,8 +2,10 @@ import { registerEditor, registerRenderer } from '@operato/data-grist';
 import { CodeEditor } from './code-editor';
 import { IdInput } from './id-input.js';
 import { IdRenderer } from './id-renderer.js';
+import { ObjectEditor } from './object-editor';
 /* register grist renderer/editor for id */
 registerEditor('id', IdInput);
+registerEditor('object', ObjectEditor);
 registerEditor('code', CodeEditor);
 registerRenderer('id', IdRenderer);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/grist/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE7C,2CAA2C;AAC3C,cAAc,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AAC7B,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAElC,gBAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA","sourcesContent":["import { registerEditor, registerRenderer } from '@operato/data-grist'\n\nimport { CodeEditor } from './code-editor'\nimport { IdInput } from './id-input.js'\nimport { IdRenderer } from './id-renderer.js'\n\n/* register grist renderer/editor for id */\nregisterEditor('id', IdInput)\nregisterEditor('code', CodeEditor)\n\nregisterRenderer('id', IdRenderer)\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/grist/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,2CAA2C;AAC3C,cAAc,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AAC7B,cAAc,CAAC,QAAQ,EAAE,YAAmB,CAAC,CAAA;AAC7C,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAElC,gBAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA","sourcesContent":["import { registerEditor, registerRenderer } from '@operato/data-grist'\n\nimport { CodeEditor } from './code-editor'\nimport { IdInput } from './id-input.js'\nimport { IdRenderer } from './id-renderer.js'\nimport { ObjectEditor } from './object-editor'\n\n/* register grist renderer/editor for id */\nregisterEditor('id', IdInput)\nregisterEditor('object', ObjectEditor as any)\nregisterEditor('code', CodeEditor)\n\nregisterRenderer('id', IdRenderer)\n"]}

package/dist/src/grist/object-editor.d.ts

@@ -1,5 +1,5 @@
 import '@material/mwc-icon';
-import '../../elements/object-selector';
+import './object-selector.js';
 import { ColumnConfig, GristRecord } from '@operato/data-grist';
 import { LitElement, TemplateResult } from 'lit';
 export declare class ObjectEditor extends LitElement {

package/dist/src/grist/object-editor.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import '@material/mwc-icon';
-import '../../elements/object-selector';
+import './object-selector.js';
 import { ZERO_COLUMN, ZERO_RECORD } from '@operato/data-grist';
 import { LitElement, css, html } from 'lit';
 import { openPopup } from '@operato/layout';

package/dist/src/grist/object-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"object-editor.js","sourceRoot":"","sources":["../../../src/grist/object-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport '../../elements/object-selector'\n\nimport { ColumnConfig, GristData, GristRecord, ZERO_COLUMN, ZERO_CONFIG, ZERO_RECORD } from '@operato/data-grist'\nimport { LitElement, TemplateResult, css, html } from 'lit'\nimport { PopupHandle, openPopup } from '@operato/layout'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-object-editor')\nexport class ObjectEditor extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-flow: row nowrap;\n\n      padding: 7px 0px;\n      box-sizing: border-box;\n\n      width: 100%;\n      height: 100%;\n\n      border: 0;\n      background-color: transparent;\n\n      font: var(--grist-object-editor-font);\n      color: var(--grist-object-editor-color);\n      justify-content: inherit;\n    }\n\n    span {\n      display: flex;\n      flex: auto;\n\n      justify-content: inherit;\n    }\n\n    mwc-icon {\n      width: 20px;\n      font-size: 1.5em;\n      margin-left: auto;\n    }\n  `\n\n  @property({ type: Object }) value: { [prop: string]: any } = {}\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) row?: number\n\n  private popup?: PopupHandle\n  private template?: TemplateResult\n\n  render() {\n    var value = this.value || {}\n\n    var { nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}\n    var name, description\n    if (typeof nameField === 'function') {\n      name = nameField(value)\n    } else {\n      name = value[nameField]\n    }\n\n    if (typeof descriptionField === 'function') {\n      description = descriptionField(value)\n    } else {\n      description = value[descriptionField] && `(${value[descriptionField]})`\n    }\n\n    return html`\n      ${!value ? html`` : html` <span>${name || ''}${description || ''}</span> `}\n      <mwc-icon>arrow_drop_down</mwc-icon>\n    `\n  }\n\n  async firstUpdated() {\n    this.value = this.record[this.column.name]\n    this.template = ((this.column.record || {}).options || {}).template\n\n    await this.updateComplete\n\n    this.renderRoot.addEventListener('click', e => {\n      e.stopPropagation()\n\n      this.openSelector()\n    })\n  }\n\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    const confirmCallback = (selected: { [field: string]: any }) => {\n      var { idField = 'id', nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}\n\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: this.value,\n            after: {\n              ...(this.column.record.options.select || [])\n                .map((field: any) => field.name)\n                .reduce((obj: { [field: string]: any }, fieldName: string) => {\n                  return (obj = {\n                    ...obj,\n                    [fieldName]: selected[fieldName]\n                  })\n                }, {} as { [field: string]: any }),\n              [idField]: selected[idField],\n              [nameField]: selected[nameField],\n              [descriptionField]: selected[descriptionField]\n            },\n            record: this.record,\n            column: this.column,\n            row: this.row\n          }\n        })\n      )\n    }\n\n    var value = this.value || {}\n    var valueField: string | ((item: any) => any) = this.column.record.options.valueField || 'id'\n    var actualValue\n    if (typeof valueField === 'function') {\n      actualValue = valueField(value)\n    } else {\n      actualValue = value[valueField]\n    }\n\n    var template =\n      this.template ||\n      html`\n        <object-selector\n          .value=${actualValue}\n          .confirmCallback=${confirmCallback.bind(this)}\n          .queryName=${this.column.record.options.queryName}\n          .select=${this.column.record.options.select}\n          .list=${this.column.record.options.list}\n          .basicArgs=${this.column.record.options.basicArgs}\n          .valueField=${this.column.record.options.valueField}\n        ></object-selector>\n      `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.select_item')\n    })\n  }\n}\n"]}
+{"version":3,"file":"object-editor.js","sourceRoot":"","sources":["../../../src/grist/object-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './object-selector.js'\n\nimport { ColumnConfig, GristData, GristRecord, ZERO_COLUMN, ZERO_CONFIG, ZERO_RECORD } from '@operato/data-grist'\nimport { LitElement, TemplateResult, css, html } from 'lit'\nimport { PopupHandle, openPopup } from '@operato/layout'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-object-editor')\nexport class ObjectEditor extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-flow: row nowrap;\n\n      padding: 7px 0px;\n      box-sizing: border-box;\n\n      width: 100%;\n      height: 100%;\n\n      border: 0;\n      background-color: transparent;\n\n      font: var(--grist-object-editor-font);\n      color: var(--grist-object-editor-color);\n      justify-content: inherit;\n    }\n\n    span {\n      display: flex;\n      flex: auto;\n\n      justify-content: inherit;\n    }\n\n    mwc-icon {\n      width: 20px;\n      font-size: 1.5em;\n      margin-left: auto;\n    }\n  `\n\n  @property({ type: Object }) value: { [prop: string]: any } = {}\n  @property({ type: Object }) column: ColumnConfig = ZERO_COLUMN\n  @property({ type: Object }) record: GristRecord = ZERO_RECORD\n  @property({ type: Number }) row?: number\n\n  private popup?: PopupHandle\n  private template?: TemplateResult\n\n  render() {\n    var value = this.value || {}\n\n    var { nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}\n    var name, description\n    if (typeof nameField === 'function') {\n      name = nameField(value)\n    } else {\n      name = value[nameField]\n    }\n\n    if (typeof descriptionField === 'function') {\n      description = descriptionField(value)\n    } else {\n      description = value[descriptionField] && `(${value[descriptionField]})`\n    }\n\n    return html`\n      ${!value ? html`` : html` <span>${name || ''}${description || ''}</span> `}\n      <mwc-icon>arrow_drop_down</mwc-icon>\n    `\n  }\n\n  async firstUpdated() {\n    this.value = this.record[this.column.name]\n    this.template = ((this.column.record || {}).options || {}).template\n\n    await this.updateComplete\n\n    this.renderRoot.addEventListener('click', e => {\n      e.stopPropagation()\n\n      this.openSelector()\n    })\n  }\n\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    const confirmCallback = (selected: { [field: string]: any }) => {\n      var { idField = 'id', nameField = 'name', descriptionField = 'description' } = this.column.record.options || {}\n\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: this.value,\n            after: {\n              ...(this.column.record.options.select || [])\n                .map((field: any) => field.name)\n                .reduce((obj: { [field: string]: any }, fieldName: string) => {\n                  return (obj = {\n                    ...obj,\n                    [fieldName]: selected[fieldName]\n                  })\n                }, {} as { [field: string]: any }),\n              [idField]: selected[idField],\n              [nameField]: selected[nameField],\n              [descriptionField]: selected[descriptionField]\n            },\n            record: this.record,\n            column: this.column,\n            row: this.row\n          }\n        })\n      )\n    }\n\n    var value = this.value || {}\n    var valueField: string | ((item: any) => any) = this.column.record.options.valueField || 'id'\n    var actualValue\n    if (typeof valueField === 'function') {\n      actualValue = valueField(value)\n    } else {\n      actualValue = value[valueField]\n    }\n\n    var template =\n      this.template ||\n      html`\n        <object-selector\n          .value=${actualValue}\n          .confirmCallback=${confirmCallback.bind(this)}\n          .queryName=${this.column.record.options.queryName}\n          .select=${this.column.record.options.select}\n          .list=${this.column.record.options.list}\n          .basicArgs=${this.column.record.options.basicArgs}\n          .valueField=${this.column.record.options.valueField}\n        ></object-selector>\n      `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.select_item')\n    })\n  }\n}\n"]}

package/dist/src/grist/parameters-editor-builder.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+export {};

package/dist/src/grist/parameters-editor-builder.js

@@ -0,0 +1,118 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { OxPropertyEditor } from '@operato/property-editor';
+import { customElement, property } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin';
+import { store } from '@operato/shell';
+/**
+모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.
+
+Example:
+
+    <ox-parameters-editor-builder value="{{value}}">
+      <label>Center X</label>
+      <input type="number" .value="${value.cx}">
+      <label>Width</label>
+      <input type="number" .value="${value.width}">
+    </ox-parameters-editor-builder>
+*/
+const DEFAULT_VALUE = {
+    legend: '',
+    number: 0,
+    angle: 0,
+    string: '',
+    text: '',
+    textarea: '',
+    checkbox: false,
+    select: '',
+    color: '#000000',
+    'solidcolor-stops': null,
+    'gradientcolor-stops': null,
+    'gltf-selector': '',
+    'image-selector': '',
+    multiplecolor: null,
+    editortable: null,
+    imageselector: '',
+    options: null,
+    date: null
+};
+let ParametersEditorBuilder = class ParametersEditorBuilder extends connect(store)(LitElement) {
+    render() {
+        return html `<slot></slot>`;
+    }
+    firstUpdated() {
+        this.addEventListener('change', this._onValueChanged.bind(this));
+    }
+    updated(changes) {
+        changes.has('props') && this._onPropsChanged(this.props);
+        changes.has('value') && this._setValues();
+    }
+    _onPropsChanged(props) {
+        this.textContent = '';
+        (props || []).forEach(prop => {
+            let elementType = OxPropertyEditor.getEditor(prop.type);
+            if (!elementType) {
+                console.warn('Property Editor not defined', prop.type);
+                return;
+            }
+            let element = document.createElement(elementType);
+            element.label = prop.label;
+            element.type = prop.type;
+            element.placeholder = prop.placeholder;
+            element.host = this.host;
+            // element.context = this.context
+            element.setAttribute('name', prop.name);
+            if (prop.observe) {
+                element.observe = prop.observe;
+            }
+            element.property = prop.property;
+            element.setAttribute('property-editor', '');
+            this.appendChild(element);
+        });
+    }
+    _setValues() {
+        var value = this.value || {};
+        Array.from(this.querySelectorAll('[name]')).forEach(propertyEditor => {
+            const editor = propertyEditor;
+            let name = editor.getAttribute('name');
+            editor.value = value[name] === undefined ? DEFAULT_VALUE[editor.type] : value[name];
+        });
+    }
+    _getValues() {
+        var value = {};
+        Array.from(this.querySelectorAll('[name]')).forEach(propertyEditor => {
+            const editor = propertyEditor;
+            let name = editor.getAttribute('name');
+            value[name] = editor.value === undefined ? DEFAULT_VALUE[editor.type] : editor.value;
+        });
+        return value;
+    }
+    _onValueChanged(e) {
+        e.stopPropagation();
+        var prop = e.target;
+        if (!prop || !prop.hasAttribute('property-editor')) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('property-change', {
+            bubbles: true,
+            composed: true,
+            detail: this._getValues()
+        }));
+    }
+};
+__decorate([
+    property({ type: Object })
+], ParametersEditorBuilder.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], ParametersEditorBuilder.prototype, "props", void 0);
+__decorate([
+    property({ type: Object })
+], ParametersEditorBuilder.prototype, "host", void 0);
+ParametersEditorBuilder = __decorate([
+    customElement('ox-parameters-editor-builder')
+], ParametersEditorBuilder);
+//# sourceMappingURL=parameters-editor-builder.js.map

package/dist/src/grist/parameters-editor-builder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parameters-editor-builder.js","sourceRoot":"","sources":["../../../src/grist/parameters-editor-builder.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AACzE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAEtC;;;;;;;;;;;EAWE;AAEF,MAAM,aAAa,GAAG;IACpB,MAAM,EAAE,EAAE;IACV,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,EAAE;IACV,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,KAAK;IACf,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,SAAS;IAChB,kBAAkB,EAAE,IAAI;IACxB,qBAAqB,EAAE,IAAI;IAC3B,eAAe,EAAE,EAAE;IACnB,gBAAgB,EAAE,EAAE;IACpB,aAAa,EAAE,IAAI;IACnB,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,EAAE;IACjB,OAAO,EAAE,IAAI;IACb,IAAI,EAAE,IAAI;CACJ,CAAA;AAGR,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAK9D,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAA;IAC5B,CAAC;IAED,YAAY;QACV,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAClE,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAA;IAC3C,CAAC;IAED,eAAe,CAAC,KAAiC;QAC/C,IAAI,CAAC,WAAW,GAAG,EAAE,CACpB;QAAA,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC5B,IAAI,WAAW,GAAG,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACvD,IAAI,CAAC,WAAW,EAAE;gBAChB,OAAO,CAAC,IAAI,CAAC,6BAA6B,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;gBACtD,OAAM;aACP;YACD,IAAI,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAqB,CAAA;YAErE,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;YAC1B,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;YACxB,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAA;YACtC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;YACxB,iCAAiC;YACjC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;YAEvC,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA;aAC/B;YACD,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;YAChC,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAA;YAE3C,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QAC3B,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,UAAU;QACR,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAC5B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;YACnE,MAAM,MAAM,GAAG,cAAkC,CAAA;YACjD,IAAI,IAAI,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;YACtC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,IAAK,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAK,CAAC,CAAA;QACvF,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,UAAU;QACR,IAAI,KAAK,GAAG,EAAS,CAAA;QACrB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;YACnE,MAAM,MAAM,GAAG,cAAkC,CAAA;YACjD,IAAI,IAAI,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;YACtC,KAAK,CAAC,IAAK,CAAC,GAAG,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;QACvF,CAAC,CAAC,CAAA;QAEF,OAAO,KAAK,CAAA;IACd,CAAC;IAED,eAAe,CAAC,CAAQ;QACtB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,IAAI,GAAG,CAAC,CAAC,MAAqB,CAAA;QAElC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE;YAClD,OAAM;SACP;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE;SAC1B,CAAC,CACH,CAAA;IACH,CAAC;CACF,CAAA;AAhF6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAW;AACX;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;sDAAuB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAU;AAHjC,uBAAuB;IAD5B,aAAa,CAAC,8BAA8B,CAAC;GACxC,uBAAuB,CAiF5B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, PropertyValues, html } from 'lit'\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\nimport { store } from '@operato/shell'\n\n/**\n모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.\n\nExample:\n\n    <ox-parameters-editor-builder value=\"{{value}}\">\n      <label>Center X</label>\n      <input type=\"number\" .value=\"${value.cx}\">\n      <label>Width</label>\n      <input type=\"number\" .value=\"${value.width}\">\n    </ox-parameters-editor-builder>\n*/\n\nconst DEFAULT_VALUE = {\n  legend: '',\n  number: 0,\n  angle: 0,\n  string: '',\n  text: '',\n  textarea: '',\n  checkbox: false,\n  select: '',\n  color: '#000000',\n  'solidcolor-stops': null,\n  'gradientcolor-stops': null,\n  'gltf-selector': '',\n  'image-selector': '',\n  multiplecolor: null,\n  editortable: null,\n  imageselector: '',\n  options: null,\n  date: null\n} as any\n\n@customElement('ox-parameters-editor-builder')\nclass ParametersEditorBuilder extends connect(store)(LitElement) {\n  @property({ type: Object }) value: any\n  @property({ type: Array }) props?: PropertySpec[]\n  @property({ type: Object }) host: any\n\n  render() {\n    return html`<slot></slot>`\n  }\n\n  firstUpdated() {\n    this.addEventListener('change', this._onValueChanged.bind(this))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('props') && this._onPropsChanged(this.props)\n    changes.has('value') && this._setValues()\n  }\n\n  _onPropsChanged(props: PropertySpec[] | undefined) {\n    this.textContent = ''\n    ;(props || []).forEach(prop => {\n      let elementType = OxPropertyEditor.getEditor(prop.type)\n      if (!elementType) {\n        console.warn('Property Editor not defined', prop.type)\n        return\n      }\n      let element = document.createElement(elementType) as OxPropertyEditor\n\n      element.label = prop.label\n      element.type = prop.type\n      element.placeholder = prop.placeholder\n      element.host = this.host\n      // element.context = this.context\n      element.setAttribute('name', prop.name)\n\n      if (prop.observe) {\n        element.observe = prop.observe\n      }\n      element.property = prop.property\n      element.setAttribute('property-editor', '')\n\n      this.appendChild(element)\n    })\n  }\n\n  _setValues() {\n    var value = this.value || {}\n    Array.from(this.querySelectorAll('[name]')).forEach(propertyEditor => {\n      const editor = propertyEditor as OxPropertyEditor\n      let name = editor.getAttribute('name')\n      editor.value = value[name!] === undefined ? DEFAULT_VALUE[editor.type] : value[name!]\n    })\n  }\n\n  _getValues() {\n    var value = {} as any\n    Array.from(this.querySelectorAll('[name]')).forEach(propertyEditor => {\n      const editor = propertyEditor as OxPropertyEditor\n      let name = editor.getAttribute('name')\n      value[name!] = editor.value === undefined ? DEFAULT_VALUE[editor.type] : editor.value\n    })\n\n    return value\n  }\n\n  _onValueChanged(e: Event) {\n    e.stopPropagation()\n    var prop = e.target as HTMLElement\n\n    if (!prop || !prop.hasAttribute('property-editor')) {\n      return\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('property-change', {\n        bubbles: true,\n        composed: true,\n        detail: this._getValues()\n      })\n    )\n  }\n}\n"]}

package/dist/src/grist/parameters-editor-popup.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export declare class ParametersEditorPopup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value: any;
+    props: any;
+    host: any;
+    context: any;
+    confirmCallback: (newval: any) => void;
+    render(): import("lit-html").TemplateResult<1>;
+    private onChange;
+    private onCancel;
+    private onConfirm;
+}

package/dist/src/grist/parameters-editor-popup.js

@@ -0,0 +1,111 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+import { i18next } from '@operato/i18n';
+let ParametersEditorPopup = class ParametersEditorPopup extends LitElement {
+    render() {
+        var props = this.props instanceof Array ? this.props : [];
+        return html `
+      ${props.length > 0
+            ? html `
+            <ox-parameters-editor-builder
+              .value=${this.value}
+              .props=${props}
+              .host=${this.host}
+              .context=${this.context}
+              @property-change=${this.onChange.bind(this)}
+            >
+            </ox-parameters-editor-builder>
+          `
+            : html ` <span><i18n-msg msgid="text.no properties to set"></i18n-msg></span> `}
+
+      <div class="button-container">
+        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
+        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      </div>
+    `;
+    }
+    onChange(e) {
+        e.stopPropagation();
+        /*
+          주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로,
+          layout의 구성에 변화가 발생하면, 다시 render된다.
+          이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
+          이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
+          만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
+          따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
+          (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)
+          =>
+          이런 이유로, Object.assign(...)을 사용하였다.
+        */
+        if (!this.value) {
+            this.value = {};
+        }
+        for (let key in this.value) {
+            delete this.value[key];
+        }
+        Object.assign(this.value, e.detail);
+    }
+    onCancel(e) {
+        history.back();
+    }
+    onConfirm(e) {
+        this.confirmCallback && this.confirmCallback(this.value);
+        history.back();
+    }
+};
+ParametersEditorPopup.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
+      }
+
+      ox-parameters-editor-builder {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      span {
+        flex: 1;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        color: var(--primary-color);
+      }
+
+      .button-container {
+        display: flex;
+        margin-left: auto;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], ParametersEditorPopup.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], ParametersEditorPopup.prototype, "props", void 0);
+__decorate([
+    property({ type: Object })
+], ParametersEditorPopup.prototype, "host", void 0);
+__decorate([
+    property({ type: Object })
+], ParametersEditorPopup.prototype, "context", void 0);
+__decorate([
+    property({ type: Object })
+], ParametersEditorPopup.prototype, "confirmCallback", void 0);
+ParametersEditorPopup = __decorate([
+    customElement('ox-parameters-editor-popup')
+], ParametersEditorPopup);
+export { ParametersEditorPopup };
+//# sourceMappingURL=parameters-editor-popup.js.map

package/dist/src/grist/parameters-editor-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parameters-editor-popup.js","sourceRoot":"","sources":["../../../src/grist/parameters-editor-popup.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,UAAU;IA0CnD,MAAM;QACJ,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;QAEzD,OAAO,IAAI,CAAA;QACP,KAAK,CAAC,MAAM,GAAG,CAAC;YAChB,CAAC,CAAC,IAAI,CAAA;;uBAES,IAAI,CAAC,KAAK;uBACV,KAAK;sBACN,IAAI,CAAC,IAAI;yBACN,IAAI,CAAC,OAAO;iCACJ,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;WAG9C;YACH,CAAC,CAAC,IAAI,CAAA,wEAAwE;;;6BAGzD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;6BACtD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAEhF,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB;;;;;;;;;;UAUE;QACF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;SAChB;QAED,KAAK,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE;YAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;SACvB;QACD,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;CACF,CAAA;AAjGQ,4BAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAU;AACT;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAa;AACZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAwC;AAxCxD,qBAAqB;IADjC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,qBAAqB,CAkGjC;SAlGY,qBAAqB","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-parameters-editor-popup')\nexport class ParametersEditorPopup extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n\n        width: var(--overlay-center-normal-width, 50%);\n        height: var(--overlay-center-normal-height, 50%);\n      }\n\n      ox-parameters-editor-builder {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      span {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--primary-color);\n      }\n\n      .button-container {\n        display: flex;\n        margin-left: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: Object }) props: any\n  @property({ type: Object }) host: any\n  @property({ type: Object }) context: any\n  @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n  render() {\n    var props = this.props instanceof Array ? this.props : []\n\n    return html`\n      ${props.length > 0\n        ? html`\n            <ox-parameters-editor-builder\n              .value=${this.value}\n              .props=${props}\n              .host=${this.host}\n              .context=${this.context}\n              @property-change=${this.onChange.bind(this)}\n            >\n            </ox-parameters-editor-builder>\n          `\n        : html` <span><i18n-msg msgid=\"text.no properties to set\"></i18n-msg></span> `}\n\n      <div class=\"button-container\">\n        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>\n        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>\n      </div>\n    `\n  }\n\n  private onChange(e: CustomEvent) {\n    e.stopPropagation()\n\n    /* \n      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n      layout의 구성에 변화가 발생하면, 다시 render된다.\n      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n      (이 팝업 클래스를 템플릿으로 사용한 곳의 코드를 참조하세요.)\n      => \n      이런 이유로, Object.assign(...)을 사용하였다.\n    */\n    if (!this.value) {\n      this.value = {}\n    }\n\n    for (let key in this.value) {\n      delete this.value[key]\n    }\n    Object.assign(this.value, e.detail)\n  }\n\n  private onCancel(e: Event) {\n    history.back()\n  }\n\n  private onConfirm(e: Event) {\n    this.confirmCallback && this.confirmCallback(this.value)\n    history.back()\n  }\n}\n"]}

package/dist/src/grist/parameters-editor.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import './parameters-editor-builder.js';
+import './parameters-editor-popup.js';
+import { ColumnConfig, GristRecord } from '@operato/data-grist';
+import { LitElement } from 'lit';
+export declare class ParametersEditor extends LitElement {
+    static styles: import("lit").CSSResult;
+    value: any;
+    column: ColumnConfig;
+    record: GristRecord;
+    row: number;
+    field: any;
+    private popup?;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): Promise<void>;
+    openSelector(): Promise<void>;
+}

package/dist/src/grist/parameters-editor.js

@@ -0,0 +1,105 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import './parameters-editor-builder.js';
+import './parameters-editor-popup.js';
+import { LitElement, css, html } from 'lit';
+import { openPopup } from '@operato/layout';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+let ParametersEditor = class ParametersEditor extends LitElement {
+    render() {
+        const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value;
+        return html ` ${value || ''} `;
+    }
+    async firstUpdated() {
+        await this.updateComplete;
+        this.renderRoot.addEventListener('click', e => {
+            e.stopPropagation();
+            this.openSelector();
+        });
+        this.openSelector();
+    }
+    async openSelector() {
+        if (this.popup) {
+            delete this.popup;
+        }
+        var { options } = this.column.record;
+        if (typeof options === 'function') {
+            options = await options.call(this, this.value, this.column, this.record, this.row, this.field);
+        }
+        const { name, help, spec, context, objectified = false } = options;
+        const confirmCallback = (newval) => {
+            this.dispatchEvent(new CustomEvent('field-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    before: this.value,
+                    after: !objectified ? JSON.stringify(newval) : newval,
+                    record: this.record,
+                    column: this.column,
+                    row: this.row
+                }
+            }));
+        };
+        try {
+            var value = !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : this.value;
+        }
+        catch (e) {
+            var value = {};
+        }
+        /*
+          주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로,
+          layout의 구성에 변화가 발생하면, 다시 render된다.
+          이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)
+          이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,
+          만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.
+          따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.
+        */
+        var template = html `
+      <ox-parameters-editor-popup
+        .value=${value}
+        .props=${spec}
+        .host=${this.record}
+        .context=${context}
+        .confirmCallback=${confirmCallback}
+      >
+      </ox-parameters-editor-popup>
+    `;
+        this.popup = openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            title: `${(name === null || name === void 0 ? void 0 : name.toUpperCase()) || ''} ${i18next.t('field.params')}`,
+            help
+        });
+    }
+};
+ParametersEditor.styles = css `
+    :host {
+      color: black;
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], ParametersEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], ParametersEditor.prototype, "column", void 0);
+__decorate([
+    property({ type: Object })
+], ParametersEditor.prototype, "record", void 0);
+__decorate([
+    property({ type: Number })
+], ParametersEditor.prototype, "row", void 0);
+__decorate([
+    property({ type: Object })
+], ParametersEditor.prototype, "field", void 0);
+ParametersEditor = __decorate([
+    customElement('ox-parameters-editor')
+], ParametersEditor);
+export { ParametersEditor };
+//# sourceMappingURL=parameters-editor.js.map

package/dist/src/grist/parameters-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parameters-editor.js","sourceRoot":"","sources":["../../../src/grist/parameters-editor.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './parameters-editor-builder.js'\nimport './parameters-editor-popup.js'\n\nimport { ColumnConfig, GristRecord } from '@operato/data-grist'\nimport { LitElement, css, html } from 'lit'\nimport { PopupHandle, openPopup } from '@operato/layout'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\n@customElement('ox-parameters-editor')\nexport class ParametersEditor extends LitElement {\n  static styles = css`\n    :host {\n      color: black;\n\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  `\n\n  @property({ type: Object }) value: any\n  @property({ type: Object }) column!: ColumnConfig\n  @property({ type: Object }) record!: GristRecord\n  @property({ type: Number }) row!: number\n  @property({ type: Object }) field!: any\n\n  private popup?: PopupHandle\n\n  render() {\n    const value = typeof this.value === 'object' ? JSON.stringify(this.value) : this.value\n    return html` ${value || ''} `\n  }\n\n  async firstUpdated() {\n    await this.updateComplete\n\n    this.renderRoot.addEventListener('click', e => {\n      e.stopPropagation()\n\n      this.openSelector()\n    })\n\n    this.openSelector()\n  }\n\n  async openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    var { options } = this.column.record\n\n    if (typeof options === 'function') {\n      options = await options.call(this, this.value, this.column, this.record, this.row, this.field)\n    }\n\n    const { name, help, spec, context, objectified = false } = options\n\n    const confirmCallback = (newval: any) => {\n      this.dispatchEvent(\n        new CustomEvent('field-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            before: this.value,\n            after: !objectified ? JSON.stringify(newval) : newval,\n            record: this.record,\n            column: this.column,\n            row: this.row\n          }\n        })\n      )\n    }\n\n    try {\n      var value: any = !objectified && typeof this.value === 'string' ? JSON.parse(this.value) : this.value\n    } catch (e) {\n      var value: any = {}\n    }\n\n    /* \n      주의 : 이 팝업 템플릿은 layout 모듈에 의해서 render 되므로, \n      layout의 구성에 변화가 발생하면, 다시 render된다.\n      이 팝업이 떠 있는 상태에서, 또 다른 팝업이 뜨는 경우도 layout 구성의 변화를 야기한다. (overlay의 갯수의 증가)\n      이 경우 value, options, confirmCallback 등 클로져를 사용한 것들이 초기 바인딩된 값으로 다시 바인딩되게 되는데,\n      만약, 템플릿 내부에서 이들 속성의 레퍼런스가 변화했다면, 원래 상태로 되돌아가는 현상이 발생하게 된다.\n      따라서, 가급적 이들 속성의 레퍼런스를 변화시키지 않는 것이 좋다.\n    */\n    var template = html`\n      <ox-parameters-editor-popup\n        .value=${value}\n        .props=${spec}\n        .host=${this.record}\n        .context=${context}\n        .confirmCallback=${confirmCallback}\n      >\n      </ox-parameters-editor-popup>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: `${name?.toUpperCase() || ''} ${i18next.t('field.params')}`,\n      help\n    })\n  }\n}\n"]}

package/dist/src/input/ox-input-background-pattern.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/i18n/ox-i18n.js';
+import '@operato/attachment/ox-attachment-selector.js';
+import { OxFormField } from '@operato/input';
+export declare type BackgroundPatternOption = {
+    image?: HTMLImageElement | string;
+    align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom';
+    offsetX?: number;
+    offsetY?: number;
+    width?: number;
+    height?: number;
+    fitPattern?: boolean;
+};
+/**
+ * 컴포넌트의 fill pattern을 편집하는 element
+ *
+ * Example:
+ *  <ox-input-background-pattern
+ *    @change="${e => { this.pattern = e.target.value }}"
+ *    .value=${this.pattern}"
+ *  ></ox-input-background-pattern>
+ */
+export declare class OxInputBackgroundPattern extends OxFormField {
+    static styles: import("lit").CSSResult;
+    value?: BackgroundPatternOption;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    _onChange(e: Event): void;
+}