@things-factory/integration-ui 6.2.37 → 6.2.39

package/client/bootstrap.ts

@@ -34,6 +34,7 @@ export default function bootstrap() {
     'http-body': 'property-editor-http-body',
     'entity-selector': 'property-editor-entity-selector',
     'scenario-step-input': 'property-editor-scenario-step-input',
+    'tag-scenarios': 'property-editor-tag-scenarios',
     'procedure-parameters': 'property-editor-procedure-parameters'
   })
 }

package/client/editors/property-editor.ts

@@ -5,6 +5,7 @@ import './things-editor-http-headers'
 import './things-editor-http-parameters'
 import './things-editor-http-body'
 import './things-editor-oracle-procedure'
+import './things-editor-tag-scenarios'
 
 import { html } from 'lit'
 
@@ -98,3 +99,27 @@ export class PropertyEditorProcedureParameters extends OxPropertyEditor {
 }
 
 customElements.define('property-editor-procedure-parameters', PropertyEditorProcedureParameters)
+
+export class PropertyEditorTagScenarios extends OxPropertyEditor {
+  static get styles() {
+    return [...OxPropertyEditor.styles]
+  }
+
+  editorTemplate(value, spec) {
+    /* context must be a datagrid(grist) instance, and host must be a record */
+    const { context: grid, host: record } = spec
+    const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []
+
+    return html`
+      <things-editor-tag-scenarios
+        id="editor"
+        .value=${value}
+        .properties=${spec.property}
+        .steps=${steps}
+        fullwidth
+      ></things-editor-tag-scenarios>
+    `
+  }
+}
+
+customElements.define('property-editor-tag-scenarios', PropertyEditorTagScenarios)

package/client/editors/things-editor-tag-scenarios.ts

@@ -0,0 +1,244 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@operato/input/ox-select.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { keyed } from 'lit/directives/keyed.js'
+
+import { client } from '@operato/graphql'
+
+/**
+tag-scenarios map editor element
+
+Example:
+
+  <things-editor-tag-scenarios value=${map}>
+  </things-editor-tag-scenarios>
+*/
+@customElement('things-editor-tag-scenarios')
+export default class ThingsEditorTagScenarios extends LitElement {
+  static 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: white;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value: { [key: string]: string } = {}
+
+  _changingNow: boolean = false
+
+  @state() private scenarios: string[] = []
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onChange.bind(this))
+    this.fetchScenarios()
+  }
+
+  async fetchScenarios() {
+    const { data, errors } = await client.query({
+      query: gql`
+        query {
+          scenarios {
+            items {
+              id
+              name
+            }
+          }
+        }
+      `
+    })
+
+    if (data) {
+      this.scenarios = (data?.scenarios.items || []).map(item => item.name)
+    }
+  }
+
+  render() {
+    const spec = {
+      queryName: 'scenarios'
+    }
+
+    return html`
+      ${this._toArray(this.value).map(
+        item => html`
+          <div data-record>
+            <input type="text" data-key placeholder="(set tag)" .value=${item.key} />
+            <ox-select data-value placeholder="(select scenario)" .value=${item.value}>
+              <ox-popup-list with-search>
+                <div option value="">&nbsp;</div>
+                ${this.scenarios.map(scenario => html` <div option value=${scenario}>${scenario}</div> `)}
+              </ox-popup-list>
+            </ox-select>
+
+            <button class="record-action" @click=${e => this._delete(e)} tabindex="-1">x</button>
+          </div>
+        `
+      )}
+
+      <div data-record-new>
+        <input type="text" data-key placeholder="(set tag)" value="" />
+        ${keyed(
+          Date.now(),
+          html`
+            <ox-select data-value placeholder="(select scenario)" value="">
+              <ox-popup-list with-search>
+                <div option value="">&nbsp;</div>
+                ${this.scenarios.map(scenario => html` <div option value=${scenario}>${scenario}</div> `)}
+              </ox-popup-list>
+            </ox-select>
+          `
+        )}
+
+        <button class="record-action" @click=${e => this._add()} tabindex="-1">+</button>
+      </div>
+    `
+  }
+
+  _onChange(e) {
+    if (this._changingNow) {
+      return
+    }
+
+    this._changingNow = true
+
+    var input = e.target
+    var value = input.value
+
+    var div = input.parentElement
+
+    if (div.hasAttribute('data-record')) {
+      var dataList = div.querySelectorAll('[data-value]:not([hidden])')
+      for (var i = 0; i < dataList.length; i++) {
+        if (dataList[i] !== input) {
+          dataList[i].value = value || ''
+        }
+      }
+    }
+
+    if (div.hasAttribute('data-record')) {
+      this._build()
+    } else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {
+      this._add()
+    }
+
+    this._changingNow = false
+  }
+
+  _build(includeNewRecord?) {
+    if (includeNewRecord) var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')
+    else var records = this.renderRoot.querySelectorAll('[data-record]')
+
+    var newmap = {}
+
+    for (var i = 0; i < records.length; i++) {
+      var record = records[i]
+
+      var key = (record.querySelector('[data-key]') as HTMLInputElement).value
+      var inputs = record.querySelectorAll('[data-value]:not([style*="display: none"])')
+      if (!inputs || inputs.length == 0) continue
+
+      var input = inputs[inputs.length - 1] as HTMLInputElement
+
+      var value = input.value
+
+      if (key) newmap[key] = value || ''
+    }
+
+    this.value = newmap
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+
+  /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
+  _toArray(map) {
+    var array: { key: any; value: any }[] = []
+
+    for (var key in map) {
+      array.push({
+        key: key,
+        value: map[key]
+      })
+    }
+
+    return array
+  }
+
+  _add() {
+    this._build(true)
+
+    var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])')
+
+    for (var i = 0; i < inputs.length; i++) {
+      let input = inputs[i] as HTMLInputElement
+      input.value = ''
+    }
+
+    ;(inputs[0] as HTMLInputElement).focus()
+  }
+
+  _delete(e) {
+    var record = e.target.parentElement
+    record.querySelector('[data-key]').value = ''
+    this._build()
+  }
+}

package/dist-client/bootstrap.js

@@ -24,6 +24,7 @@ export default function bootstrap() {
         'http-body': 'property-editor-http-body',
         'entity-selector': 'property-editor-entity-selector',
         'scenario-step-input': 'property-editor-scenario-step-input',
+        'tag-scenarios': 'property-editor-tag-scenarios',
         'procedure-parameters': 'property-editor-procedure-parameters'
     });
 }

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,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    'procedure-parameters': 'property-editor-procedure-parameters'\n  })\n}\n"]}
+{"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"]}

package/dist-client/editors/property-editor.d.ts

@@ -2,6 +2,7 @@ import './things-editor-http-headers';
 import './things-editor-http-parameters';
 import './things-editor-http-body';
 import './things-editor-oracle-procedure';
+import './things-editor-tag-scenarios';
 import { OxPropertyEditor } from '@operato/property-editor';
 export declare class PropertyEditorScenarioStepInput extends OxPropertyEditor {
     static get styles(): import("lit").CSSResult[];
@@ -23,3 +24,7 @@ export declare class PropertyEditorProcedureParameters extends OxPropertyEditor
     static get styles(): import("lit").CSSResult[];
     editorTemplate(value: any, spec: any): import("lit-html").TemplateResult<1>;
 }
+export declare class PropertyEditorTagScenarios extends OxPropertyEditor {
+    static get styles(): import("lit").CSSResult[];
+    editorTemplate(value: any, spec: any): import("lit-html").TemplateResult<1>;
+}

package/dist-client/editors/property-editor.js

@@ -5,6 +5,7 @@ import './things-editor-http-headers';
 import './things-editor-http-parameters';
 import './things-editor-http-body';
 import './things-editor-oracle-procedure';
+import './things-editor-tag-scenarios';
 import { html } from 'lit';
 import { OxPropertyEditor } from '@operato/property-editor';
 export class PropertyEditorScenarioStepInput extends OxPropertyEditor {
@@ -79,4 +80,24 @@ export class PropertyEditorProcedureParameters extends OxPropertyEditor {
     }
 }
 customElements.define('property-editor-procedure-parameters', PropertyEditorProcedureParameters);
+export class PropertyEditorTagScenarios extends OxPropertyEditor {
+    static get styles() {
+        return [...OxPropertyEditor.styles];
+    }
+    editorTemplate(value, spec) {
+        /* context must be a datagrid(grist) instance, and host must be a record */
+        const { context: grid, host: record } = spec;
+        const steps = (grid === null || grid === void 0 ? void 0 : grid.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name)) || [];
+        return html `
+      <things-editor-tag-scenarios
+        id="editor"
+        .value=${value}
+        .properties=${spec.property}
+        .steps=${steps}
+        fullwidth
+      ></things-editor-tag-scenarios>
+    `;
+    }
+}
+customElements.define('property-editor-tag-scenarios', PropertyEditorTagScenarios);
 //# sourceMappingURL=property-editor.js.map

package/dist-client/editors/property-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-editor.js","sourceRoot":"","sources":["../../client/editors/property-editor.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport './things-editor-http-headers'\nimport './things-editor-http-parameters'\nimport './things-editor-http-body'\nimport './things-editor-oracle-procedure'\n\nimport { html } from 'lit'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\n\nexport class PropertyEditorScenarioStepInput extends OxPropertyEditor {\n  static get styles() {\n    return [...OxPropertyEditor.styles]\n  }\n\n  editorTemplate(value, spec) {\n    /* context must be a datagrid(grist) instance, and host must be a record */\n    const { context: grid, host: record } = spec\n    const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []\n\n    return html`\n      <input id=\"editor\" .value=${value || ''} list=\"step-list\" />\n      <datalist id=\"step-list\">${steps.map(id => html` <option value=${id}></option> `)}</datalist>\n    `\n  }\n}\n\ncustomElements.define('property-editor-scenario-step-input', PropertyEditorScenarioStepInput)\n\nexport class PropertyEditorHttpHeaders extends OxPropertyEditor {\n  static get styles() {\n    return [...OxPropertyEditor.styles]\n  }\n\n  editorTemplate(value, spec) {\n    return html`\n      <things-editor-http-headers id=\"editor\" .value=${value} .properties=${spec.property}></things-editor-http-headers>\n    `\n  }\n}\n\ncustomElements.define('property-editor-http-headers', PropertyEditorHttpHeaders)\n\nexport class PropertyEditorHttpParameters extends OxPropertyEditor {\n  static get styles() {\n    return [...OxPropertyEditor.styles]\n  }\n\n  editorTemplate(value, spec) {\n    return html`\n      <things-editor-http-parameters\n        id=\"editor\"\n        .value=${value}\n        .properties=${spec.property}\n      ></things-editor-http-parameters>\n    `\n  }\n}\n\ncustomElements.define('property-editor-http-parameters', PropertyEditorHttpParameters)\n\nexport class PropertyEditorHttpBody extends OxPropertyEditor {\n  static get styles() {\n    return [...OxPropertyEditor.styles]\n  }\n\n  editorTemplate(value, spec) {\n    return html`\n      <things-editor-http-body id=\"editor\" .value=${value} .properties=${spec.property}></things-editor-http-body>\n    `\n  }\n}\n\ncustomElements.define('property-editor-http-body', PropertyEditorHttpBody)\n\nexport class PropertyEditorProcedureParameters extends OxPropertyEditor {\n  static get styles() {\n    return [...OxPropertyEditor.styles]\n  }\n\n  editorTemplate(value, spec) {\n    /* context must be a datagrid(grist) instance, and host must be a record */\n    const { context: grid, host: record } = spec\n    const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []\n\n    return html`\n      <things-editor-oracle-procedure\n        id=\"editor\"\n        .value=${value}\n        .properties=${spec.property}\n        .steps=${steps}\n        fullwidth\n      ></things-editor-oracle-procedure>\n    `\n  }\n}\n\ncustomElements.define('property-editor-procedure-parameters', PropertyEditorProcedureParameters)\n"]}
+{"version":3,"file":"property-editor.js","sourceRoot":"","sources":["../../client/editors/property-editor.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport './things-editor-http-headers'\nimport './things-editor-http-parameters'\nimport './things-editor-http-body'\nimport './things-editor-oracle-procedure'\nimport './things-editor-tag-scenarios'\n\nimport { html } from 'lit'\n\nimport { OxPropertyEditor } from '@operato/property-editor'\n\nexport class PropertyEditorScenarioStepInput extends OxPropertyEditor {\n  static get styles() {\n    return [...OxPropertyEditor.styles]\n  }\n\n  editorTemplate(value, spec) {\n    /* context must be a datagrid(grist) instance, and host must be a record */\n    const { context: grid, host: record } = spec\n    const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []\n\n    return html`\n      <input id=\"editor\" .value=${value || ''} list=\"step-list\" />\n      <datalist id=\"step-list\">${steps.map(id => html` <option value=${id}></option> `)}</datalist>\n    `\n  }\n}\n\ncustomElements.define('property-editor-scenario-step-input', PropertyEditorScenarioStepInput)\n\nexport class PropertyEditorHttpHeaders extends OxPropertyEditor {\n  static get styles() {\n    return [...OxPropertyEditor.styles]\n  }\n\n  editorTemplate(value, spec) {\n    return html`\n      <things-editor-http-headers id=\"editor\" .value=${value} .properties=${spec.property}></things-editor-http-headers>\n    `\n  }\n}\n\ncustomElements.define('property-editor-http-headers', PropertyEditorHttpHeaders)\n\nexport class PropertyEditorHttpParameters extends OxPropertyEditor {\n  static get styles() {\n    return [...OxPropertyEditor.styles]\n  }\n\n  editorTemplate(value, spec) {\n    return html`\n      <things-editor-http-parameters\n        id=\"editor\"\n        .value=${value}\n        .properties=${spec.property}\n      ></things-editor-http-parameters>\n    `\n  }\n}\n\ncustomElements.define('property-editor-http-parameters', PropertyEditorHttpParameters)\n\nexport class PropertyEditorHttpBody extends OxPropertyEditor {\n  static get styles() {\n    return [...OxPropertyEditor.styles]\n  }\n\n  editorTemplate(value, spec) {\n    return html`\n      <things-editor-http-body id=\"editor\" .value=${value} .properties=${spec.property}></things-editor-http-body>\n    `\n  }\n}\n\ncustomElements.define('property-editor-http-body', PropertyEditorHttpBody)\n\nexport class PropertyEditorProcedureParameters extends OxPropertyEditor {\n  static get styles() {\n    return [...OxPropertyEditor.styles]\n  }\n\n  editorTemplate(value, spec) {\n    /* context must be a datagrid(grist) instance, and host must be a record */\n    const { context: grid, host: record } = spec\n    const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []\n\n    return html`\n      <things-editor-oracle-procedure\n        id=\"editor\"\n        .value=${value}\n        .properties=${spec.property}\n        .steps=${steps}\n        fullwidth\n      ></things-editor-oracle-procedure>\n    `\n  }\n}\n\ncustomElements.define('property-editor-procedure-parameters', PropertyEditorProcedureParameters)\n\nexport class PropertyEditorTagScenarios extends OxPropertyEditor {\n  static get styles() {\n    return [...OxPropertyEditor.styles]\n  }\n\n  editorTemplate(value, spec) {\n    /* context must be a datagrid(grist) instance, and host must be a record */\n    const { context: grid, host: record } = spec\n    const steps = grid?.dirtyData.records.filter(rec => rec.name !== record.name).map(rec => rec.name) || []\n\n    return html`\n      <things-editor-tag-scenarios\n        id=\"editor\"\n        .value=${value}\n        .properties=${spec.property}\n        .steps=${steps}\n        fullwidth\n      ></things-editor-tag-scenarios>\n    `\n  }\n}\n\ncustomElements.define('property-editor-tag-scenarios', PropertyEditorTagScenarios)\n"]}

package/dist-client/editors/things-editor-tag-scenarios.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/input/ox-select.js';
+import { LitElement } from 'lit';
+/**
+tag-scenarios map editor element
+
+Example:
+
+  <things-editor-tag-scenarios value=${map}>
+  </things-editor-tag-scenarios>
+*/
+export default class ThingsEditorTagScenarios extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value: {
+        [key: string]: string;
+    };
+    _changingNow: boolean;
+    private scenarios;
+    firstUpdated(): void;
+    fetchScenarios(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    _onChange(e: any): void;
+    _build(includeNewRecord?: any): void;
+    _toArray(map: any): {
+        key: any;
+        value: any;
+    }[];
+    _add(): void;
+    _delete(e: any): void;
+}

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

@@ -0,0 +1,226 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate, __metadata } from "tslib";
+import '@operato/input/ox-select.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { client } from '@operato/graphql';
+/**
+tag-scenarios map editor element
+
+Example:
+
+  <things-editor-tag-scenarios value=${map}>
+  </things-editor-tag-scenarios>
+*/
+let ThingsEditorTagScenarios = class ThingsEditorTagScenarios extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+        this._changingNow = false;
+        this.scenarios = [];
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onChange.bind(this));
+        this.fetchScenarios();
+    }
+    async fetchScenarios() {
+        const { data, errors } = await client.query({
+            query: gql `
+        query {
+          scenarios {
+            items {
+              id
+              name
+            }
+          }
+        }
+      `
+        });
+        if (data) {
+            this.scenarios = ((data === null || data === void 0 ? void 0 : data.scenarios.items) || []).map(item => item.name);
+        }
+    }
+    render() {
+        const spec = {
+            queryName: 'scenarios'
+        };
+        return html `
+      ${this._toArray(this.value).map(item => html `
+          <div data-record>
+            <input type="text" data-key placeholder="(set tag)" .value=${item.key} />
+            <ox-select data-value placeholder="(select scenario)" .value=${item.value}>
+              <ox-popup-list with-search>
+                <div option value="">&nbsp;</div>
+                ${this.scenarios.map(scenario => html ` <div option value=${scenario}>${scenario}</div> `)}
+              </ox-popup-list>
+            </ox-select>
+
+            <button class="record-action" @click=${e => this._delete(e)} tabindex="-1">x</button>
+          </div>
+        `)}
+
+      <div data-record-new>
+        <input type="text" data-key placeholder="(set tag)" value="" />
+        ${keyed(Date.now(), html `
+            <ox-select data-value placeholder="(select scenario)" value="">
+              <ox-popup-list with-search>
+                <div option value="">&nbsp;</div>
+                ${this.scenarios.map(scenario => html ` <div option value=${scenario}>${scenario}</div> `)}
+              </ox-popup-list>
+            </ox-select>
+          `)}
+
+        <button class="record-action" @click=${e => this._add()} tabindex="-1">+</button>
+      </div>
+    `;
+    }
+    _onChange(e) {
+        if (this._changingNow) {
+            return;
+        }
+        this._changingNow = true;
+        var input = e.target;
+        var value = input.value;
+        var div = input.parentElement;
+        if (div.hasAttribute('data-record')) {
+            var dataList = div.querySelectorAll('[data-value]:not([hidden])');
+            for (var i = 0; i < dataList.length; i++) {
+                if (dataList[i] !== input) {
+                    dataList[i].value = value || '';
+                }
+            }
+        }
+        if (div.hasAttribute('data-record')) {
+            this._build();
+        }
+        else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {
+            this._add();
+        }
+        this._changingNow = false;
+    }
+    _build(includeNewRecord) {
+        if (includeNewRecord)
+            var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]');
+        else
+            var records = this.renderRoot.querySelectorAll('[data-record]');
+        var newmap = {};
+        for (var i = 0; i < records.length; i++) {
+            var record = records[i];
+            var key = record.querySelector('[data-key]').value;
+            var inputs = record.querySelectorAll('[data-value]:not([style*="display: none"])');
+            if (!inputs || inputs.length == 0)
+                continue;
+            var input = inputs[inputs.length - 1];
+            var value = input.value;
+            if (key)
+                newmap[key] = value || '';
+        }
+        this.value = newmap;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+    /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
+    _toArray(map) {
+        var array = [];
+        for (var key in map) {
+            array.push({
+                key: key,
+                value: map[key]
+            });
+        }
+        return array;
+    }
+    _add() {
+        this._build(true);
+        var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])');
+        for (var i = 0; i < inputs.length; i++) {
+            let input = inputs[i];
+            input.value = '';
+        }
+        ;
+        inputs[0].focus();
+    }
+    _delete(e) {
+        var record = e.target.parentElement;
+        record.querySelector('[data-key]').value = '';
+        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: white;
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ThingsEditorTagScenarios.prototype, "value", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], ThingsEditorTagScenarios.prototype, "scenarios", void 0);
+ThingsEditorTagScenarios = __decorate([
+    customElement('things-editor-tag-scenarios')
+], ThingsEditorTagScenarios);
+export default ThingsEditorTagScenarios;
+//# sourceMappingURL=things-editor-tag-scenarios.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"things-editor-tag-scenarios.js","sourceRoot":"","sources":["../../client/editors/things-editor-tag-scenarios.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,6BAA6B,CAAA;AAEpC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC;;;;;;;EAOE;AAEa,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAAjD;;QAgEe,UAAK,GAA8B,EAAE,CAAA;QAEjE,iBAAY,GAAY,KAAK,CAAA;QAEZ,cAAS,GAAa,EAAE,CAAA;IAyJ3C,CAAC;IAvJC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QACrE,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAC1C,KAAK,EAAE,GAAG,CAAA;;;;;;;;;OAST;SACF,CAAC,CAAA;QAEF,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,SAAS,GAAG,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,CAAC,KAAK,KAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;SACtE;IACH,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG;YACX,SAAS,EAAE,WAAW;SACvB,CAAA;QAED,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAC7B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;yEAEqD,IAAI,CAAC,GAAG;2EACN,IAAI,CAAC,KAAK;;;kBAGnE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA,sBAAsB,QAAQ,IAAI,QAAQ,SAAS,CAAC;;;;mDAItD,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;;SAE9D,CACF;;;;UAIG,KAAK,CACL,IAAI,CAAC,GAAG,EAAE,EACV,IAAI,CAAA;;;;kBAII,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA,sBAAsB,QAAQ,IAAI,QAAQ,SAAS,CAAC;;;WAG9F,CACF;;+CAEsC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;;KAE1D,CAAA;IACH,CAAC;IAED,SAAS,CAAC,CAAC;QACT,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,OAAM;SACP;QAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QAExB,IAAI,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;QACpB,IAAI,KAAK,GAAG,KAAK,CAAC,KAAK,CAAA;QAEvB,IAAI,GAAG,GAAG,KAAK,CAAC,aAAa,CAAA;QAE7B,IAAI,GAAG,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE;YACnC,IAAI,QAAQ,GAAG,GAAG,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAA;YACjE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACxC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE;oBACzB,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAA;iBAChC;aACF;SACF;QAED,IAAI,GAAG,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE;YACnC,IAAI,CAAC,MAAM,EAAE,CAAA;SACd;aAAM,IAAI,GAAG,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;YAClF,IAAI,CAAC,IAAI,EAAE,CAAA;SACZ;QAED,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;IAC3B,CAAC;IAED,MAAM,CAAC,gBAAiB;QACtB,IAAI,gBAAgB;YAAE,IAAI,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,iCAAiC,CAAC,CAAA;;YAClG,IAAI,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAA;QAEpE,IAAI,MAAM,GAAG,EAAE,CAAA;QAEf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACvC,IAAI,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;YAEvB,IAAI,GAAG,GAAI,MAAM,CAAC,aAAa,CAAC,YAAY,CAAsB,CAAC,KAAK,CAAA;YACxE,IAAI,MAAM,GAAG,MAAM,CAAC,gBAAgB,CAAC,4CAA4C,CAAC,CAAA;YAClF,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC;gBAAE,SAAQ;YAE3C,IAAI,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAqB,CAAA;YAEzD,IAAI,KAAK,GAAG,KAAK,CAAC,KAAK,CAAA;YAEvB,IAAI,GAAG;gBAAE,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,IAAI,EAAE,CAAA;SACnC;QAED,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,gDAAgD;IAChD,QAAQ,CAAC,GAAG;QACV,IAAI,KAAK,GAA+B,EAAE,CAAA;QAE1C,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE;YACnB,KAAK,CAAC,IAAI,CAAC;gBACT,GAAG,EAAE,GAAG;gBACR,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC;aAChB,CAAC,CAAA;SACH;QAED,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI;QACF,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;QAEjB,IAAI,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,uDAAuD,CAAC,CAAA;QAEtG,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,IAAI,KAAK,GAAG,MAAM,CAAC,CAAC,CAAqB,CAAA;YACzC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;SACjB;QAED,CAAC;QAAC,MAAM,CAAC,CAAC,CAAsB,CAAC,KAAK,EAAE,CAAA;IAC1C,CAAC;IAED,OAAO,CAAC,CAAC;QACP,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAA;QACnC,MAAM,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,KAAK,GAAG,EAAE,CAAA;QAC7C,IAAI,CAAC,MAAM,EAAE,CAAA;IACf,CAAC;;AA3NM,+BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2DF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAAsC;AAIjE;IAAC,KAAK,EAAE;;2DAAiC;AApEtB,wBAAwB;IAD5C,aAAa,CAAC,6BAA6B,CAAC;GACxB,wBAAwB,CA6N5C;eA7NoB,wBAAwB","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: white;\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"]}