@things-factory/integration-ui 7.0.1-alpha.9 → 7.0.1-alpha.92

package/client/viewparts/scenario-monitor.ts

@@ -1,5 +1,6 @@
+import '@material/web/icon/icon.js'
+
 import '@operato/data-grist'
-import '@material/mwc-icon-button'
 import './scenario-instance-monitor'
 
 import gql from 'graphql-tag'
@@ -86,15 +87,20 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         line-height: 8px;
       }
 
+      [desc] md-icon {
+        --md-icon-size: 18px;
+        border-radius: 50%;
+        color: var(--theme-white-color);
+      }
+
       [buttons] {
-        --mdc-icon-button-size: 24px;
-        --mdc-icon-size: 24px;
         border-top: var(--border-dark-color);
         padding: var(--padding-narrow) 0 0 0;
         text-align: right;
       }
 
-      [buttons] mwc-icon-button {
+      [buttons] md-icon {
+        --md-icon-size: 22px;
         color: var(--primary-color);
       }
 
@@ -104,12 +110,6 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         margin-bottom: auto;
       }
 
-      [desc] mwc-icon {
-        border-radius: 50%;
-        color: var(--theme-white-color);
-        font-size: 18px;
-      }
-
       :host([mode='detail']) [schedule] {
         margin: var(--margin-default) 0 0 0;
       }
@@ -194,7 +194,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
           <span>${instances.length}</span>
         </div>
         <div schedule>
-          <mwc-icon .style="background-color: ${color};">schedule</mwc-icon>
+          <md-icon .style="background-color: ${color};">schedule</md-icon>
           <pre>${schedule}</pre>
         </div>
         ${this.renderButtons(scenario)}
@@ -224,10 +224,10 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
     return html`
       <div buttons ?detail=${this.mode == 'detail'}>
-        <mwc-icon-button @click=${e => this.popupLogView(scenario)} icon="text_snippet"></mwc-icon-button>
+        <md-icon @click=${e => this.popupLogView(scenario)}>text_snippet</md-icon>
         ${!scenarioInstance
-          ? html` <mwc-icon-button icon="play_circle_outline" @click=${e => this.startScenario(scenario)}></mwc-icon-button>`
-          : html` <mwc-icon-button icon="pause_circle_outline" @click=${e => this.stopScenario(scenario)} stop></mwc-icon-button> `}
+          ? html` <md-icon @click=${e => this.startScenario(scenario)}>play_circle</md-icon>`
+          : html` <md-icon @click=${e => this.stopScenario(scenario)} stop>pause_circle</md-icon> `}
       </div>
     `
   }

package/client/viewparts/scenarios-monitor.ts

@@ -1,5 +1,6 @@
+import '@material/web/icon/icon.js'
+
 import '@operato/data-grist'
-import '@material/mwc-icon-button'
 import './scenario-monitor'
 
 import { css, html, LitElement } from 'lit'
@@ -38,6 +39,7 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
       [info] > span {
         display: flex;
         margin-left: auto;
+        align-items: center;
       }
       [info] input {
         margin: var(--input-margin);
@@ -46,13 +48,13 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
         border-radius: var(--border-radius);
         font: var(--input-font);
       }
-      [info] mwc-icon {
+      [info] md-icon {
         margin-left: var(--margin-narrow);
         color: rgba(var(--secondary-color-rgb), 0.6);
         line-height: 34px;
         cursor: pointer;
       }
-      [info] mwc-icon[active] {
+      [info] md-icon[active] {
         color: var(--primary-color);
       }
 
@@ -123,8 +125,8 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
         <h2>scenarios</h2>
         <span>
           <input .value=${filter} @change=${e => (this.filter = e.target.value)} placeholder="search" />
-          <mwc-icon @click=${e => (this.mode = 'brief')} ?active=${mode == 'brief'}>view_comfy</mwc-icon>
-          <mwc-icon @click=${e => (this.mode = 'detail')} ?active=${mode == 'detail'}>dehaze</mwc-icon>
+          <md-icon @click=${e => (this.mode = 'brief')} ?active=${mode == 'brief'}>view_comfy</md-icon>
+          <md-icon @click=${e => (this.mode = 'detail')} ?active=${mode == 'detail'}>dehaze</md-icon>
         </span>
       </div>
 

package/dist-client/bootstrap.d.ts

@@ -1,4 +1,3 @@
-import '@material/mwc-icon';
 import './editors/entity-editor';
 import './editors/property-editor';
 export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -1,4 +1,3 @@
-import '@material/mwc-icon';
 import './editors/entity-editor';
 import './editors/property-editor';
 import { OxGristEditorJson } from '@operato/app/grist-editor/ox-grist-editor-json.js';

package/dist-client/bootstrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,yBAAyB,CAAA;AAChC,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mDAAmD,CAAA;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,wDAAwD,CAAA;AAC/F,OAAO,EACL,cAAc,IAAI,mBAAmB,EACrC,gBAAgB,IAAI,qBAAqB,EAE1C,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAA;AAEvF,OAAO,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAA;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAE7D,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAA;IAClD,mBAAmB,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAA;IACnD,mBAAmB,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAA;IACrD,mBAAmB,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAA;IAC9C,mBAAmB,CAAC,YAAY,EAAE,uBAAuB,CAAC,CAAA;IAC1D,mBAAmB,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAA;IAEpD,qBAAqB,CAAC,SAAS,EAAE,sBAAsB,CAAC,CAAA;IAExD,gBAAgB,CAAC,QAAQ,CAAC;QACxB,cAAc,EAAE,8BAA8B;QAC9C,iBAAiB,EAAE,iCAAiC;QACpD,WAAW,EAAE,2BAA2B;QACxC,iBAAiB,EAAE,iCAAiC;QACpD,qBAAqB,EAAE,qCAAqC;QAC5D,eAAe,EAAE,+BAA+B;QAChD,sBAAsB,EAAE,sCAAsC;KAC/D,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import '@material/mwc-icon'\nimport './editors/entity-editor'\nimport './editors/property-editor'\n\nimport { OxGristEditorJson } from '@operato/app/grist-editor/ox-grist-editor-json.js'\nimport { OxGristRendererCrontab } from '@operato/app/grist-editor/ox-grist-renderer-crontab.js'\nimport {\n  registerEditor as registerGristEditor,\n  registerRenderer as registerGristRenderer,\n  OxGristRendererJson5\n} from '@operato/data-grist'\nimport { OxGristEditorCrontab } from '@operato/grist-editor/ox-grist-editor-crontab.js'\nimport { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js'\nimport { OxGristEditorParameters } from '@operato/grist-editor/ox-grist-editor-parameters.js'\nimport { OxPropertyEditor } from '@operato/property-editor'\n\nimport { ConnectionSelector } from './grist/connection-selector'\nimport { ConnectorSelector } from './grist/connector-selector'\nimport { TaskTypeSelector } from './grist/task-type-selector'\n\nexport default function bootstrap() {\n  registerGristEditor('task-type', TaskTypeSelector)\n  registerGristEditor('connector', ConnectorSelector)\n  registerGristEditor('connection', ConnectionSelector)\n  registerGristEditor('json', OxGristEditorJson)\n  registerGristEditor('parameters', OxGristEditorParameters)\n  registerGristEditor('crontab', OxGristEditorCrontab)\n\n  registerGristRenderer('crontab', OxGristRendererCrontab)\n\n  OxPropertyEditor.register({\n    'http-headers': 'property-editor-http-headers',\n    'http-parameters': 'property-editor-http-parameters',\n    'http-body': 'property-editor-http-body',\n    'entity-selector': 'property-editor-entity-selector',\n    'scenario-step-input': 'property-editor-scenario-step-input',\n    'tag-scenarios': 'property-editor-tag-scenarios',\n    'procedure-parameters': 'property-editor-procedure-parameters'\n  })\n}\n"]}
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAChC,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mDAAmD,CAAA;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,wDAAwD,CAAA;AAC/F,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,gBAAgB,IAAI,qBAAqB,EAAwB,MAAM,qBAAqB,CAAA;AAC5I,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAA;AAEvF,OAAO,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAA;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAE3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAE7D,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAA;IAClD,mBAAmB,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAA;IACnD,mBAAmB,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAA;IACrD,mBAAmB,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAA;IAC9C,mBAAmB,CAAC,YAAY,EAAE,uBAAuB,CAAC,CAAA;IAC1D,mBAAmB,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAA;IAEpD,qBAAqB,CAAC,SAAS,EAAE,sBAAsB,CAAC,CAAA;IAExD,gBAAgB,CAAC,QAAQ,CAAC;QACxB,cAAc,EAAE,8BAA8B;QAC9C,iBAAiB,EAAE,iCAAiC;QACpD,WAAW,EAAE,2BAA2B;QACxC,iBAAiB,EAAE,iCAAiC;QACpD,qBAAqB,EAAE,qCAAqC;QAC5D,eAAe,EAAE,+BAA+B;QAChD,sBAAsB,EAAE,sCAAsC;KAC/D,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import './editors/entity-editor'\nimport './editors/property-editor'\n\nimport { OxGristEditorJson } from '@operato/app/grist-editor/ox-grist-editor-json.js'\nimport { OxGristRendererCrontab } from '@operato/app/grist-editor/ox-grist-renderer-crontab.js'\nimport { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer, OxGristRendererJson5 } from '@operato/data-grist'\nimport { OxGristEditorCrontab } from '@operato/grist-editor/ox-grist-editor-crontab.js'\nimport { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js'\nimport { OxGristEditorParameters } from '@operato/grist-editor/ox-grist-editor-parameters.js'\nimport { OxPropertyEditor } from '@operato/property-editor'\n\nimport { ConnectionSelector } from './grist/connection-selector'\nimport { ConnectorSelector } from './grist/connector-selector'\nimport { TaskTypeSelector } from './grist/task-type-selector'\n\nexport default function bootstrap() {\n  registerGristEditor('task-type', TaskTypeSelector)\n  registerGristEditor('connector', ConnectorSelector)\n  registerGristEditor('connection', ConnectionSelector)\n  registerGristEditor('json', OxGristEditorJson)\n  registerGristEditor('parameters', OxGristEditorParameters)\n  registerGristEditor('crontab', OxGristEditorCrontab)\n\n  registerGristRenderer('crontab', OxGristRendererCrontab)\n\n  OxPropertyEditor.register({\n    'http-headers': 'property-editor-http-headers',\n    'http-parameters': 'property-editor-http-parameters',\n    'http-body': 'property-editor-http-body',\n    'entity-selector': 'property-editor-entity-selector',\n    'scenario-step-input': 'property-editor-scenario-step-input',\n    'tag-scenarios': 'property-editor-tag-scenarios',\n    'procedure-parameters': 'property-editor-procedure-parameters'\n  })\n}\n"]}

package/dist-client/editors/entity-selector.d.ts

@@ -2,7 +2,7 @@ import '@operato/data-grist';
 import { LitElement } from 'lit';
 import { DataGrist } from '@operato/data-grist/ox-grist.js';
 export declare class EntitySelector extends LitElement {
-    static styles: any[];
+    static styles: import("lit").CSSResult[];
     value?: string;
     searchFields: any;
     config: any;

package/dist-client/editors/entity-selector.js

@@ -7,7 +7,8 @@ import { DataGrist } from '@operato/data-grist/ox-grist.js';
 import { buildArgs, client } from '@operato/graphql';
 import { i18next } from '@operato/i18n';
 import { isMobileDevice } from '@operato/utils';
-import { MultiColumnFormStyles } from '@things-factory/form-ui';
+import { MultiColumnFormStyles } from '@operato/form';
+import { ButtonContainerStyles } from '@operato/styles';
 let EntitySelector = class EntitySelector extends LitElement {
     render() {
         return html `
@@ -22,16 +23,11 @@ let EntitySelector = class EntitySelector extends LitElement {
         .fields="${this.searchFields}"
       ></search-form>
 
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.config}
-        .data=${this.data}
-        .fetchHandler="${this.fetchHandler.bind(this)}"
-      ></ox-grist>
+      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.config} .data=${this.data} .fetchHandler="${this.fetchHandler.bind(this)}"></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>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>check</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `;
     }
@@ -112,19 +108,9 @@ let EntitySelector = class EntitySelector extends LitElement {
                 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,
+                    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' },
+                    props: fieldType === 'string' ? { searchOper: 'i_like' } : fieldType === 'object' ? { searchOper: 'in' } : { searchOper: 'eq' },
                     attrs: fieldType === 'boolean' ? ['indeterminated'] : []
                 };
             });
@@ -194,9 +180,7 @@ let EntitySelector = class EntitySelector extends LitElement {
             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} { ${selectField.subFields && selectField.subFields.length > 0 ? selectField.subFields.join(' ') : `id name description`} }`
                     : `${selectField.name}`;
             })}
       }
@@ -226,6 +210,7 @@ let EntitySelector = class EntitySelector extends LitElement {
     }
 };
 EntitySelector.styles = [
+    ButtonContainerStyles,
     MultiColumnFormStyles,
     css `
       :host {
@@ -239,11 +224,6 @@ EntitySelector.styles = [
         flex: 1;
       }
 
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
-
       form {
         position: relative;
       }

package/dist-client/editors/entity-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"entity-selector.js","sourceRoot":"","sources":["../../client/editors/entity-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { DataGrist } from '@operato/data-grist/ox-grist.js'\nimport { buildArgs, client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\nimport { MultiColumnFormStyles } from '@things-factory/form-ui'\n\n@customElement('entity-selector')\nexport class EntitySelector 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      ox-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: Array }) searchFields: any\n  @property({ type: Object }) config: any\n  @property({ type: Object }) data: any\n  @property({ type: String }) queryName!: string\n  @property({ type: Array }) select: any\n  @property({ type: Object }) list: any\n  @property({ type: Object }) basicArgs: any\n  @property({ type: Array }) selectedRecords: any\n\n  @query('ox-grist') grist!: DataGrist\n  @query('search-form') searchForm!: HTMLFormElement\n\n  render() {\n    return html`\n      <search-form\n        id=\"search-form\"\n        @keypress=\"${async e => {\n          if (e.keyCode === 13) {\n            this.data = await this.grist.fetch()\n          }\n        }}\"\n        @submit=\"${async e => (this.data = await this.grist.fetch())}\"\n        .fields=\"${this.searchFields}\"\n      ></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      ></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.dispatchEvent(\n      new CustomEvent('entity-selected', {\n        detail: {\n          entity: this.selected\n        }\n      })\n    )\n  }\n\n  async fetchHandler({ page, limit, sorters = [] }) {\n    const response = await client.query({\n      query: gql`\n        query {\n          ${this.queryName} (${buildArgs(await this._buildConditions(page, limit, sorters))}) {\n            ${this.getSelectFields()}\n          }\n        }\n      `\n    })\n\n    if (!response.errors) {\n      const records = response.data[this.queryName].items.map(item => {\n        if (this.value === item.id) {\n          this.selectedRecords = [item]\n          item['__selected__'] = true\n        }\n\n        return item\n      })\n      const total = response.data[this.queryName].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          }\n        },\n        appendable: false\n      }\n    }\n\n    if (this.select && this.select.length > 0) {\n      let _searchFields = this.select.filter(selectField => !selectField.hidden)\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\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(page, limit, sorters) {\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    return queryConditions\n  }\n\n  get selected() {\n    var selected = this.grist.selected\n\n    return selected && selected.length > 0 ? selected[0] : undefined\n  }\n}\n"]}
+{"version":3,"file":"entity-selector.js","sourceRoot":"","sources":["../../client/editors/entity-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { DataGrist } from '@operato/data-grist/ox-grist.js'\nimport { buildArgs, client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\nimport { MultiColumnFormStyles } from '@operato/form'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('entity-selector')\nexport class EntitySelector extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    MultiColumnFormStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: #fff;\n      }\n\n      ox-grist {\n        flex: 1;\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: Array }) searchFields: any\n  @property({ type: Object }) config: any\n  @property({ type: Object }) data: any\n  @property({ type: String }) queryName!: string\n  @property({ type: Array }) select: any\n  @property({ type: Object }) list: any\n  @property({ type: Object }) basicArgs: any\n  @property({ type: Array }) selectedRecords: any\n\n  @query('ox-grist') grist!: DataGrist\n  @query('search-form') searchForm!: HTMLFormElement\n\n  render() {\n    return html`\n      <search-form\n        id=\"search-form\"\n        @keypress=\"${async e => {\n          if (e.keyCode === 13) {\n            this.data = await this.grist.fetch()\n          }\n        }}\"\n        @submit=\"${async e => (this.data = await this.grist.fetch())}\"\n        .fields=\"${this.searchFields}\"\n      ></search-form>\n\n      <ox-grist .mode=${isMobileDevice() ? 'LIST' : 'GRID'} .config=${this.config} .data=${this.data} .fetchHandler=\"${this.fetchHandler.bind(this)}\"></ox-grist>\n\n      <div class=\"button-container\">\n        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>\n        <button @click=${this.onConfirm.bind(this)}><md-icon>check</md-icon>${i18next.t('button.confirm')}</button>\n      </div>\n    `\n  }\n\n  onCancel() {\n    history.back()\n  }\n\n  onConfirm() {\n    this.dispatchEvent(\n      new CustomEvent('entity-selected', {\n        detail: {\n          entity: this.selected\n        }\n      })\n    )\n  }\n\n  async fetchHandler({ page, limit, sorters = [] }) {\n    const response = await client.query({\n      query: gql`\n        query {\n          ${this.queryName} (${buildArgs(await this._buildConditions(page, limit, sorters))}) {\n            ${this.getSelectFields()}\n          }\n        }\n      `\n    })\n\n    if (!response.errors) {\n      const records = response.data[this.queryName].items.map(item => {\n        if (this.value === item.id) {\n          this.selectedRecords = [item]\n          item['__selected__'] = true\n        }\n\n        return item\n      })\n      const total = response.data[this.queryName].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          }\n        },\n        appendable: false\n      }\n    }\n\n    if (this.select && this.select.length > 0) {\n      let _searchFields = this.select.filter(selectField => !selectField.hidden)\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: fieldType === 'string' ? 'text' : numberTypes.indexOf(fieldType) >= 0 ? 'number' : fieldType === 'boolean' ? 'checkbox' : fieldType,\n          queryName: selectField.queryName,\n          props: fieldType === 'string' ? { searchOper: 'i_like' } : fieldType === 'object' ? { searchOper: 'in' } : { 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\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} { ${selectField.subFields && selectField.subFields.length > 0 ? selectField.subFields.join(' ') : `id name description`} }`\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(page, limit, sorters) {\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    return queryConditions\n  }\n\n  get selected() {\n    var selected = this.grist.selected\n\n    return selected && selected.length > 0 ? selected[0] : undefined\n  }\n}\n"]}

package/dist-client/editors/things-editor-entity-selector.d.ts

@@ -1,7 +1,7 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import './entity-selector';
 import { LitElement } from 'lit';
 export default class ThingsEditorEntitySelector extends LitElement {

package/dist-client/editors/things-editor-entity-selector.js

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import './entity-selector';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
@@ -13,7 +13,7 @@ let ThingsEditorEntitySelector = class ThingsEditorEntitySelector extends LitEle
         return html `
       <input id="text" type="text" .value=${this.value || ''} @change=${e => this._onInputChanged(e)} />
 
-      <mwc-icon @click=${e => this.openSelector()}>dashboard</mwc-icon>
+      <md-icon @click=${e => this.openSelector()}>dashboard</md-icon>
     `;
     }
     _onInputChanged(e) {
@@ -65,7 +65,7 @@ ThingsEditorEntitySelector.styles = [
         height: 100%;
       }
 
-      mwc-icon {
+      md-icon {
         position: absolute;
         top: 0;
         right: 0;

package/dist-client/editors/things-editor-entity-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"things-editor-entity-selector.js","sourceRoot":"","sources":["../../client/editors/things-editor-entity-selector.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAG5B,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,UAAU;IAkChE,MAAM;QACJ,OAAO,IAAI,CAAA;4CAC6B,IAAI,CAAC,KAAK,IAAI,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;;yBAE3E,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;KAC5C,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAC;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;QAC3B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAA;SAClB;QAED,IAAI,QAAQ,GAAG,IAAI,CAAA;;qBAEF,IAAI;qBACJ,IAAI,CAAC,UAAU,CAAC,SAAS;iBAC7B,IAAI,CAAC,KAAK;2BACA,CAAC,CAAC,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAA;YAC5B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAA;YAErD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAA;YAED,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;SACxC,CAAC,CAAA;IACJ,CAAC;;AAtFM,iCAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;KAwBF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAAe;AAC1C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8DAAgB;AA9BxB,0BAA0B;IAD9C,aAAa,CAAC,+BAA+B,CAAC;GAC1B,0BAA0B,CAwF9C;eAxFoB,0BAA0B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport './entity-selector'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('things-editor-entity-selector')\nexport default class ThingsEditorEntitySelector extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: relative;\n        display: inline-block;\n      }\n\n      input[type='text'] {\n        box-sizing: border-box;\n        width: 100%;\n        height: 100%;\n      }\n\n      mwc-icon {\n        position: absolute;\n        top: 0;\n        right: 0;\n      }\n\n      select,\n      ox-select,\n      input:not([type='checkbox']) {\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-radius: 4px;\n      }\n    `\n  ]\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) properties: any\n\n  popup: any\n\n  render() {\n    return html`\n      <input id=\"text\" type=\"text\" .value=${this.value || ''} @change=${e => this._onInputChanged(e)} />\n\n      <mwc-icon @click=${e => this.openSelector()}>dashboard</mwc-icon>\n    `\n  }\n\n  _onInputChanged(e) {\n    e.stopPropagation()\n\n    this.value = e.target.value\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    var template = html`\n      <entity-selector\n        .creatable=${true}\n        .queryName=${this.properties.queryName}\n        .value=${this.value}\n        @entity-selected=${e => {\n          e.stopPropagation()\n\n          var entity = e.detail.entity\n          this.value = entity[this.properties.valueKey || 'id']\n\n          this.dispatchEvent(\n            new CustomEvent('change', {\n              bubbles: true,\n              composed: true\n            })\n          )\n\n          this.popup && this.popup.close()\n        }}\n      ></entity-selector>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.select entity')\n    })\n  }\n}\n"]}
+{"version":3,"file":"things-editor-entity-selector.js","sourceRoot":"","sources":["../../client/editors/things-editor-entity-selector.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AACnC,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAG5B,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,UAAU;IAkChE,MAAM;QACJ,OAAO,IAAI,CAAA;4CAC6B,IAAI,CAAC,KAAK,IAAI,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;;wBAE5E,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;KAC3C,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAC;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;QAC3B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAA;SAClB;QAED,IAAI,QAAQ,GAAG,IAAI,CAAA;;qBAEF,IAAI;qBACJ,IAAI,CAAC,UAAU,CAAC,SAAS;iBAC7B,IAAI,CAAC,KAAK;2BACA,CAAC,CAAC,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YAEnB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAA;YAC5B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAA;YAErD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAA;YAED,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;SACxC,CAAC,CAAA;IACJ,CAAC;;AAtFM,iCAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;KAwBF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAAe;AAC1C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8DAAgB;AA9BxB,0BAA0B;IAD9C,aAAa,CAAC,+BAA+B,CAAC;GAC1B,0BAA0B,CAwF9C;eAxFoB,0BAA0B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport './entity-selector'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('things-editor-entity-selector')\nexport default class ThingsEditorEntitySelector extends LitElement {\n  static styles = [\n    css`\n      :host {\n        position: relative;\n        display: inline-block;\n      }\n\n      input[type='text'] {\n        box-sizing: border-box;\n        width: 100%;\n        height: 100%;\n      }\n\n      md-icon {\n        position: absolute;\n        top: 0;\n        right: 0;\n      }\n\n      select,\n      ox-select,\n      input:not([type='checkbox']) {\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-radius: 4px;\n      }\n    `\n  ]\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) properties: any\n\n  popup: any\n\n  render() {\n    return html`\n      <input id=\"text\" type=\"text\" .value=${this.value || ''} @change=${e => this._onInputChanged(e)} />\n\n      <md-icon @click=${e => this.openSelector()}>dashboard</md-icon>\n    `\n  }\n\n  _onInputChanged(e) {\n    e.stopPropagation()\n\n    this.value = e.target.value\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    var template = html`\n      <entity-selector\n        .creatable=${true}\n        .queryName=${this.properties.queryName}\n        .value=${this.value}\n        @entity-selected=${e => {\n          e.stopPropagation()\n\n          var entity = e.detail.entity\n          this.value = entity[this.properties.valueKey || 'id']\n\n          this.dispatchEvent(\n            new CustomEvent('change', {\n              bubbles: true,\n              composed: true\n            })\n          )\n\n          this.popup && this.popup.close()\n        }}\n      ></entity-selector>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.select entity')\n    })\n  }\n}\n"]}

package/dist-client/editors/things-editor-oracle-procedure.d.ts

@@ -1,7 +1,7 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import '@operato/i18n/ox-i18n.js';
 import { OxFormField } from '@operato/input';
 type ProcedureParameterType = {

package/dist-client/editors/things-editor-oracle-procedure.js

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import '@operato/i18n/ox-i18n.js';
 import { css, html } from 'lit';
 import { customElement, property, queryAll, state } from 'lit/decorators.js';
@@ -84,13 +84,13 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
             <input type="number" data-max-size placeholder="max-size" .value=${String(item.maxSize)} />
 
             <button class="record-action" @click=${(e) => this._delete(e)} tabindex="-1">
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
             <button class="record-action" @click=${(e) => this._up(e)} tabindex="-1">
-              <mwc-icon>arrow_upward</mwc-icon>
+              <md-icon>arrow_upward</md-icon>
             </button>
             <button class="record-action" @click=${(e) => this._down(e)} tabindex="-1">
-              <mwc-icon>arrow_downward</mwc-icon>
+              <md-icon>arrow_downward</md-icon>
             </button>
           </div>
         `)}
@@ -120,10 +120,10 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
         <input type="number" data-max-size placeholder="max-size" value="" />
 
         <button class="record-action" @click=${(e) => this._add()} tabindex="-1">
-          <mwc-icon>add</mwc-icon>
+          <md-icon>add</md-icon>
         </button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
+        <button class="hidden"><md-icon>add</md-icon></button>
+        <button class="hidden"><md-icon>add</md-icon></button>
       </div>
 
       <datalist id="step-list">${steps.map(id => html ` <option value=${id}></option> `)}</datalist>
@@ -311,8 +311,8 @@ ThingsEditorProcedureParameters.styles = [
         margin-left: -5px;
       }
 
-      button mwc-icon {
-        font-size: var(--fontsize-default);
+      button md-icon {
+        --md-icon-size: var(--fontsize-default);
       }
 
       button:focus,

package/dist-client/editors/things-editor-oracle-procedure.js.map

@@ -1 +1 @@
-{"version":3,"file":"things-editor-oracle-procedure.js","sourceRoot":"","sources":["../../client/editors/things-editor-oracle-procedure.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport '@operato/i18n/ox-i18n.js'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll, state } from 'lit/decorators.js'\n\nimport { OxFormField } from '@operato/input'\n\ntype ProcedureParameterType = {\n  name: string\n  dir: string\n  type: string\n  val?: any\n  accessor?: string\n  maxSize?: number\n}\n\ntype ValueType = {\n  code?: string\n  procedure?: string\n  parameters?: ProcedureParameterType[]\n}\n\n/**\n input component for procedure-parameters\n \n Example:\n \n   <things-editor-oracle-procedure \n     value=${map}\n   </things-editor-oracle-procedure>\n */\n@customElement('things-editor-oracle-procedure')\nexport class ThingsEditorProcedureParameters extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        margin-bottom: var(--margin-wide);\n      }\n\n      div {\n        display: flex;\n        flex-flow: row nowrap;\n        gap: var(--margin-default);\n        margin-bottom: var(--margin-narrow);\n      }\n\n      pre {\n        flex: 1;\n        background-color: #333;\n        color: white;\n        margin: 0;\n        padding: 4px 6px;\n        font-size: 1.5em;\n        display: flex;\n      }\n\n      code {\n        flex: 1;\n        white-space: normal;\n        min-height: 32px;\n      }\n\n      button {\n        border: var(--button-border);\n        border-radius: var(--border-radius);\n        background-color: var(--button-background-color);\n        padding: var(--padding-narrow) var(--padding-default);\n        line-height: 0.8;\n        color: var(--button-color);\n        cursor: pointer;\n      }\n\n      button + button {\n        margin-left: -5px;\n      }\n\n      button mwc-icon {\n        font-size: var(--fontsize-default);\n      }\n\n      button:focus,\n      button:hover,\n      button:active {\n        border: var(--button-activ-border);\n        background-color: var(--button-background-focus-color);\n        color: var(--theme-white-color);\n      }\n\n      input {\n        flex: 1;\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        font: var(--input-font);\n        color: var(--primary-text-color);\n        min-width: 50px;\n      }\n\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      button.hidden {\n        opacity: 0;\n        cursor: default;\n      }\n\n      select,\n      ox-select,\n      input:not([type='checkbox']) {\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-radius: 4px;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: ValueType = {}\n  @property({ type: Array }) steps: string[] = []\n\n  @state() private procedure?: string = ''\n  @state() private parameters?: ProcedureParameterType[] = []\n  private _changingNow: boolean = false\n\n  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const code = this.value?.code || ''\n    const parameters = this.parameters || []\n    const procedure = this.procedure || ''\n\n    const steps = this.steps || []\n\n    return html`\n      <div>\n        <label><ox-i18n msgid=\"label.procedure-code\"></ox-i18n></label>\n      </div>\n\n      <div>\n        <pre>\n          <code>${code}</code>\n        </pre\n        >\n      </div>\n\n      <div>\n        <label><ox-i18n msgid=\"label.procedure-name\"></ox-i18n></label>\n      </div>\n\n      <div>\n        <input type=\"text\" data-procedure .value=${procedure} />\n      </div>\n\n      <div>\n        <label><ox-i18n msgid=\"label.parameters\"></ox-i18n></label>\n      </div>\n\n      ${parameters.map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-name placeholder=\"name\" .value=${item.name} />\n            <select data-dir placeholder=\"dir\" .value=${item.dir}>\n              <option value=\"\" ?selected=${item.dir == ''}>&nbsp;</option>\n              <option value=\"In\" ?selected=${item.dir == 'In'}>In</option>\n              <option value=\"Inout\" ?selected=${item.dir == 'Inout'}>Inout</option>\n              <option value=\"Out\" ?selected=${item.dir == 'Out'}>Out</option>\n            </select>\n            <select data-type placeholder=\"type\" .value=${item.type}>\n              <option value=\"\" ?selected=${item.type == ''}>&nbsp;</option>\n              <option value=\"String\" ?selected=${item.type == 'String'}>String</option>\n              <option value=\"Number\" ?selected=${item.type == 'Number'}>Number</option>\n              <option value=\"Date\" ?selected=${item.type == 'Date'}>Date</option>\n              <!-- \n                <option value=\"Buffer\" ?selected=${item.type == 'Buffer'}>Buffer</option>\n                <option value=\"Blob\" ?selected=${item.type == 'Blob'}>Blob</option>\n                <option value=\"Clob\" ?selected=${item.type == 'Clob'}>Clob</option>\n              -->\n              <option value=\"Cursor\" ?selected=${item.type == 'Cursor'}>Cursor</option>\n            </select>\n            <input type=\"text\" data-accessor placeholder=\"accessor\" .value=${item.accessor || ''} list=\"step-list\" />\n            <input type=\"text\" data-val placeholder=\"val\" .value=${item.val || ''} />\n            <input type=\"number\" data-max-size placeholder=\"max-size\" .value=${String(item.maxSize)} />\n\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._delete(e)} tabindex=\"-1\">\n              <mwc-icon>remove</mwc-icon>\n            </button>\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._up(e)} tabindex=\"-1\">\n              <mwc-icon>arrow_upward</mwc-icon>\n            </button>\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._down(e)} tabindex=\"-1\">\n              <mwc-icon>arrow_downward</mwc-icon>\n            </button>\n          </div>\n        `\n      )}\n\n      <div data-record-new>\n        <input type=\"text\" data-name placeholder=\"name\" value=\"\" />\n        <select data-dir placeholder=\"dir\">\n          <option value=\"\" selected>&nbsp;</option>\n          <option value=\"In\">In</option>\n          <option value=\"Inout\">Inout</option>\n          <option value=\"Out\">Out</option>\n        </select>\n        <select data-type placeholder=\"type\" value=\"\">\n          <option value=\"\" selected>&nbsp;</option>\n          <option value=\"String\">String</option>\n          <option value=\"Number\">Number</option>\n          <option value=\"Date\">Date</option>\n          <!--\n          <option value=\"Buffer\">Buffer</option>\n          <option value=\"Blob\">Blob</option>\n          <option value=\"Clob\">Clob</option>\n          -->\n          <option value=\"Cursor\">Cursor</option>\n        </select>\n        <input type=\"text\" data-accessor placeholder=\"accessor\" value=\"\" list=\"step-list\" />\n        <input type=\"text\" data-val placeholder=\"val\" value=\"\" />\n        <input type=\"number\" data-max-size placeholder=\"max-size\" value=\"\" />\n\n        <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n          <mwc-icon>add</mwc-icon>\n        </button>\n        <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n        <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n      </div>\n\n      <datalist id=\"step-list\">${steps.map(id => html` <option value=${id}></option> `)}</datalist>\n    `\n  }\n\n  updated(changes: any) {\n    if (changes.has('value')) {\n      /* 하위 호환성때문에, Array타입 값을 처리하도록 함. 다음 마이너 업그레이드시에 제거할 것. */\n      const value = (Array.isArray(this.value) ? { parameters: this.value } : this.value) as ValueType\n\n      const { procedure, parameters } = value\n\n      this.procedure = procedure\n      this.parameters = parameters\n    }\n  }\n\n  _onChange(e: Event) {\n    if (this._changingNow) {\n      return\n    }\n\n    this._changingNow = true\n\n    const input = e.target as HTMLInputElement\n\n    if (input.hasAttribute('data-procedure')) {\n      this.procedure = input.value\n      this._updateValue()\n    } else {\n      const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement\n\n      if (record.hasAttribute('data-record')) {\n        this._build()\n      } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-type')) {\n        this._add()\n      }\n    }\n\n    this._changingNow = false\n  }\n\n  _adjust({ name, type, dir, maxSize, val, accessor }: ProcedureParameterType): ProcedureParameterType {\n    const entry = {\n      name: name && String(name).trim(),\n      type,\n      dir,\n      accessor: accessor && String(accessor).trim()\n    } as ProcedureParameterType\n\n    if (dir != 'In' && (type == 'String' || type == 'Buffer') && maxSize !== null && maxSize !== undefined && !isNaN(maxSize)) {\n      entry.maxSize = maxSize\n    }\n\n    if (dir != 'Out' && val !== null && val !== undefined && val != '') {\n      entry.val = type == 'Number' ? Number(val) : val\n    }\n\n    return entry\n  }\n\n  _build(includeNewRecord?: boolean) {\n    if (includeNewRecord) {\n      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n    }\n\n    var newmap: ProcedureParameterType[] = []\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n      const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n      const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n      const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value\n      const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n      const inputs = record.querySelectorAll('[data-type]:not([style*=\"display: none\"])') as NodeListOf<HTMLInputElement>\n\n      if (!inputs || inputs.length == 0) {\n        continue\n      }\n\n      if (name) {\n        newmap.push(this._adjust({ name, type, dir, val, accessor, maxSize }))\n      }\n    }\n\n    this.parameters = newmap\n    this._updateValue()\n  }\n\n  _updateValue() {\n    const args = (this.parameters || []).map(p => ':' + p.name).join(', ')\n\n    this.value = {\n      code: `${this.procedure}(${args});`,\n      procedure: this.procedure,\n      parameters: this.parameters\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  _add() {\n    this._build(true)\n\n    const inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*=\"display: none\"])') as NodeListOf<HTMLInputElement & { value: any }>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n\n      input.value = ''\n    }\n\n    inputs[0].focus()\n  }\n\n  _delete(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n\n    ;(record!.querySelector('[data-name]') as HTMLInputElement)!.value = ''\n\n    this._build()\n  }\n\n  _up(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record) - 1\n\n    if (index < 0) {\n      return\n    }\n\n    const deleted = array.splice(index, 1)\n    array.splice(index + 1, 0, ...deleted)\n\n    this.parameters = array.map(record => {\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n      const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n      const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n      const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value\n      const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n      return this._adjust({ name, dir, type, val, accessor, maxSize })\n    })\n\n    this._updateValue()\n  }\n\n  _down(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record)\n\n    if (index > array.length) {\n      return\n    }\n\n    array.splice(index, 1)\n    array.splice(index + 1, 0, record)\n\n    this.parameters = array.map(record => {\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n      const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n      const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n      const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value\n      const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n      return this._adjust({ name, dir, type, val, accessor, maxSize })\n    })\n\n    this._updateValue()\n  }\n}\n"]}
+{"version":3,"file":"things-editor-oracle-procedure.js","sourceRoot":"","sources":["../../client/editors/things-editor-oracle-procedure.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport '@operato/i18n/ox-i18n.js'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll, state } from 'lit/decorators.js'\n\nimport { OxFormField } from '@operato/input'\n\ntype ProcedureParameterType = {\n  name: string\n  dir: string\n  type: string\n  val?: any\n  accessor?: string\n  maxSize?: number\n}\n\ntype ValueType = {\n  code?: string\n  procedure?: string\n  parameters?: ProcedureParameterType[]\n}\n\n/**\n input component for procedure-parameters\n \n Example:\n \n   <things-editor-oracle-procedure \n     value=${map}\n   </things-editor-oracle-procedure>\n */\n@customElement('things-editor-oracle-procedure')\nexport class ThingsEditorProcedureParameters extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        margin-bottom: var(--margin-wide);\n      }\n\n      div {\n        display: flex;\n        flex-flow: row nowrap;\n        gap: var(--margin-default);\n        margin-bottom: var(--margin-narrow);\n      }\n\n      pre {\n        flex: 1;\n        background-color: #333;\n        color: white;\n        margin: 0;\n        padding: 4px 6px;\n        font-size: 1.5em;\n        display: flex;\n      }\n\n      code {\n        flex: 1;\n        white-space: normal;\n        min-height: 32px;\n      }\n\n      button {\n        border: var(--button-border);\n        border-radius: var(--border-radius);\n        background-color: var(--button-background-color);\n        padding: var(--padding-narrow) var(--padding-default);\n        line-height: 0.8;\n        color: var(--button-color);\n        cursor: pointer;\n      }\n\n      button + button {\n        margin-left: -5px;\n      }\n\n      button md-icon {\n        --md-icon-size: var(--fontsize-default);\n      }\n\n      button:focus,\n      button:hover,\n      button:active {\n        border: var(--button-activ-border);\n        background-color: var(--button-background-focus-color);\n        color: var(--theme-white-color);\n      }\n\n      input {\n        flex: 1;\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        font: var(--input-font);\n        color: var(--primary-text-color);\n        min-width: 50px;\n      }\n\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      button.hidden {\n        opacity: 0;\n        cursor: default;\n      }\n\n      select,\n      ox-select,\n      input:not([type='checkbox']) {\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-radius: 4px;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: ValueType = {}\n  @property({ type: Array }) steps: string[] = []\n\n  @state() private procedure?: string = ''\n  @state() private parameters?: ProcedureParameterType[] = []\n  private _changingNow: boolean = false\n\n  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const code = this.value?.code || ''\n    const parameters = this.parameters || []\n    const procedure = this.procedure || ''\n\n    const steps = this.steps || []\n\n    return html`\n      <div>\n        <label><ox-i18n msgid=\"label.procedure-code\"></ox-i18n></label>\n      </div>\n\n      <div>\n        <pre>\n          <code>${code}</code>\n        </pre\n        >\n      </div>\n\n      <div>\n        <label><ox-i18n msgid=\"label.procedure-name\"></ox-i18n></label>\n      </div>\n\n      <div>\n        <input type=\"text\" data-procedure .value=${procedure} />\n      </div>\n\n      <div>\n        <label><ox-i18n msgid=\"label.parameters\"></ox-i18n></label>\n      </div>\n\n      ${parameters.map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-name placeholder=\"name\" .value=${item.name} />\n            <select data-dir placeholder=\"dir\" .value=${item.dir}>\n              <option value=\"\" ?selected=${item.dir == ''}>&nbsp;</option>\n              <option value=\"In\" ?selected=${item.dir == 'In'}>In</option>\n              <option value=\"Inout\" ?selected=${item.dir == 'Inout'}>Inout</option>\n              <option value=\"Out\" ?selected=${item.dir == 'Out'}>Out</option>\n            </select>\n            <select data-type placeholder=\"type\" .value=${item.type}>\n              <option value=\"\" ?selected=${item.type == ''}>&nbsp;</option>\n              <option value=\"String\" ?selected=${item.type == 'String'}>String</option>\n              <option value=\"Number\" ?selected=${item.type == 'Number'}>Number</option>\n              <option value=\"Date\" ?selected=${item.type == 'Date'}>Date</option>\n              <!-- \n                <option value=\"Buffer\" ?selected=${item.type == 'Buffer'}>Buffer</option>\n                <option value=\"Blob\" ?selected=${item.type == 'Blob'}>Blob</option>\n                <option value=\"Clob\" ?selected=${item.type == 'Clob'}>Clob</option>\n              -->\n              <option value=\"Cursor\" ?selected=${item.type == 'Cursor'}>Cursor</option>\n            </select>\n            <input type=\"text\" data-accessor placeholder=\"accessor\" .value=${item.accessor || ''} list=\"step-list\" />\n            <input type=\"text\" data-val placeholder=\"val\" .value=${item.val || ''} />\n            <input type=\"number\" data-max-size placeholder=\"max-size\" .value=${String(item.maxSize)} />\n\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._delete(e)} tabindex=\"-1\">\n              <md-icon>remove</md-icon>\n            </button>\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._up(e)} tabindex=\"-1\">\n              <md-icon>arrow_upward</md-icon>\n            </button>\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._down(e)} tabindex=\"-1\">\n              <md-icon>arrow_downward</md-icon>\n            </button>\n          </div>\n        `\n      )}\n\n      <div data-record-new>\n        <input type=\"text\" data-name placeholder=\"name\" value=\"\" />\n        <select data-dir placeholder=\"dir\">\n          <option value=\"\" selected>&nbsp;</option>\n          <option value=\"In\">In</option>\n          <option value=\"Inout\">Inout</option>\n          <option value=\"Out\">Out</option>\n        </select>\n        <select data-type placeholder=\"type\" value=\"\">\n          <option value=\"\" selected>&nbsp;</option>\n          <option value=\"String\">String</option>\n          <option value=\"Number\">Number</option>\n          <option value=\"Date\">Date</option>\n          <!--\n          <option value=\"Buffer\">Buffer</option>\n          <option value=\"Blob\">Blob</option>\n          <option value=\"Clob\">Clob</option>\n          -->\n          <option value=\"Cursor\">Cursor</option>\n        </select>\n        <input type=\"text\" data-accessor placeholder=\"accessor\" value=\"\" list=\"step-list\" />\n        <input type=\"text\" data-val placeholder=\"val\" value=\"\" />\n        <input type=\"number\" data-max-size placeholder=\"max-size\" value=\"\" />\n\n        <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n          <md-icon>add</md-icon>\n        </button>\n        <button class=\"hidden\"><md-icon>add</md-icon></button>\n        <button class=\"hidden\"><md-icon>add</md-icon></button>\n      </div>\n\n      <datalist id=\"step-list\">${steps.map(id => html` <option value=${id}></option> `)}</datalist>\n    `\n  }\n\n  updated(changes: any) {\n    if (changes.has('value')) {\n      /* 하위 호환성때문에, Array타입 값을 처리하도록 함. 다음 마이너 업그레이드시에 제거할 것. */\n      const value = (Array.isArray(this.value) ? { parameters: this.value } : this.value) as ValueType\n\n      const { procedure, parameters } = value\n\n      this.procedure = procedure\n      this.parameters = parameters\n    }\n  }\n\n  _onChange(e: Event) {\n    if (this._changingNow) {\n      return\n    }\n\n    this._changingNow = true\n\n    const input = e.target as HTMLInputElement\n\n    if (input.hasAttribute('data-procedure')) {\n      this.procedure = input.value\n      this._updateValue()\n    } else {\n      const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement\n\n      if (record.hasAttribute('data-record')) {\n        this._build()\n      } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-type')) {\n        this._add()\n      }\n    }\n\n    this._changingNow = false\n  }\n\n  _adjust({ name, type, dir, maxSize, val, accessor }: ProcedureParameterType): ProcedureParameterType {\n    const entry = {\n      name: name && String(name).trim(),\n      type,\n      dir,\n      accessor: accessor && String(accessor).trim()\n    } as ProcedureParameterType\n\n    if (dir != 'In' && (type == 'String' || type == 'Buffer') && maxSize !== null && maxSize !== undefined && !isNaN(maxSize)) {\n      entry.maxSize = maxSize\n    }\n\n    if (dir != 'Out' && val !== null && val !== undefined && val != '') {\n      entry.val = type == 'Number' ? Number(val) : val\n    }\n\n    return entry\n  }\n\n  _build(includeNewRecord?: boolean) {\n    if (includeNewRecord) {\n      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n    }\n\n    var newmap: ProcedureParameterType[] = []\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n      const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n      const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n      const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value\n      const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n      const inputs = record.querySelectorAll('[data-type]:not([style*=\"display: none\"])') as NodeListOf<HTMLInputElement>\n\n      if (!inputs || inputs.length == 0) {\n        continue\n      }\n\n      if (name) {\n        newmap.push(this._adjust({ name, type, dir, val, accessor, maxSize }))\n      }\n    }\n\n    this.parameters = newmap\n    this._updateValue()\n  }\n\n  _updateValue() {\n    const args = (this.parameters || []).map(p => ':' + p.name).join(', ')\n\n    this.value = {\n      code: `${this.procedure}(${args});`,\n      procedure: this.procedure,\n      parameters: this.parameters\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  _add() {\n    this._build(true)\n\n    const inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*=\"display: none\"])') as NodeListOf<HTMLInputElement & { value: any }>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n\n      input.value = ''\n    }\n\n    inputs[0].focus()\n  }\n\n  _delete(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n\n    ;(record!.querySelector('[data-name]') as HTMLInputElement)!.value = ''\n\n    this._build()\n  }\n\n  _up(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record) - 1\n\n    if (index < 0) {\n      return\n    }\n\n    const deleted = array.splice(index, 1)\n    array.splice(index + 1, 0, ...deleted)\n\n    this.parameters = array.map(record => {\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n      const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n      const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n      const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value\n      const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n      return this._adjust({ name, dir, type, val, accessor, maxSize })\n    })\n\n    this._updateValue()\n  }\n\n  _down(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record)\n\n    if (index > array.length) {\n      return\n    }\n\n    array.splice(index, 1)\n    array.splice(index + 1, 0, record)\n\n    this.parameters = array.map(record => {\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n      const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value\n      const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n      const val = (record.querySelector('[data-val]') as HTMLInputElement).value\n      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value\n      const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber\n\n      return this._adjust({ name, dir, type, val, accessor, maxSize })\n    })\n\n    this._updateValue()\n  }\n}\n"]}

package/dist-client/grist/connection-selector.d.ts

@@ -1,4 +1,3 @@
-import '@material/mwc-icon';
 import { DynamicSelector } from './dynamic-selector';
 export declare class ConnectionSelector extends DynamicSelector {
     getOptions(): Promise<any>;

package/dist-client/grist/connection-selector.js

@@ -1,5 +1,4 @@
 import { __decorate } from "tslib";
-import '@material/mwc-icon';
 import gql from 'graphql-tag';
 import { customElement } from 'lit/decorators.js';
 import { client } from '@operato/graphql';

package/dist-client/grist/connection-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"connection-selector.js","sourceRoot":"","sources":["../../client/grist/connection-selector.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;CAWhC,CAAA;AAGM,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,eAAe;IACrD,KAAK,CAAC,UAAU;QACd,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAChC,KAAK,EAAE,qBAAqB;SAC7B,CAAC,CAAA;QAEF,OAAO,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,EAAE,CAAA;IAC7E,CAAC;CACF,CAAA;AARY,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CAQ9B;SARY,kBAAkB","sourcesContent":["import '@material/mwc-icon'\n\nimport gql from 'graphql-tag'\nimport { customElement } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\n\nimport { DynamicSelector } from './dynamic-selector'\n\nconst FETCH_CONNECTIONS_GQL = gql`\n  {\n    connections {\n      items {\n        name\n        description\n      }\n\n      total\n    }\n  }\n`\n\n@customElement('connection-selector')\nexport class ConnectionSelector extends DynamicSelector {\n  async getOptions() {\n    var response = await client.query({\n      query: FETCH_CONNECTIONS_GQL\n    })\n\n    return (response && response.data && response.data.connections.items) || []\n  }\n}\n"]}
+{"version":3,"file":"connection-selector.js","sourceRoot":"","sources":["../../client/grist/connection-selector.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;CAWhC,CAAA;AAGM,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,eAAe;IACrD,KAAK,CAAC,UAAU;QACd,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAChC,KAAK,EAAE,qBAAqB;SAC7B,CAAC,CAAA;QAEF,OAAO,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,EAAE,CAAA;IAC7E,CAAC;CACF,CAAA;AARY,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CAQ9B;SARY,kBAAkB","sourcesContent":["import gql from 'graphql-tag'\nimport { customElement } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\n\nimport { DynamicSelector } from './dynamic-selector'\n\nconst FETCH_CONNECTIONS_GQL = gql`\n  {\n    connections {\n      items {\n        name\n        description\n      }\n\n      total\n    }\n  }\n`\n\n@customElement('connection-selector')\nexport class ConnectionSelector extends DynamicSelector {\n  async getOptions() {\n    var response = await client.query({\n      query: FETCH_CONNECTIONS_GQL\n    })\n\n    return (response && response.data && response.data.connections.items) || []\n  }\n}\n"]}

package/dist-client/grist/connector-selector.d.ts

@@ -1,4 +1,3 @@
-import '@material/mwc-icon';
 import { DynamicSelector } from './dynamic-selector';
 export declare class ConnectorSelector extends DynamicSelector {
     getOptions(): Promise<any>;

package/dist-client/grist/connector-selector.js

@@ -1,5 +1,4 @@
 import { __decorate } from "tslib";
-import '@material/mwc-icon';
 import gql from 'graphql-tag';
 import { customElement } from 'lit/decorators.js';
 import { client } from '@operato/graphql';

package/dist-client/grist/connector-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"connector-selector.js","sourceRoot":"","sources":["../../client/grist/connector-selector.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;CAW/B,CAAA;AAGM,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,eAAe;IACpD,KAAK,CAAC,UAAU;QACd,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAChC,KAAK,EAAE,oBAAoB;SAC5B,CAAC,CAAA;QAEF,OAAO,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,CAAA;IAC5E,CAAC;CACF,CAAA;AARY,iBAAiB;IAD7B,aAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,CAQ7B;SARY,iBAAiB","sourcesContent":["import '@material/mwc-icon'\n\nimport gql from 'graphql-tag'\nimport { customElement } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\n\nimport { DynamicSelector } from './dynamic-selector'\n\nconst FETCH_CONNECTORS_GQL = gql`\n  {\n    connectors {\n      items {\n        name\n        description\n      }\n\n      total\n    }\n  }\n`\n\n@customElement('connector-selector')\nexport class ConnectorSelector extends DynamicSelector {\n  async getOptions() {\n    var response = await client.query({\n      query: FETCH_CONNECTORS_GQL\n    })\n\n    return (response && response.data && response.data.connectors.items) || []\n  }\n}\n"]}
+{"version":3,"file":"connector-selector.js","sourceRoot":"","sources":["../../client/grist/connector-selector.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;CAW/B,CAAA;AAGM,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,eAAe;IACpD,KAAK,CAAC,UAAU;QACd,IAAI,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAChC,KAAK,EAAE,oBAAoB;SAC5B,CAAC,CAAA;QAEF,OAAO,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,CAAA;IAC5E,CAAC;CACF,CAAA;AARY,iBAAiB;IAD7B,aAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,CAQ7B;SARY,iBAAiB","sourcesContent":["import gql from 'graphql-tag'\nimport { customElement } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\n\nimport { DynamicSelector } from './dynamic-selector'\n\nconst FETCH_CONNECTORS_GQL = gql`\n  {\n    connectors {\n      items {\n        name\n        description\n      }\n\n      total\n    }\n  }\n`\n\n@customElement('connector-selector')\nexport class ConnectorSelector extends DynamicSelector {\n  async getOptions() {\n    var response = await client.query({\n      query: FETCH_CONNECTORS_GQL\n    })\n\n    return (response && response.data && response.data.connectors.items) || []\n  }\n}\n"]}

package/dist-client/grist/dynamic-selector.d.ts

@@ -1,4 +1,3 @@
-import '@material/mwc-icon';
 import { OxGristEditor } from '@operato/data-grist';
 export declare class DynamicSelector extends OxGristEditor {
     options: any;

package/dist-client/grist/dynamic-selector.js

@@ -1,4 +1,3 @@
-import '@material/mwc-icon';
 import { OxGristEditor } from '@operato/data-grist';
 import { html } from 'lit';
 const EMPTY_OPTION = { name: '', value: '' };