@things-factory/integration-ui 9.0.0-beta.8 → 9.0.0-beta.80

package/dist-client/editors/things-editor-http-parameters.js

@@ -18,6 +18,53 @@ let ThingsEditorHttpParameters = class ThingsEditorHttpParameters extends LitEle
         this.value = {};
         this._changingNow = false;
     }
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+
+        width: 100%;
+        overflow: hidden;
+        border: 1px solid #ccc;
+        margin: 5px 0;
+
+        background-color: #ddd;
+      }
+
+      div {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+      }
+
+      div > * {
+        min-width: 0px;
+        min-height: 20px;
+        margin: 2px;
+        padding: 0;
+      }
+
+      button {
+        width: 20px;
+        text-align: center;
+        border-radius: 50%;
+        font-size: 1em;
+      }
+
+      input {
+        flex: 1;
+      }
+
+      select,
+      ox-select,
+      input:not([type='checkbox']) {
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-radius: 4px;
+      }
+    `
+    ]; }
     firstUpdated() {
         this.renderRoot.addEventListener('change', this._onChange.bind(this));
     }
@@ -109,53 +156,6 @@ let ThingsEditorHttpParameters = class ThingsEditorHttpParameters extends LitEle
         this._build();
     }
 };
-ThingsEditorHttpParameters.styles = [
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        align-content: center;
-
-        width: 100%;
-        overflow: hidden;
-        border: 1px solid #ccc;
-        margin: 5px 0;
-
-        background-color: #ddd;
-      }
-
-      div {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-      }
-
-      div > * {
-        min-width: 0px;
-        min-height: 20px;
-        margin: 2px;
-        padding: 0;
-      }
-
-      button {
-        width: 20px;
-        text-align: center;
-        border-radius: 50%;
-        font-size: 1em;
-      }
-
-      input {
-        flex: 1;
-      }
-
-      select,
-      ox-select,
-      input:not([type='checkbox']) {
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        border-radius: 4px;
-      }
-    `
-];
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

package/dist-client/editors/things-editor-http-parameters.js.map

@@ -1 +1 @@
-{"version":3,"file":"things-editor-http-parameters.js","sourceRoot":"","sources":["../../client/editors/things-editor-http-parameters.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\nhttp parameters editor element\n\nExample:\n\n  <things-editor-http-parameters value=${map}>\n  </things-editor-http-parameters>\n*/\n@customElement('things-editor-http-parameters')\nexport default class ThingsEditorHttpParameters extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: center;\n\n        width: 100%;\n        overflow: hidden;\n        border: 1px solid #ccc;\n        margin: 5px 0;\n\n        background-color: #ddd;\n      }\n\n      div {\n        display: flex;\n        flex-flow: row nowrap;\n        align-items: center;\n      }\n\n      div > * {\n        min-width: 0px;\n        min-height: 20px;\n        margin: 2px;\n        padding: 0;\n      }\n\n      button {\n        width: 20px;\n        text-align: center;\n        border-radius: 50%;\n        font-size: 1em;\n      }\n\n      input {\n        flex: 1;\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: { [key: string]: string } = {}\n\n  _changingNow: boolean = false\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    return html`\n      ${this._toArray(this.value).map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-key placeholder=\"key\" .value=${item.key} />\n            <input type=\"text\" data-value placeholder=\"value\" .value=${item.value} />\n            <button class=\"record-action\" @click=${e => this._delete(e)} tabindex=\"-1\">x</button>\n          </div>\n        `\n      )}\n\n      <div data-record-new>\n        <input type=\"text\" data-key placeholder=\"key\" value=\"\" />\n        <input type=\"text\" data-value placeholder=\"value\" value=\"\" />\n        <button class=\"record-action\" @click=${e => this._add()} tabindex=\"-1\">+</button>\n      </div>\n    `\n  }\n\n  _onChange(e) {\n    if (this._changingNow) {\n      return\n    }\n\n    this._changingNow = true\n\n    var input = e.target\n    var value = input.value\n\n    var div = input.parentElement\n\n    if (div.hasAttribute('data-record')) {\n      var dataList = div.querySelectorAll('[data-value]:not([hidden])')\n      for (var i = 0; i < dataList.length; i++) {\n        if (dataList[i] !== input) {\n          dataList[i].value = value || ''\n        }\n      }\n    }\n\n    if (div.hasAttribute('data-record')) {\n      this._build()\n    } else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n      this._add()\n    }\n\n    this._changingNow = false\n  }\n\n  _build(includeNewRecord?) {\n    if (includeNewRecord) var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')\n    else var records = this.renderRoot.querySelectorAll('[data-record]')\n\n    var newmap = {}\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      var key = (record.querySelector('[data-key]') as HTMLInputElement).value\n      var inputs = record.querySelectorAll('[data-value]:not([style*=\"display: none\"])')\n      if (!inputs || inputs.length == 0) continue\n\n      var input = inputs[inputs.length - 1] as HTMLInputElement\n\n      var value = input.value\n\n      if (key) newmap[key] = value || ''\n    }\n\n    this.value = newmap\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n  _toArray(map) {\n    var array: { key: any; value: any }[] = []\n\n    for (var key in map) {\n      array.push({\n        key: key,\n        value: map[key]\n      })\n    }\n\n    return array\n  }\n\n  _add() {\n    this._build(true)\n\n    var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*=\"display: none\"])')\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i] as HTMLInputElement\n      input.value = ''\n    }\n\n    ;(inputs[0] as HTMLInputElement).focus()\n  }\n\n  _delete(e) {\n    var record = e.target.parentElement\n    record.querySelector('[data-key]').value = ''\n    this._build()\n  }\n}\n"]}
+{"version":3,"file":"things-editor-http-parameters.js","sourceRoot":"","sources":["../../client/editors/things-editor-http-parameters.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\nhttp parameters editor element\n\nExample:\n\n  <things-editor-http-parameters value=${map}>\n  </things-editor-http-parameters>\n*/\n@customElement('things-editor-http-parameters')\nexport default class ThingsEditorHttpParameters extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: center;\n\n        width: 100%;\n        overflow: hidden;\n        border: 1px solid #ccc;\n        margin: 5px 0;\n\n        background-color: #ddd;\n      }\n\n      div {\n        display: flex;\n        flex-flow: row nowrap;\n        align-items: center;\n      }\n\n      div > * {\n        min-width: 0px;\n        min-height: 20px;\n        margin: 2px;\n        padding: 0;\n      }\n\n      button {\n        width: 20px;\n        text-align: center;\n        border-radius: 50%;\n        font-size: 1em;\n      }\n\n      input {\n        flex: 1;\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: { [key: string]: string } = {}\n\n  _changingNow: boolean = false\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    return html`\n      ${this._toArray(this.value).map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-key placeholder=\"key\" .value=${item.key} />\n            <input type=\"text\" data-value placeholder=\"value\" .value=${item.value} />\n            <button class=\"record-action\" @click=${e => this._delete(e)} tabindex=\"-1\">x</button>\n          </div>\n        `\n      )}\n\n      <div data-record-new>\n        <input type=\"text\" data-key placeholder=\"key\" value=\"\" />\n        <input type=\"text\" data-value placeholder=\"value\" value=\"\" />\n        <button class=\"record-action\" @click=${e => this._add()} tabindex=\"-1\">+</button>\n      </div>\n    `\n  }\n\n  _onChange(e) {\n    if (this._changingNow) {\n      return\n    }\n\n    this._changingNow = true\n\n    var input = e.target\n    var value = input.value\n\n    var div = input.parentElement\n\n    if (div.hasAttribute('data-record')) {\n      var dataList = div.querySelectorAll('[data-value]:not([hidden])')\n      for (var i = 0; i < dataList.length; i++) {\n        if (dataList[i] !== input) {\n          dataList[i].value = value || ''\n        }\n      }\n    }\n\n    if (div.hasAttribute('data-record')) {\n      this._build()\n    } else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n      this._add()\n    }\n\n    this._changingNow = false\n  }\n\n  _build(includeNewRecord?) {\n    if (includeNewRecord) var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')\n    else var records = this.renderRoot.querySelectorAll('[data-record]')\n\n    var newmap = {}\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      var key = (record.querySelector('[data-key]') as HTMLInputElement).value\n      var inputs = record.querySelectorAll('[data-value]:not([style*=\"display: none\"])')\n      if (!inputs || inputs.length == 0) continue\n\n      var input = inputs[inputs.length - 1] as HTMLInputElement\n\n      var value = input.value\n\n      if (key) newmap[key] = value || ''\n    }\n\n    this.value = newmap\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n  _toArray(map) {\n    var array: { key: any; value: any }[] = []\n\n    for (var key in map) {\n      array.push({\n        key: key,\n        value: map[key]\n      })\n    }\n\n    return array\n  }\n\n  _add() {\n    this._build(true)\n\n    var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*=\"display: none\"])')\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i] as HTMLInputElement\n      input.value = ''\n    }\n\n    ;(inputs[0] as HTMLInputElement).focus()\n  }\n\n  _delete(e) {\n    var record = e.target.parentElement\n    record.querySelector('[data-key]').value = ''\n    this._build()\n  }\n}\n"]}

package/dist-client/editors/things-editor-tag-scenarios.js

@@ -23,6 +23,68 @@ let ThingsEditorTagScenarios = class ThingsEditorTagScenarios extends LitElement
         this._changingNow = false;
         this.scenarios = [];
     }
+    static { this.styles = [
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+
+        width: 100%;
+        overflow: visible;
+        border: 1px solid #ccc;
+        margin: 5px 0;
+
+        background-color: #ddd;
+      }
+
+      div[data-record],
+      div[data-record-new] {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+      }
+
+      div[data-record] > *,
+      div[data-record-new] > * {
+        min-height: 20px;
+        margin: 2px;
+      }
+
+      button {
+        text-align: center;
+        border-radius: 50%;
+        font-size: 1em;
+      }
+
+      input,
+      ox-select {
+        flex: 1;
+      }
+
+      input {
+        padding: 5px;
+        box-sizing: border-box;
+      }
+
+      ox-select {
+        --input-padding: 4px;
+      }
+
+      ox-popup-list {
+        max-height: 300px;
+        overflow: auto;
+      }
+
+      select,
+      ox-select,
+      input:not([type='checkbox']) {
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-radius: 4px;
+        background-color: var(--md-sys-color-surface);
+      }
+    `
+    ]; }
     firstUpdated() {
         this.renderRoot.addEventListener('change', this._onChange.bind(this));
         this.fetchScenarios();
@@ -41,7 +103,7 @@ let ThingsEditorTagScenarios = class ThingsEditorTagScenarios extends LitElement
       `
         });
         if (data) {
-            this.scenarios = ((data === null || data === void 0 ? void 0 : data.scenarios.items) || []).map(item => item.name);
+            this.scenarios = (data?.scenarios.items || []).map(item => item.name);
         }
     }
     render() {
@@ -149,68 +211,6 @@ let ThingsEditorTagScenarios = class ThingsEditorTagScenarios extends LitElement
         this._build();
     }
 };
-ThingsEditorTagScenarios.styles = [
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        align-content: center;
-
-        width: 100%;
-        overflow: visible;
-        border: 1px solid #ccc;
-        margin: 5px 0;
-
-        background-color: #ddd;
-      }
-
-      div[data-record],
-      div[data-record-new] {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-      }
-
-      div[data-record] > *,
-      div[data-record-new] > * {
-        min-height: 20px;
-        margin: 2px;
-      }
-
-      button {
-        text-align: center;
-        border-radius: 50%;
-        font-size: 1em;
-      }
-
-      input,
-      ox-select {
-        flex: 1;
-      }
-
-      input {
-        padding: 5px;
-        box-sizing: border-box;
-      }
-
-      ox-select {
-        --input-padding: 4px;
-      }
-
-      ox-popup-list {
-        max-height: 300px;
-        overflow: auto;
-      }
-
-      select,
-      ox-select,
-      input:not([type='checkbox']) {
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        border-radius: 4px;
-        background-color: var(--md-sys-color-surface);
-      }
-    `
-];
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

package/dist-client/editors/things-editor-tag-scenarios.js.map

@@ -1 +1 @@
-{"version":3,"file":"things-editor-tag-scenarios.js","sourceRoot":"","sources":["../../client/editors/things-editor-tag-scenarios.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-select.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { client } from '@operato/graphql'\n\n/**\ntag-scenarios map editor element\n\nExample:\n\n  <things-editor-tag-scenarios value=${map}>\n  </things-editor-tag-scenarios>\n*/\n@customElement('things-editor-tag-scenarios')\nexport default class ThingsEditorTagScenarios extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: center;\n\n        width: 100%;\n        overflow: visible;\n        border: 1px solid #ccc;\n        margin: 5px 0;\n\n        background-color: #ddd;\n      }\n\n      div[data-record],\n      div[data-record-new] {\n        display: flex;\n        flex-flow: row nowrap;\n        align-items: center;\n      }\n\n      div[data-record] > *,\n      div[data-record-new] > * {\n        min-height: 20px;\n        margin: 2px;\n      }\n\n      button {\n        text-align: center;\n        border-radius: 50%;\n        font-size: 1em;\n      }\n\n      input,\n      ox-select {\n        flex: 1;\n      }\n\n      input {\n        padding: 5px;\n        box-sizing: border-box;\n      }\n\n      ox-select {\n        --input-padding: 4px;\n      }\n\n      ox-popup-list {\n        max-height: 300px;\n        overflow: auto;\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        background-color: var(--md-sys-color-surface);\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: { [key: string]: string } = {}\n\n  _changingNow: boolean = false\n\n  @state() private scenarios: string[] = []\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n    this.fetchScenarios()\n  }\n\n  async fetchScenarios() {\n    const { data, errors } = await client.query({\n      query: gql`\n        query {\n          scenarios {\n            items {\n              id\n              name\n            }\n          }\n        }\n      `\n    })\n\n    if (data) {\n      this.scenarios = (data?.scenarios.items || []).map(item => item.name)\n    }\n  }\n\n  render() {\n    const spec = {\n      queryName: 'scenarios'\n    }\n\n    return html`\n      ${this._toArray(this.value).map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-key placeholder=\"(set tag)\" .value=${item.key} />\n            <ox-select data-value placeholder=\"(select scenario)\" .value=${item.value}>\n              <ox-popup-list with-search>\n                <div option value=\"\">&nbsp;</div>\n                ${this.scenarios.map(scenario => html` <div option value=${scenario}>${scenario}</div> `)}\n              </ox-popup-list>\n            </ox-select>\n\n            <button class=\"record-action\" @click=${e => this._delete(e)} tabindex=\"-1\">x</button>\n          </div>\n        `\n      )}\n\n      <div data-record-new>\n        <input type=\"text\" data-key placeholder=\"(set tag)\" value=\"\" />\n        ${keyed(\n          Date.now(),\n          html`\n            <ox-select data-value placeholder=\"(select scenario)\" value=\"\">\n              <ox-popup-list with-search>\n                <div option value=\"\">&nbsp;</div>\n                ${this.scenarios.map(scenario => html` <div option value=${scenario}>${scenario}</div> `)}\n              </ox-popup-list>\n            </ox-select>\n          `\n        )}\n\n        <button class=\"record-action\" @click=${e => this._add()} tabindex=\"-1\">+</button>\n      </div>\n    `\n  }\n\n  _onChange(e) {\n    if (this._changingNow) {\n      return\n    }\n\n    this._changingNow = true\n\n    var input = e.target\n    var value = input.value\n\n    var div = input.parentElement\n\n    if (div.hasAttribute('data-record')) {\n      var dataList = div.querySelectorAll('[data-value]:not([hidden])')\n      for (var i = 0; i < dataList.length; i++) {\n        if (dataList[i] !== input) {\n          dataList[i].value = value || ''\n        }\n      }\n    }\n\n    if (div.hasAttribute('data-record')) {\n      this._build()\n    } else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n      this._add()\n    }\n\n    this._changingNow = false\n  }\n\n  _build(includeNewRecord?) {\n    if (includeNewRecord) var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')\n    else var records = this.renderRoot.querySelectorAll('[data-record]')\n\n    var newmap = {}\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      var key = (record.querySelector('[data-key]') as HTMLInputElement).value\n      var inputs = record.querySelectorAll('[data-value]:not([style*=\"display: none\"])')\n      if (!inputs || inputs.length == 0) continue\n\n      var input = inputs[inputs.length - 1] as HTMLInputElement\n\n      var value = input.value\n\n      if (key) newmap[key] = value || ''\n    }\n\n    this.value = newmap\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n  _toArray(map) {\n    var array: { key: any; value: any }[] = []\n\n    for (var key in map) {\n      array.push({\n        key: key,\n        value: map[key]\n      })\n    }\n\n    return array\n  }\n\n  _add() {\n    this._build(true)\n\n    var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*=\"display: none\"])')\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i] as HTMLInputElement\n      input.value = ''\n    }\n\n    ;(inputs[0] as HTMLInputElement).focus()\n  }\n\n  _delete(e) {\n    var record = e.target.parentElement\n    record.querySelector('[data-key]').value = ''\n    this._build()\n  }\n}\n"]}
+{"version":3,"file":"things-editor-tag-scenarios.js","sourceRoot":"","sources":["../../client/editors/things-editor-tag-scenarios.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-select.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { client } from '@operato/graphql'\n\n/**\ntag-scenarios map editor element\n\nExample:\n\n  <things-editor-tag-scenarios value=${map}>\n  </things-editor-tag-scenarios>\n*/\n@customElement('things-editor-tag-scenarios')\nexport default class ThingsEditorTagScenarios extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: center;\n\n        width: 100%;\n        overflow: visible;\n        border: 1px solid #ccc;\n        margin: 5px 0;\n\n        background-color: #ddd;\n      }\n\n      div[data-record],\n      div[data-record-new] {\n        display: flex;\n        flex-flow: row nowrap;\n        align-items: center;\n      }\n\n      div[data-record] > *,\n      div[data-record-new] > * {\n        min-height: 20px;\n        margin: 2px;\n      }\n\n      button {\n        text-align: center;\n        border-radius: 50%;\n        font-size: 1em;\n      }\n\n      input,\n      ox-select {\n        flex: 1;\n      }\n\n      input {\n        padding: 5px;\n        box-sizing: border-box;\n      }\n\n      ox-select {\n        --input-padding: 4px;\n      }\n\n      ox-popup-list {\n        max-height: 300px;\n        overflow: auto;\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        background-color: var(--md-sys-color-surface);\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: { [key: string]: string } = {}\n\n  _changingNow: boolean = false\n\n  @state() private scenarios: string[] = []\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n    this.fetchScenarios()\n  }\n\n  async fetchScenarios() {\n    const { data, errors } = await client.query({\n      query: gql`\n        query {\n          scenarios {\n            items {\n              id\n              name\n            }\n          }\n        }\n      `\n    })\n\n    if (data) {\n      this.scenarios = (data?.scenarios.items || []).map(item => item.name)\n    }\n  }\n\n  render() {\n    const spec = {\n      queryName: 'scenarios'\n    }\n\n    return html`\n      ${this._toArray(this.value).map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-key placeholder=\"(set tag)\" .value=${item.key} />\n            <ox-select data-value placeholder=\"(select scenario)\" .value=${item.value}>\n              <ox-popup-list with-search>\n                <div option value=\"\">&nbsp;</div>\n                ${this.scenarios.map(scenario => html` <div option value=${scenario}>${scenario}</div> `)}\n              </ox-popup-list>\n            </ox-select>\n\n            <button class=\"record-action\" @click=${e => this._delete(e)} tabindex=\"-1\">x</button>\n          </div>\n        `\n      )}\n\n      <div data-record-new>\n        <input type=\"text\" data-key placeholder=\"(set tag)\" value=\"\" />\n        ${keyed(\n          Date.now(),\n          html`\n            <ox-select data-value placeholder=\"(select scenario)\" value=\"\">\n              <ox-popup-list with-search>\n                <div option value=\"\">&nbsp;</div>\n                ${this.scenarios.map(scenario => html` <div option value=${scenario}>${scenario}</div> `)}\n              </ox-popup-list>\n            </ox-select>\n          `\n        )}\n\n        <button class=\"record-action\" @click=${e => this._add()} tabindex=\"-1\">+</button>\n      </div>\n    `\n  }\n\n  _onChange(e) {\n    if (this._changingNow) {\n      return\n    }\n\n    this._changingNow = true\n\n    var input = e.target\n    var value = input.value\n\n    var div = input.parentElement\n\n    if (div.hasAttribute('data-record')) {\n      var dataList = div.querySelectorAll('[data-value]:not([hidden])')\n      for (var i = 0; i < dataList.length; i++) {\n        if (dataList[i] !== input) {\n          dataList[i].value = value || ''\n        }\n      }\n    }\n\n    if (div.hasAttribute('data-record')) {\n      this._build()\n    } else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n      this._add()\n    }\n\n    this._changingNow = false\n  }\n\n  _build(includeNewRecord?) {\n    if (includeNewRecord) var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')\n    else var records = this.renderRoot.querySelectorAll('[data-record]')\n\n    var newmap = {}\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      var key = (record.querySelector('[data-key]') as HTMLInputElement).value\n      var inputs = record.querySelectorAll('[data-value]:not([style*=\"display: none\"])')\n      if (!inputs || inputs.length == 0) continue\n\n      var input = inputs[inputs.length - 1] as HTMLInputElement\n\n      var value = input.value\n\n      if (key) newmap[key] = value || ''\n    }\n\n    this.value = newmap\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n  _toArray(map) {\n    var array: { key: any; value: any }[] = []\n\n    for (var key in map) {\n      array.push({\n        key: key,\n        value: map[key]\n      })\n    }\n\n    return array\n  }\n\n  _add() {\n    this._build(true)\n\n    var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*=\"display: none\"])')\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i] as HTMLInputElement\n      input.value = ''\n    }\n\n    ;(inputs[0] as HTMLInputElement).focus()\n  }\n\n  _delete(e) {\n    var record = e.target.parentElement\n    record.querySelector('[data-key]').value = ''\n    this._build()\n  }\n}\n"]}

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

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

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

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import gql from 'graphql-tag';
 import { customElement } from 'lit/decorators.js';
 import { client } from '@operato/graphql';
-import { DynamicSelector } from './dynamic-selector';
+import { DynamicSelector } from './dynamic-selector.js';
 const FETCH_CONNECTIONS_GQL = gql `
   {
     connections {

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,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","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"]}
+{"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,uBAAuB,CAAA;AAEvD,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","sourcesContent":["import gql from 'graphql-tag'\nimport { customElement } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\n\nimport { DynamicSelector } from './dynamic-selector.js'\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,4 @@
-import { DynamicSelector } from './dynamic-selector';
+import { DynamicSelector } from './dynamic-selector.js';
 export declare class ConnectorSelector extends DynamicSelector {
     getOptions(): Promise<any>;
 }

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

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import gql from 'graphql-tag';
 import { customElement } from 'lit/decorators.js';
 import { client } from '@operato/graphql';
-import { DynamicSelector } from './dynamic-selector';
+import { DynamicSelector } from './dynamic-selector.js';
 const FETCH_CONNECTORS_GQL = gql `
   {
     connectors {

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,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","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"]}
+{"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,uBAAuB,CAAA;AAEvD,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","sourcesContent":["import gql from 'graphql-tag'\nimport { customElement } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\n\nimport { DynamicSelector } from './dynamic-selector.js'\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/task-type-selector.js

@@ -16,7 +16,6 @@ const FETCH_TASK_TYPES_GQL = gql `
 const EMPTY_OPTION = { name: '', value: '' };
 let TaskTypeSelector = class TaskTypeSelector extends OxGristEditor {
     async getOptions() {
-        var _a, _b;
         var { connectionName = '' } = this.column.record;
         if (typeof connectionName === 'function') {
             connectionName =
@@ -28,7 +27,7 @@ let TaskTypeSelector = class TaskTypeSelector extends OxGristEditor {
                 connectionName
             }
         });
-        return ((_b = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.taskTypesByConnection) === null || _b === void 0 ? void 0 : _b.items) || [];
+        return response?.data?.taskTypesByConnection?.items || [];
     }
     async firstUpdated() {
         super.firstUpdated();

package/dist-client/grist/task-type-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"task-type-selector.js","sourceRoot":"","sources":["../../client/grist/task-type-selector.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;CAQ/B,CAAA;AAED,MAAM,YAAY,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;AAGrC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,aAAa;IAGjD,KAAK,CAAC,UAAU;;QACd,IAAI,EAAE,cAAc,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAA;QAChD,IAAI,OAAO,cAAc,KAAK,UAAU,EAAE,CAAC;YACzC,cAAc;gBACZ,CAAC,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAA;QACvG,CAAC;QAED,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,oBAAoB;YAC3B,SAAS,EAAE;gBACT,cAAc;aACf;SACF,CAAC,CAAA;QAEF,OAAO,CAAA,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,0CAAE,qBAAqB,0CAAE,KAAK,KAAI,EAAE,CAAA;IAC3D,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,KAAK,CAAC,YAAY,EAAE,CAAA;QAEpB,IAAI,OAAO,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAA;QACrC,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;YACpB,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAA;QAC/B,CAAC;aAAM,CAAC;YACN,OAAO,GAAG,CAAC,YAAY,CAAC,CAAA;QAC1B,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACtB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,IAAI,cAAc;QAChB,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,CAAA;QAE5C,OAAO,IAAI,CAAA;;UAEL,OAAO,CAAC,GAAG,CACX,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,sBAAsB,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,UAAU,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,YAAY,CAC9G;;KAEJ,CAAA;IACH,CAAC;CACF,CAAA;AA7CY,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA6C5B","sourcesContent":["import { OxGristEditor } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nconst FETCH_TASK_TYPES_GQL = gql`\n  query ($connectionName: String!) {\n    taskTypesByConnection(connectionName: $connectionName) {\n      items {\n        name\n      }\n    }\n  }\n`\n\nconst EMPTY_OPTION = { name: '', value: '' }\n\n@customElement('task-type-selector')\nexport class TaskTypeSelector extends OxGristEditor {\n  options: any\n\n  async getOptions() {\n    var { connectionName = '' } = this.column.record\n    if (typeof connectionName === 'function') {\n      connectionName =\n        (await connectionName.call(this, this.value, this.column, this.record, this.row, this.field)) || ''\n    }\n\n    const response = await client.query({\n      query: FETCH_TASK_TYPES_GQL,\n      variables: {\n        connectionName\n      }\n    })\n\n    return response?.data?.taskTypesByConnection?.items || []\n  }\n\n  async firstUpdated() {\n    super.firstUpdated()\n\n    var options = await this.getOptions()\n    if (options.unshift) {\n      options.unshift(EMPTY_OPTION)\n    } else {\n      options = [EMPTY_OPTION]\n    }\n\n    this.options = options\n    this.requestUpdate()\n  }\n\n  get editorTemplate() {\n    var options = this.options || [EMPTY_OPTION]\n\n    return html`\n      <select>\n        ${options.map(\n          option => html` <option ?selected=${option.name == this.value} value=${option.name}>${option.name}</option> `\n        )}\n      </select>\n    `\n  }\n}\n"]}
+{"version":3,"file":"task-type-selector.js","sourceRoot":"","sources":["../../client/grist/task-type-selector.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;CAQ/B,CAAA;AAED,MAAM,YAAY,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;AAGrC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,aAAa;IAGjD,KAAK,CAAC,UAAU;QACd,IAAI,EAAE,cAAc,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAA;QAChD,IAAI,OAAO,cAAc,KAAK,UAAU,EAAE,CAAC;YACzC,cAAc;gBACZ,CAAC,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAA;QACvG,CAAC;QAED,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,oBAAoB;YAC3B,SAAS,EAAE;gBACT,cAAc;aACf;SACF,CAAC,CAAA;QAEF,OAAO,QAAQ,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAK,IAAI,EAAE,CAAA;IAC3D,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,KAAK,CAAC,YAAY,EAAE,CAAA;QAEpB,IAAI,OAAO,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAA;QACrC,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;YACpB,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAA;QAC/B,CAAC;aAAM,CAAC;YACN,OAAO,GAAG,CAAC,YAAY,CAAC,CAAA;QAC1B,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACtB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,IAAI,cAAc;QAChB,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,CAAA;QAE5C,OAAO,IAAI,CAAA;;UAEL,OAAO,CAAC,GAAG,CACX,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,sBAAsB,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,UAAU,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,YAAY,CAC9G;;KAEJ,CAAA;IACH,CAAC;CACF,CAAA;AA7CY,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA6C5B","sourcesContent":["import { OxGristEditor } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nconst FETCH_TASK_TYPES_GQL = gql`\n  query ($connectionName: String!) {\n    taskTypesByConnection(connectionName: $connectionName) {\n      items {\n        name\n      }\n    }\n  }\n`\n\nconst EMPTY_OPTION = { name: '', value: '' }\n\n@customElement('task-type-selector')\nexport class TaskTypeSelector extends OxGristEditor {\n  options: any\n\n  async getOptions() {\n    var { connectionName = '' } = this.column.record\n    if (typeof connectionName === 'function') {\n      connectionName =\n        (await connectionName.call(this, this.value, this.column, this.record, this.row, this.field)) || ''\n    }\n\n    const response = await client.query({\n      query: FETCH_TASK_TYPES_GQL,\n      variables: {\n        connectionName\n      }\n    })\n\n    return response?.data?.taskTypesByConnection?.items || []\n  }\n\n  async firstUpdated() {\n    super.firstUpdated()\n\n    var options = await this.getOptions()\n    if (options.unshift) {\n      options.unshift(EMPTY_OPTION)\n    } else {\n      options = [EMPTY_OPTION]\n    }\n\n    this.options = options\n    this.requestUpdate()\n  }\n\n  get editorTemplate() {\n    var options = this.options || [EMPTY_OPTION]\n\n    return html`\n      <select>\n        ${options.map(\n          option => html` <option ?selected=${option.name == this.value} value=${option.name}>${option.name}</option> `\n        )}\n      </select>\n    `\n  }\n}\n"]}

package/dist-client/pages/connection-importer.js

@@ -42,6 +42,22 @@ let ConnectionImporter = class ConnectionImporter extends LitElement {
             ]
         };
     }
+    static { this.styles = [
+        CommonHeaderStyles,
+        CommonGristStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+    `
+    ]; }
     render() {
         return html `
       <ox-grist
@@ -57,7 +73,6 @@ let ConnectionImporter = class ConnectionImporter extends LitElement {
     `;
     }
     async save() {
-        var _a;
         const response = await client.mutate({
             mutation: gql `
         mutation importConnections($connections: [ConnectionPatch!]!) {
@@ -66,27 +81,11 @@ let ConnectionImporter = class ConnectionImporter extends LitElement {
       `,
             variables: { connections: this.connections }
         });
-        if ((_a = response.errors) === null || _a === void 0 ? void 0 : _a.length)
+        if (response.errors?.length)
             return;
         this.dispatchEvent(new CustomEvent('imported'));
     }
 };
-ConnectionImporter.styles = [
-    CommonHeaderStyles,
-    CommonGristStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: var(--md-sys-color-surface);
-      }
-
-      ox-grist {
-        flex: 1;
-      }
-    `
-];
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Object)

package/dist-client/pages/connection-importer.js.map

@@ -1 +1 @@
-{"version":3,"file":"connection-importer.js","sourceRoot":"","sources":["../../client/pages/connection-importer.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAgB,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAGhE,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAmBuB,YAAO,GAAQ;YACzC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,EAAE;YACzC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YAC9B,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,aAAa;oBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,UAAU;oBAChB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;oBACnC,KAAK,EAAE,GAAG;iBACX;aACF;SACF,CAAA;IA+BH,CAAC;IA7BC,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;kBAChC,IAAI,CAAC,OAAO;gBACd,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE;;;;;yBAKpB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gCAAgC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;KAEhG,CAAA;IACH,CAAC;IAED,KAAK,CAAC,IAAI;;QACR,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;OAIZ;YACD,SAAS,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE;SAC7C,CAAC,CAAA;QAEF,IAAI,MAAA,QAAQ,CAAC,MAAM,0CAAE,MAAM;YAAE,OAAM;QAEnC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,CAAC;;AA7EM,yBAAM,GAAG;IACd,kBAAkB;IAClB,iBAAiB;IACjB,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,AAfY,CAeZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;uDAAiB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mDA6B1B;AAhDU,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CA+E9B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\n@customElement('connection-importer')\nexport class ConnectionImporter extends LitElement {\n  static styles = [\n    CommonHeaderStyles,\n    CommonGristStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n      }\n\n      ox-grist {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Array }) connections: any\n  @property({ type: Object }) columns: any = {\n    list: { fields: ['name', 'description'] },\n    pagination: { infinite: true },\n    columns: [\n      {\n        type: 'string',\n        name: 'name',\n        header: i18next.t('field.name'),\n        width: 150\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: i18next.t('field.description'),\n        width: 200\n      },\n      {\n        type: 'string',\n        name: 'type',\n        header: i18next.t('field.type'),\n        width: 100\n      },\n      {\n        type: 'string',\n        name: 'endpoint',\n        header: i18next.t('field.endpoint'),\n        width: 120\n      }\n    ]\n  }\n\n  render() {\n    return html`\n      <ox-grist\n        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n        .config=${this.columns}\n        .data=${{ records: this.connections }}\n      ></ox-grist>\n\n      <div class=\"footer\">\n        <div filler></div>\n        <button @click=${this.save.bind(this)} done><md-icon>save</md-icon>${i18next.t('button.save')}</button>\n      </div>\n    `\n  }\n\n  async save() {\n    const response = await client.mutate({\n      mutation: gql`\n        mutation importConnections($connections: [ConnectionPatch!]!) {\n          importConnections(connections: $connections)\n        }\n      `,\n      variables: { connections: this.connections }\n    })\n\n    if (response.errors?.length) return\n\n    this.dispatchEvent(new CustomEvent('imported'))\n  }\n}\n"]}
+{"version":3,"file":"connection-importer.js","sourceRoot":"","sources":["../../client/pages/connection-importer.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAgB,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAGhE,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAmBuB,YAAO,GAAQ;YACzC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,EAAE;YACzC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YAC9B,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,aAAa;oBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,UAAU;oBAChB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;oBACnC,KAAK,EAAE,GAAG;iBACX;aACF;SACF,CAAA;IA+BH,CAAC;aA9EQ,WAAM,GAAG;QACd,kBAAkB;QAClB,iBAAiB;QACjB,GAAG,CAAA;;;;;;;;;;;KAWF;KACF,AAfY,CAeZ;IAkCD,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;kBAChC,IAAI,CAAC,OAAO;gBACd,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE;;;;;yBAKpB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gCAAgC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;KAEhG,CAAA;IACH,CAAC;IAED,KAAK,CAAC,IAAI;QACR,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;OAIZ;YACD,SAAS,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE;SAC7C,CAAC,CAAA;QAEF,IAAI,QAAQ,CAAC,MAAM,EAAE,MAAM;YAAE,OAAM;QAEnC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,CAAC;;AA5D0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;uDAAiB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mDA6B1B;AAhDU,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CA+E9B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\n@customElement('connection-importer')\nexport class ConnectionImporter extends LitElement {\n  static styles = [\n    CommonHeaderStyles,\n    CommonGristStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n      }\n\n      ox-grist {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Array }) connections: any\n  @property({ type: Object }) columns: any = {\n    list: { fields: ['name', 'description'] },\n    pagination: { infinite: true },\n    columns: [\n      {\n        type: 'string',\n        name: 'name',\n        header: i18next.t('field.name'),\n        width: 150\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: i18next.t('field.description'),\n        width: 200\n      },\n      {\n        type: 'string',\n        name: 'type',\n        header: i18next.t('field.type'),\n        width: 100\n      },\n      {\n        type: 'string',\n        name: 'endpoint',\n        header: i18next.t('field.endpoint'),\n        width: 120\n      }\n    ]\n  }\n\n  render() {\n    return html`\n      <ox-grist\n        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n        .config=${this.columns}\n        .data=${{ records: this.connections }}\n      ></ox-grist>\n\n      <div class=\"footer\">\n        <div filler></div>\n        <button @click=${this.save.bind(this)} done><md-icon>save</md-icon>${i18next.t('button.save')}</button>\n      </div>\n    `\n  }\n\n  async save() {\n    const response = await client.mutate({\n      mutation: gql`\n        mutation importConnections($connections: [ConnectionPatch!]!) {\n          importConnections(connections: $connections)\n        }\n      `,\n      variables: { connections: this.connections }\n    })\n\n    if (response.errors?.length) return\n\n    this.dispatchEvent(new CustomEvent('imported'))\n  }\n}\n"]}

package/dist-client/pages/connection.d.ts

@@ -1,5 +1,5 @@
 import '@operato/data-grist/ox-grist.js';
-import './connection-importer';
+import './connection-importer.js';
 import { DataGrist } from '@operato/data-grist/ox-grist.js';
 import { PageView } from '@operato/shell';
 import { FetchOption } from '@operato/data-grist';

package/dist-client/pages/connection.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from "tslib";
 import '@operato/data-grist/ox-grist.js';
-import './connection-importer';
+import './connection-importer.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
@@ -19,15 +19,31 @@ let Connection = class Connection extends connect(store)(p13n(localize(i18next)(
         super(...arguments);
         this.active = false;
     }
+    static { this.styles = [
+        CommonGristStyles,
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        overflow: hidden;
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+    `
+    ]; }
     get context() {
-        var _a;
         return {
             title: i18next.t('text.connection list'),
             search: {
                 handler: search => {
                     this.grist.searchText = search;
                 },
-                value: ((_a = this.grist) === null || _a === void 0 ? void 0 : _a.searchText) || ''
+                value: this.grist?.searchText || ''
             },
             // 필터가 설정되면, 아래 코멘트 해제
             // filter: {
@@ -38,8 +54,16 @@ let Connection = class Connection extends connect(store)(p13n(localize(i18next)(
             // },
             help: 'integration/ui/connection',
             actions: [
-                Object.assign({ title: i18next.t('button.save'), action: this._updateConnectionManager.bind(this) }, CommonButtonStyles.save),
-                Object.assign({ title: i18next.t('button.delete'), action: this._deleteConnections.bind(this) }, CommonButtonStyles.delete)
+                {
+                    title: i18next.t('button.save'),
+                    action: this._updateConnectionManager.bind(this),
+                    ...CommonButtonStyles.save
+                },
+                {
+                    title: i18next.t('button.delete'),
+                    action: this._deleteConnections.bind(this),
+                    ...CommonButtonStyles.delete
+                }
             ],
             exportable: {
                 name: i18next.t('text.connection list'),
@@ -157,7 +181,7 @@ let Connection = class Connection extends connect(store)(p13n(localize(i18next)(
                     record: {
                         renderer: HelpDecoratedRenderer,
                         editable: true,
-                        help: value => { var _a, _b; return (_b = (_a = this.connectors) === null || _a === void 0 ? void 0 : _a[value]) === null || _b === void 0 ? void 0 : _b.help; },
+                        help: value => this.connectors?.[value]?.help,
                         mandatory: true
                     },
                     filter: 'search',
@@ -183,10 +207,9 @@ let Connection = class Connection extends connect(store)(p13n(localize(i18next)(
                     record: {
                         editable: true,
                         options: async (value, column, record, row, field) => {
-                            var _a;
-                            const { name, help, parameterSpec: spec } = record.type ? (_a = this.connectors) === null || _a === void 0 ? void 0 : _a[record.type] : {};
+                            const { name, help, parameterSpec: spec } = record.type ? this.connectors?.[record.type] : {};
                             const context = this.grist;
-                            return { name, help, spec, context };
+                            return { name, help, spec, context, objectified: true };
                         },
                         renderer: 'json5'
                     },
@@ -438,23 +461,6 @@ let Connection = class Connection extends connect(store)(p13n(localize(i18next)(
         });
     }
 };
-Connection.styles = [
-    CommonGristStyles,
-    ScrollbarStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        overflow: hidden;
-      }
-
-      ox-grist {
-        overflow-y: auto;
-        flex: 1;
-      }
-    `
-];
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)