@operato/grist-editor 1.0.0-alpha.9

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

@@ -0,0 +1 @@
+{"version":3,"file":"object-editor.js","sourceRoot":"","sources":["../../../src/object/object-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport '../../elements/object-selector'\n\nimport {\n  ColumnConfig,\n  GristData,\n  GristRecord,\n  InputEditor,\n  ZERO_COLUMN,\n  ZERO_CONFIG,\n  ZERO_RECORD\n} 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 InputEditor {\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/object/object-selector.d.ts

@@ -0,0 +1,38 @@
+import '@operato/data-grist';
+import '@operato/form/ox-search-form.js';
+import { DataGrist, FetchHandler, FetchOption, GristData, GristRecord } from '@operato/data-grist';
+import { LitElement } from 'lit';
+import { SearchForm } from '@operato/form';
+export declare class ObjectSelector extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value?: string;
+    config: any;
+    data: GristData;
+    queryName: string;
+    basicArgs: any;
+    confirmCallback?: (record: GristRecord | undefined) => void;
+    selectedRecords: GristRecord[];
+    searchFields: any;
+    select: {
+        type: string;
+        name: string;
+        header: string;
+        subFields?: string[];
+        hidden: boolean;
+        ignoreCondition: boolean;
+        queryName: string;
+        width: number;
+    }[];
+    list: any;
+    valueField: string | ((item: any) => any);
+    grist: DataGrist;
+    searchForm: SearchForm;
+    render(): import("lit-html").TemplateResult<1>;
+    oncancel(): void;
+    onconfirm(): void;
+    fetchHandler: FetchHandler;
+    firstUpdated(): Promise<void>;
+    getSelectFields(): string;
+    _buildConditions({ filters, page, limit, sorters }: FetchOption): Promise<any>;
+    get selected(): GristRecord | undefined;
+}

package/dist/src/object/object-selector.js

@@ -0,0 +1,338 @@
+import { __decorate } from "tslib";
+import '@operato/data-grist';
+import '@operato/form/ox-search-form.js';
+import { ZERO_DATA } from '@operato/data-grist';
+import { LitElement, css, html } from 'lit';
+import { MultiColumnFormStyles } from '@operato/form';
+import { buildArgs, client, gqlContext } from '@operato/graphql';
+import { customElement, property, query } from 'lit/decorators.js';
+import gql from 'graphql-tag';
+import { i18next } from '@operato/i18n';
+import { isMobileDevice } from '@operato/utils';
+let ObjectSelector = class ObjectSelector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = ZERO_DATA;
+        this.selectedRecords = [];
+        this.select = [];
+        this.valueField = 'id';
+        this.fetchHandler = async ({ filters, page, limit, sorters = [] }) => {
+            const response = await client.query({
+                query: gql `
+        query {
+          fetch: ${this.queryName} (${buildArgs(await this._buildConditions({ filters, page, limit, sorters }))}) {
+            ${this.getSelectFields()}
+          }
+        }
+      `,
+                context: gqlContext()
+            });
+            if (!response.errors) {
+                const records = response.data.fetch.items.map((item) => {
+                    let rowValue;
+                    if (this.valueField && typeof this.valueField === 'function') {
+                        rowValue = this.valueField(item);
+                    }
+                    else if (this.valueField) {
+                        rowValue = item[this.valueField];
+                    }
+                    else {
+                        rowValue = item.id;
+                    }
+                    if (this.value && this.value === rowValue) {
+                        this.selectedRecords = [item];
+                        item['__selected__'] = true;
+                    }
+                    return item;
+                });
+                const total = response.data.fetch.total;
+                return {
+                    records,
+                    total,
+                    limit,
+                    page
+                };
+            }
+        };
+    }
+    render() {
+        return html `
+      <ox-search-form
+        id="search-form"
+        @keypress=${(e) => {
+            if (e.keyCode === 13) {
+                this.grist.fetch();
+            }
+        }}
+        @submit=${(e) => this.grist.fetch()}
+        .fields=${this.searchFields}
+      ></ox-search-form>
+
+      <ox-grist
+        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
+        .config=${this.config}
+        .data=${this.data}
+        .fetchHandler=${this.fetchHandler.bind(this)}
+        .selectedRecords=${this.selectedRecords}
+      ></ox-grist>
+
+      <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>
+    `;
+    }
+    oncancel() {
+        history.back();
+    }
+    onconfirm() {
+        this.confirmCallback && this.confirmCallback(this.selected);
+        history.back();
+    }
+    async firstUpdated() {
+        this.config = {
+            columns: [
+                {
+                    type: 'gutter',
+                    gutterName: 'sequence'
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'row-selector',
+                    multiple: false
+                }
+            ],
+            rows: {
+                selectable: {
+                    multiple: false
+                },
+                handlers: {
+                    click: 'select-row',
+                    dblclick: ((columns, data, column, record, rowIndex, field) => {
+                        this.onconfirm();
+                    })
+                },
+                appendable: false
+            }
+        };
+        if (this.select && this.select.length > 0) {
+            let _searchFields = this.select.filter(selectField => !selectField.hidden && !selectField.ignoreCondition);
+            if (this.list && this.list.fields && this.list.fields.length > 0) {
+                _searchFields = _searchFields.filter(searchField => this.list.fields.indexOf(searchField.name) >= 0);
+            }
+            else {
+                _searchFields = _searchFields.slice(0, 4);
+            }
+            this.searchFields = _searchFields.map(selectField => {
+                const fieldType = (selectField.type && selectField.type.toLowerCase()) || 'string';
+                const numberTypes = ['integer', 'float'];
+                return {
+                    label: selectField.header || i18next.t(`field.${selectField.name}`),
+                    name: selectField.name,
+                    type: fieldType === 'string'
+                        ? 'text'
+                        : numberTypes.indexOf(fieldType) >= 0
+                            ? 'number'
+                            : fieldType === 'boolean'
+                                ? 'checkbox'
+                                : fieldType,
+                    queryName: selectField.queryName,
+                    props: fieldType === 'string'
+                        ? { searchOper: 'i_like' }
+                        : fieldType === 'object'
+                            ? { searchOper: 'in' }
+                            : { searchOper: 'eq' },
+                    attrs: fieldType === 'boolean' ? ['indeterminated'] : []
+                };
+            });
+            this.config = {
+                ...this.config,
+                columns: [
+                    ...this.config.columns,
+                    ...this.select.map(selectField => {
+                        return {
+                            ...selectField,
+                            type: selectField.type || 'string',
+                            width: selectField.width || 160,
+                            header: selectField.header || i18next.t(`field.${selectField.name}`)
+                        };
+                    })
+                ]
+            };
+        }
+        else {
+            this.searchFields = [
+                {
+                    label: i18next.t('field.name'),
+                    name: 'name',
+                    type: 'text',
+                    props: { searchOper: 'i_like' }
+                },
+                {
+                    label: i18next.t('field.description'),
+                    name: 'description',
+                    type: 'text',
+                    props: { searchOper: 'i_like' }
+                }
+            ];
+            this.config = {
+                ...this.config,
+                columns: [
+                    ...this.config.columns,
+                    {
+                        type: 'string',
+                        name: 'id',
+                        header: i18next.t('field.id'),
+                        hidden: true
+                    },
+                    {
+                        type: 'string',
+                        name: 'name',
+                        header: i18next.t('field.name'),
+                        record: {
+                            align: 'left'
+                        },
+                        sortable: true,
+                        width: 160
+                    },
+                    {
+                        type: 'string',
+                        name: 'description',
+                        header: i18next.t('field.description'),
+                        record: {
+                            align: 'left'
+                        },
+                        sortable: true,
+                        width: 300
+                    }
+                ]
+            };
+        }
+        this.config = {
+            ...this.config,
+            list: {
+                ...this.list,
+                fields: this.list && this.list.fields && this.list.fields.length > 0
+                    ? this.list.fields
+                    : this.config.columns
+                        .filter(column => column.type !== 'gutter')
+                        .slice(0, 3)
+                        .map(column => column.name)
+            }
+        };
+        await this.updateComplete;
+        this.grist && this.grist.focus();
+    }
+    getSelectFields() {
+        if (this.select && this.select.length > 0) {
+            return `items {
+        ${this.select.map(selectField => {
+                return selectField.type === 'object'
+                    ? `${selectField.name} { ${selectField.subFields && selectField.subFields.length > 0
+                        ? selectField.subFields.join(' ')
+                        : `id name description`} }`
+                    : `${selectField.name}`;
+            })}
+      }
+      total`;
+        }
+        else {
+            return `
+        items {
+          id
+          name
+          description
+        }
+        total
+      `;
+        }
+    }
+    async _buildConditions({ filters, page, limit, sorters }) {
+        const queryConditions = {
+            filters: [],
+            ...this.basicArgs
+        };
+        queryConditions.filters = [...queryConditions.filters, ...(await this.searchForm.getQueryFilters())];
+        queryConditions.pagination = { page, limit };
+        queryConditions.sortings = sorters;
+        return queryConditions;
+    }
+    get selected() {
+        var grist = this.renderRoot.querySelector('ox-grist');
+        var selected = grist.selected;
+        return selected && selected.length > 0 ? selected[0] : undefined;
+    }
+};
+ObjectSelector.styles = [
+    MultiColumnFormStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: #fff;
+      }
+
+      data-grist {
+        flex: 1;
+      }
+
+      .button-container {
+        display: flex;
+        margin-left: auto;
+      }
+
+      form {
+        position: relative;
+      }
+
+      [search] {
+        position: absolute;
+        right: 0;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], ObjectSelector.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], ObjectSelector.prototype, "config", void 0);
+__decorate([
+    property({ type: Object })
+], ObjectSelector.prototype, "data", void 0);
+__decorate([
+    property({ type: String })
+], ObjectSelector.prototype, "queryName", void 0);
+__decorate([
+    property({ type: Object })
+], ObjectSelector.prototype, "basicArgs", void 0);
+__decorate([
+    property({ type: Object })
+], ObjectSelector.prototype, "confirmCallback", void 0);
+__decorate([
+    property({ type: Array })
+], ObjectSelector.prototype, "selectedRecords", void 0);
+__decorate([
+    property({ type: Array })
+], ObjectSelector.prototype, "searchFields", void 0);
+__decorate([
+    property({ type: Array })
+], ObjectSelector.prototype, "select", void 0);
+__decorate([
+    property({ type: Object })
+], ObjectSelector.prototype, "list", void 0);
+__decorate([
+    property({ type: String })
+], ObjectSelector.prototype, "valueField", void 0);
+__decorate([
+    query('ox-grist')
+], ObjectSelector.prototype, "grist", void 0);
+__decorate([
+    query('ox-search-form')
+], ObjectSelector.prototype, "searchForm", void 0);
+ObjectSelector = __decorate([
+    customElement('ox-object-selector')
+], ObjectSelector);
+export { ObjectSelector };
+//# sourceMappingURL=object-selector.js.map

package/dist/src/object/object-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"object-selector.js","sourceRoot":"","sources":["../../../src/object/object-selector.ts"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAQL,SAAS,EACV,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,qBAAqB,EAAc,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAG/C,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAiC8B,SAAI,GAAc,SAAS,CAAA;QAI5B,oBAAe,GAAkB,EAAE,CAAA;QAGnC,WAAM,GAS3B,EAAE,CAAA;QAEoB,eAAU,GAAkC,IAAI,CAAA;QA0C5E,iBAAY,GAAiB,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,GAAG,EAAE,EAAE,EAAE,EAAE;YAC5E,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,GAAG,CAAA;;mBAEG,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,MAAM,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;cACjG,IAAI,CAAC,eAAe,EAAE;;;OAG7B;gBACD,OAAO,EAAE,UAAU,EAAE;aACtB,CAAC,CAAA;YAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;gBACpB,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,EAAE;oBAC1D,IAAI,QAAQ,CAAA;oBAEZ,IAAI,IAAI,CAAC,UAAU,IAAI,OAAO,IAAI,CAAC,UAAU,KAAK,UAAU,EAAE;wBAC5D,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;qBACjC;yBAAM,IAAI,IAAI,CAAC,UAAU,EAAE;wBAC1B,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;qBACjC;yBAAM;wBACL,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAA;qBACnB;oBAED,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;wBACzC,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,CAAA;wBAC7B,IAAI,CAAC,cAAc,CAAC,GAAG,IAAI,CAAA;qBAC5B;oBAED,OAAO,IAAI,CAAA;gBACb,CAAC,CAAC,CAAA;gBACF,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA;gBAEvC,OAAO;oBACL,OAAO;oBACP,KAAK;oBACL,KAAK;oBACL,IAAI;iBACL,CAAA;aACF;QACH,CAAC,CAAA;IA6LH,CAAC;IA1QC,MAAM;QACJ,OAAO,IAAI,CAAA;;;oBAGK,CAAC,CAAgB,EAAE,EAAE;YAC/B,IAAI,CAAC,CAAC,OAAO,KAAK,EAAE,EAAE;gBACpB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;aACnB;QACH,CAAC;kBACS,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;kBACtC,IAAI,CAAC,YAAY;;;;gBAInB,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;kBAChC,IAAI,CAAC,MAAM;gBACb,IAAI,CAAC,IAAI;wBACD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;2BACzB,IAAI,CAAC,eAAe;;;;6BAIlB,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;IAED,QAAQ;QACN,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC3D,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;IA4CD,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,MAAM,GAAG;YACZ,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,UAAU;iBACvB;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,cAAc;oBAC1B,QAAQ,EAAE,KAAK;iBAChB;aACF;YACD,IAAI,EAAE;gBACJ,UAAU,EAAE;oBACV,QAAQ,EAAE,KAAK;iBAChB;gBACD,QAAQ,EAAE;oBACR,KAAK,EAAE,YAAY;oBACnB,QAAQ,EAAE,CAAC,CAAC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;wBAC5D,IAAI,CAAC,SAAS,EAAE,CAAA;oBAClB,CAAC,CAAsB;iBACxB;gBACD,UAAU,EAAE,KAAK;aAClB;SACF,CAAA;QAED,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YACzC,IAAI,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;YAC1G,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;gBAChE,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;aACrG;iBAAM;gBACL,aAAa,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;aAC1C;YAED,IAAI,CAAC,YAAY,GAAG,aAAa,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;gBAClD,MAAM,SAAS,GAAG,CAAC,WAAW,CAAC,IAAI,IAAI,WAAW,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,QAAQ,CAAA;gBAClF,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;gBACxC,OAAO;oBACL,KAAK,EAAE,WAAW,CAAC,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,SAAS,WAAW,CAAC,IAAI,EAAE,CAAC;oBACnE,IAAI,EAAE,WAAW,CAAC,IAAI;oBACtB,IAAI,EACF,SAAS,KAAK,QAAQ;wBACpB,CAAC,CAAC,MAAM;wBACR,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC;4BACrC,CAAC,CAAC,QAAQ;4BACV,CAAC,CAAC,SAAS,KAAK,SAAS;gCACzB,CAAC,CAAC,UAAU;gCACZ,CAAC,CAAC,SAAS;oBACf,SAAS,EAAE,WAAW,CAAC,SAAS;oBAChC,KAAK,EACH,SAAS,KAAK,QAAQ;wBACpB,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE;wBAC1B,CAAC,CAAC,SAAS,KAAK,QAAQ;4BACxB,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE;4BACtB,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE;oBAC1B,KAAK,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAAE;iBACzD,CAAA;YACH,CAAC,CAAC,CAAA;YACF,IAAI,CAAC,MAAM,GAAG;gBACZ,GAAG,IAAI,CAAC,MAAM;gBACd,OAAO,EAAE;oBACP,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO;oBACtB,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;wBAC/B,OAAO;4BACL,GAAG,WAAW;4BACd,IAAI,EAAE,WAAW,CAAC,IAAI,IAAI,QAAQ;4BAClC,KAAK,EAAE,WAAW,CAAC,KAAK,IAAI,GAAG;4BAC/B,MAAM,EAAE,WAAW,CAAC,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,SAAS,WAAW,CAAC,IAAI,EAAE,CAAC;yBACrE,CAAA;oBACH,CAAC,CAAC;iBACH;aACF,CAAA;SACF;aAAM;YACL,IAAI,CAAC,YAAY,GAAG;gBAClB;oBACE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC9B,IAAI,EAAE,MAAM;oBACZ,IAAI,EAAE,MAAM;oBACZ,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;iBAChC;gBACD;oBACE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACrC,IAAI,EAAE,aAAa;oBACnB,IAAI,EAAE,MAAM;oBACZ,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;iBAChC;aACF,CAAA;YAED,IAAI,CAAC,MAAM,GAAG;gBACZ,GAAG,IAAI,CAAC,MAAM;gBACd,OAAO,EAAE;oBACP,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO;oBACtB;wBACE,IAAI,EAAE,QAAQ;wBACd,IAAI,EAAE,IAAI;wBACV,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC;wBAC7B,MAAM,EAAE,IAAI;qBACb;oBACD;wBACE,IAAI,EAAE,QAAQ;wBACd,IAAI,EAAE,MAAM;wBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;wBAC/B,MAAM,EAAE;4BACN,KAAK,EAAE,MAAM;yBACd;wBACD,QAAQ,EAAE,IAAI;wBACd,KAAK,EAAE,GAAG;qBACX;oBACD;wBACE,IAAI,EAAE,QAAQ;wBACd,IAAI,EAAE,aAAa;wBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;wBACtC,MAAM,EAAE;4BACN,KAAK,EAAE,MAAM;yBACd;wBACD,QAAQ,EAAE,IAAI;wBACd,KAAK,EAAE,GAAG;qBACX;iBACF;aACF,CAAA;SACF;QAED,IAAI,CAAC,MAAM,GAAG;YACZ,GAAG,IAAI,CAAC,MAAM;YACd,IAAI,EAAE;gBACJ,GAAG,IAAI,CAAC,IAAI;gBACZ,MAAM,EACJ,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;oBAC1D,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM;oBAClB,CAAC,CAAE,IAAI,CAAC,MAAM,CAAC,OAA0B;yBACpC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC;yBAC1C,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;yBACX,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;aACpC;SACF,CAAA;QAED,MAAM,IAAI,CAAC,cAAc,CAAA;QACzB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;IAClC,CAAC;IAED,eAAe;QACb,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YACzC,OAAO;UACH,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;gBAC9B,OAAO,WAAW,CAAC,IAAI,KAAK,QAAQ;oBAClC,CAAC,CAAC,GAAG,WAAW,CAAC,IAAI,MACjB,WAAW,CAAC,SAAS,IAAI,WAAW,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC;wBACvD,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;wBACjC,CAAC,CAAC,qBACN,IAAI;oBACN,CAAC,CAAC,GAAG,WAAW,CAAC,IAAI,EAAE,CAAA;YAC3B,CAAC,CAAC;;YAEE,CAAA;SACP;aAAM;YACL,OAAO;;;;;;;OAON,CAAA;SACF;IACH,CAAC;IAED,KAAK,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAe;QACnE,MAAM,eAAe,GAAG;YACtB,OAAO,EAAE,EAAE;YACX,GAAG,IAAI,CAAC,SAAS;SAClB,CAAA;QAED,eAAe,CAAC,OAAO,GAAG,CAAC,GAAG,eAAe,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC,CAAC,CAAA;QACpG,eAAe,CAAC,UAAU,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA;QAC5C,eAAe,CAAC,QAAQ,GAAG,OAAO,CAAA;QAElC,OAAO,eAAe,CAAA;IACxB,CAAC;IAED,IAAI,QAAQ;QACV,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAc,CAAA;QAElE,IAAI,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAA;QAE7B,OAAO,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAClE,CAAC;CACF,CAAA;AAjUQ,qBAAM,GAAG;IACd,qBAAqB;IACrB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA4D;AAC5D;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uDAAoC;AAEnC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;8CASlB;AACoB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAU;AACT;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAiD;AAEzD;IAAlB,KAAK,CAAC,UAAU,CAAC;6CAAkB;AACX;IAAxB,KAAK,CAAC,gBAAgB,CAAC;kDAAwB;AAtDrC,cAAc;IAD1B,aAAa,CAAC,oBAAoB,CAAC;GACvB,cAAc,CAkU1B;SAlUY,cAAc","sourcesContent":["import '@operato/data-grist'\nimport '@operato/form/ox-search-form.js'\n\nimport {\n  ColumnConfig,\n  DataGrist,\n  FetchHandler,\n  FetchOption,\n  GristData,\n  GristEventHandler,\n  GristRecord,\n  ZERO_DATA\n} from '@operato/data-grist'\nimport { LitElement, css, html } from 'lit'\nimport { MultiColumnFormStyles, SearchForm } from '@operato/form'\nimport { buildArgs, client, gqlContext } from '@operato/graphql'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport gql from 'graphql-tag'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\n\n@customElement('ox-object-selector')\nexport class ObjectSelector extends LitElement {\n  static styles = [\n    MultiColumnFormStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n      }\n\n      data-grist {\n        flex: 1;\n      }\n\n      .button-container {\n        display: flex;\n        margin-left: auto;\n      }\n\n      form {\n        position: relative;\n      }\n\n      [search] {\n        position: absolute;\n        right: 0;\n      }\n    `\n  ]\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) config: any\n  @property({ type: Object }) data: GristData = ZERO_DATA\n  @property({ type: String }) queryName!: string\n  @property({ type: Object }) basicArgs: any\n  @property({ type: Object }) confirmCallback?: (record: GristRecord | undefined) => void\n  @property({ type: Array }) selectedRecords: GristRecord[] = []\n\n  @property({ type: Array }) searchFields: any\n  @property({ type: Array }) select: {\n    type: string\n    name: string\n    header: string\n    subFields?: string[]\n    hidden: boolean\n    ignoreCondition: boolean\n    queryName: string\n    width: number\n  }[] = []\n  @property({ type: Object }) list: any\n  @property({ type: String }) valueField: string | ((item: any) => any) = 'id'\n\n  @query('ox-grist') grist!: DataGrist\n  @query('ox-search-form') searchForm!: SearchForm\n\n  render() {\n    return html`\n      <ox-search-form\n        id=\"search-form\"\n        @keypress=${(e: KeyboardEvent) => {\n          if (e.keyCode === 13) {\n            this.grist.fetch()\n          }\n        }}\n        @submit=${(e: SubmitEvent) => this.grist.fetch()}\n        .fields=${this.searchFields}\n      ></ox-search-form>\n\n      <ox-grist\n        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n        .config=${this.config}\n        .data=${this.data}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .selectedRecords=${this.selectedRecords}\n      ></ox-grist>\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  oncancel() {\n    history.back()\n  }\n\n  onconfirm() {\n    this.confirmCallback && this.confirmCallback(this.selected)\n    history.back()\n  }\n\n  fetchHandler: FetchHandler = async ({ filters, page, limit, sorters = [] }) => {\n    const response = await client.query({\n      query: gql`\n        query {\n          fetch: ${this.queryName} (${buildArgs(await this._buildConditions({ filters, page, limit, sorters }))}) {\n            ${this.getSelectFields()}\n          }\n        }\n      `,\n      context: gqlContext()\n    })\n\n    if (!response.errors) {\n      const records = response.data.fetch.items.map((item: any) => {\n        let rowValue\n\n        if (this.valueField && typeof this.valueField === 'function') {\n          rowValue = this.valueField(item)\n        } else if (this.valueField) {\n          rowValue = item[this.valueField]\n        } else {\n          rowValue = item.id\n        }\n\n        if (this.value && this.value === rowValue) {\n          this.selectedRecords = [item]\n          item['__selected__'] = true\n        }\n\n        return item\n      })\n      const total = response.data.fetch.total\n\n      return {\n        records,\n        total,\n        limit,\n        page\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.config = {\n      columns: [\n        {\n          type: 'gutter',\n          gutterName: 'sequence'\n        },\n        {\n          type: 'gutter',\n          gutterName: 'row-selector',\n          multiple: false\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: false\n        },\n        handlers: {\n          click: 'select-row',\n          dblclick: ((columns, data, column, record, rowIndex, field) => {\n            this.onconfirm()\n          }) as GristEventHandler\n        },\n        appendable: false\n      }\n    }\n\n    if (this.select && this.select.length > 0) {\n      let _searchFields = this.select.filter(selectField => !selectField.hidden && !selectField.ignoreCondition)\n      if (this.list && this.list.fields && this.list.fields.length > 0) {\n        _searchFields = _searchFields.filter(searchField => this.list.fields.indexOf(searchField.name) >= 0)\n      } else {\n        _searchFields = _searchFields.slice(0, 4)\n      }\n\n      this.searchFields = _searchFields.map(selectField => {\n        const fieldType = (selectField.type && selectField.type.toLowerCase()) || 'string'\n        const numberTypes = ['integer', 'float']\n        return {\n          label: selectField.header || i18next.t(`field.${selectField.name}`),\n          name: selectField.name,\n          type:\n            fieldType === 'string'\n              ? 'text'\n              : numberTypes.indexOf(fieldType) >= 0\n              ? 'number'\n              : fieldType === 'boolean'\n              ? 'checkbox'\n              : fieldType,\n          queryName: selectField.queryName,\n          props:\n            fieldType === 'string'\n              ? { searchOper: 'i_like' }\n              : fieldType === 'object'\n              ? { searchOper: 'in' }\n              : { searchOper: 'eq' },\n          attrs: fieldType === 'boolean' ? ['indeterminated'] : []\n        }\n      })\n      this.config = {\n        ...this.config,\n        columns: [\n          ...this.config.columns,\n          ...this.select.map(selectField => {\n            return {\n              ...selectField,\n              type: selectField.type || 'string',\n              width: selectField.width || 160,\n              header: selectField.header || i18next.t(`field.${selectField.name}`)\n            }\n          })\n        ]\n      }\n    } else {\n      this.searchFields = [\n        {\n          label: i18next.t('field.name'),\n          name: 'name',\n          type: 'text',\n          props: { searchOper: 'i_like' }\n        },\n        {\n          label: i18next.t('field.description'),\n          name: 'description',\n          type: 'text',\n          props: { searchOper: 'i_like' }\n        }\n      ]\n\n      this.config = {\n        ...this.config,\n        columns: [\n          ...this.config.columns,\n          {\n            type: 'string',\n            name: 'id',\n            header: i18next.t('field.id'),\n            hidden: true\n          },\n          {\n            type: 'string',\n            name: 'name',\n            header: i18next.t('field.name'),\n            record: {\n              align: 'left'\n            },\n            sortable: true,\n            width: 160\n          },\n          {\n            type: 'string',\n            name: 'description',\n            header: i18next.t('field.description'),\n            record: {\n              align: 'left'\n            },\n            sortable: true,\n            width: 300\n          }\n        ]\n      }\n    }\n\n    this.config = {\n      ...this.config,\n      list: {\n        ...this.list,\n        fields:\n          this.list && this.list.fields && this.list.fields.length > 0\n            ? this.list.fields\n            : (this.config.columns as ColumnConfig[])\n                .filter(column => column.type !== 'gutter')\n                .slice(0, 3)\n                .map(column => column.name)\n      }\n    }\n\n    await this.updateComplete\n    this.grist && this.grist.focus()\n  }\n\n  getSelectFields() {\n    if (this.select && this.select.length > 0) {\n      return `items {\n        ${this.select.map(selectField => {\n          return selectField.type === 'object'\n            ? `${selectField.name} { ${\n                selectField.subFields && selectField.subFields.length > 0\n                  ? selectField.subFields.join(' ')\n                  : `id name description`\n              } }`\n            : `${selectField.name}`\n        })}\n      }\n      total`\n    } else {\n      return `\n        items {\n          id\n          name\n          description\n        }\n        total\n      `\n    }\n  }\n\n  async _buildConditions({ filters, page, limit, sorters }: FetchOption) {\n    const queryConditions = {\n      filters: [],\n      ...this.basicArgs\n    }\n\n    queryConditions.filters = [...queryConditions.filters, ...(await this.searchForm.getQueryFilters())]\n    queryConditions.pagination = { page, limit }\n    queryConditions.sortings = sorters\n\n    return queryConditions\n  }\n\n  get selected() {\n    var grist = this.renderRoot.querySelector('ox-grist') as DataGrist\n\n    var selected = grist.selected\n\n    return selected && selected.length > 0 ? selected[0] : undefined\n  }\n}\n"]}

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

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

package/dist/src/parameters/index.js

@@ -0,0 +1,6 @@
+import { registerEditor } from '@operato/data-grist';
+import { ParametersEditor } from './parameters-editor.js';
+/* register grist renderer/editor for id */
+registerEditor('parameters', ParametersEditor);
+// registerRenderer('id', IdRenderer)
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/parameters/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAoB,MAAM,qBAAqB,CAAA;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAEzD,2CAA2C;AAC3C,cAAc,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAA;AAE9C,qCAAqC","sourcesContent":["import { registerEditor, registerRenderer } from '@operato/data-grist'\n\nimport { ParametersEditor } from './parameters-editor.js'\n\n/* register grist renderer/editor for id */\nregisterEditor('parameters', ParametersEditor)\n\n// registerRenderer('id', IdRenderer)\n"]}

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

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@things-factory/modeller-ui';

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

@@ -0,0 +1,119 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@things-factory/modeller-ui';
+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/parameters/parameters-editor-builder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parameters-editor-builder.js","sourceRoot":"","sources":["../../../src/parameters/parameters-editor-builder.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,6BAA6B,CAAA;AAEpC,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 '@things-factory/modeller-ui'\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/parameters/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;
+}