@things-factory/integration-ui 6.1.118 → 6.1.122

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

@@ -0,0 +1,234 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate, __metadata } from "tslib";
+import '@material/mwc-icon';
+import { css, html } from 'lit';
+import { customElement, property, queryAll } from 'lit/decorators.js';
+import { OxFormField } from '@operato/input';
+/**
+ input component for key-value map
+ 
+ Example:
+ 
+   <things-editor-procedure-output
+     value=${map}
+   </things-editor-procedure-output>
+ */
+let ThingsEditorProcedureOutput = class ThingsEditorProcedureOutput extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+        this._changingNow = false;
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onChange.bind(this));
+    }
+    render() {
+        const value = !this.value || typeof this.value !== 'object' ? {} : this.value;
+        return html `
+      ${this._toArray(value).map(item => html `
+          <div data-record>
+            <input type="text" data-name placeholder="name" .value=${item.name} />
+            <select data-type placeholder="type" .value=${item.type}>
+              <option value="" ?selected=${item.type == ''}>&nbsp;</option>
+              <option value="String" ?selected=${item.type == 'String'}>String</option>
+              <option value="Number" ?selected=${item.type == 'Number'}>Number</option>
+              <option value="Cursor" ?selected=${item.type == 'Cursor'}>Cursor</option>
+            </select>
+            <button class="record-action" @click=${(e) => this._delete(e)} tabindex="-1">
+              <mwc-icon>remove</mwc-icon>
+            </button>
+            <button class="record-action" @click=${(e) => this._up(e)} tabindex="-1">
+              <mwc-icon>arrow_upward</mwc-icon>
+            </button>
+            <button class="record-action" @click=${(e) => this._down(e)} tabindex="-1">
+              <mwc-icon>arrow_downward</mwc-icon>
+            </button>
+          </div>
+        `)}
+
+      <div data-record-new>
+        <input type="text" data-name placeholder="name" value="" />
+        <select data-type placeholder="type">
+          <option value="">&nbsp;</option>
+          <option value="String">String</option>
+          <option value="Number">Number</option>
+          <option value="Cursor">Cursor</option>
+        </select>
+        <button class="record-action" @click=${(e) => this._add()} tabindex="-1">
+          <mwc-icon>add</mwc-icon>
+        </button>
+        <button class="hidden"><mwc-icon>add</mwc-icon></button>
+        <button class="hidden"><mwc-icon>add</mwc-icon></button>
+      </div>
+    `;
+    }
+    _onChange(e) {
+        if (this._changingNow) {
+            return;
+        }
+        this._changingNow = true;
+        const input = e.target;
+        const record = e.target.closest('[data-record],[data-record-new]');
+        if (record.hasAttribute('data-record')) {
+            this._build();
+        }
+        else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-type')) {
+            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];
+            const name = record.querySelector('[data-name]').value;
+            const inputs = record.querySelectorAll('[data-type]:not([style*="display: none"])');
+            if (!inputs || inputs.length == 0) {
+                continue;
+            }
+            var input = inputs[inputs.length - 1];
+            var value = input.value;
+            if (name) {
+                newmap[name] = value || '';
+            }
+        }
+        this.value = newmap;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
+    }
+    /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
+    _toArray(map) {
+        var array = [];
+        for (var name in map) {
+            array.push({
+                name: name,
+                type: map[name]
+            });
+        }
+        return array;
+    }
+    _add() {
+        this._build(true);
+        const 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) {
+        const record = e.target.closest('[data-record]');
+        record.querySelector('[data-name]').value = '';
+        this._build();
+    }
+    _up(e) {
+        const record = e.target.closest('[data-record]');
+        const array = Array.from(this.records);
+        const index = array.indexOf(record) - 1;
+        if (index < 0) {
+            return;
+        }
+        const deleted = array.splice(index, 1);
+        array.splice(index + 1, 0, ...deleted);
+        this.value = array.reduce((sum, record) => {
+            const name = record.querySelector('[data-name]').value;
+            const type = record.querySelector('[data-type]').value;
+            sum[name] = type;
+            return sum;
+        }, {});
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
+    }
+    _down(e) {
+        const record = e.target.closest('[data-record]');
+        const array = Array.from(this.records);
+        const index = array.indexOf(record);
+        if (index > array.length) {
+            return;
+        }
+        array.splice(index, 1);
+        array.splice(index + 1, 0, record);
+        this.value = array.reduce((sum, record) => {
+            const name = record.querySelector('[data-name]').value;
+            const type = record.querySelector('[data-type]').value;
+            sum[name] = type;
+            return sum;
+        }, {});
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
+    }
+};
+ThingsEditorProcedureOutput.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      margin-bottom: var(--margin-wide);
+    }
+
+    div {
+      display: flex;
+      flex-flow: row nowrap;
+      gap: var(--margin-default);
+      margin-bottom: var(--margin-narrow);
+    }
+
+    button {
+      border: var(--button-border);
+      border-radius: var(--border-radius);
+      background-color: var(--button-background-color);
+      padding: var(--padding-narrow) var(--padding-default);
+      line-height: 0.8;
+      color: var(--button-color);
+      cursor: pointer;
+    }
+    button + button {
+      margin-left: -5px;
+    }
+    button mwc-icon {
+      font-size: var(--fontsize-default);
+    }
+    button:focus,
+    button:hover,
+    button:active {
+      border: var(--button-activ-border);
+      background-color: var(--button-background-focus-color);
+      color: var(--theme-white-color);
+    }
+
+    input {
+      flex: 1;
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+      min-width: 50px;
+    }
+    input:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+    button.hidden {
+      opacity: 0;
+      cursor: default;
+    }
+  `;
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ThingsEditorProcedureOutput.prototype, "value", void 0);
+__decorate([
+    queryAll('[data-record]'),
+    __metadata("design:type", Object)
+], ThingsEditorProcedureOutput.prototype, "records", void 0);
+ThingsEditorProcedureOutput = __decorate([
+    customElement('things-editor-procedure-output')
+], ThingsEditorProcedureOutput);
+export { ThingsEditorProcedureOutput };
+//# sourceMappingURL=things-editor-procedure-output.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"things-editor-procedure-output.js","sourceRoot":"","sources":["../../client/editors/things-editor-procedure-output.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from '@operato/input'\n\ntype NameType = { [name: string]: string }\ntype ArrayedNameType = { name: string; type: any }\n\n/**\n input component for key-value map\n \n Example:\n \n   <things-editor-procedure-output \n     value=${map}\n   </things-editor-procedure-output>\n */\n@customElement('things-editor-procedure-output')\nexport class ThingsEditorProcedureOutput extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      margin-bottom: var(--margin-wide);\n    }\n\n    div {\n      display: flex;\n      flex-flow: row nowrap;\n      gap: var(--margin-default);\n      margin-bottom: var(--margin-narrow);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--border-radius);\n      background-color: var(--button-background-color);\n      padding: var(--padding-narrow) var(--padding-default);\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\n    }\n    button mwc-icon {\n      font-size: var(--fontsize-default);\n    }\n    button:focus,\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--button-background-focus-color);\n      color: var(--theme-white-color);\n    }\n\n    input {\n      flex: 1;\n      border: 0;\n      border-bottom: var(--border-dark-color);\n      padding: var(--input-padding);\n      font: var(--input-font);\n      color: var(--primary-text-color);\n      min-width: 50px;\n    }\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n    button.hidden {\n      opacity: 0;\n      cursor: default;\n    }\n  `\n\n  @property({ type: Object }) value: NameType = {}\n\n  private _changingNow: boolean = false\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const value = !this.value || typeof this.value !== 'object' ? {} : this.value\n\n    return html`\n      ${this._toArray(value).map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-name placeholder=\"name\" .value=${item.name} />\n            <select data-type placeholder=\"type\" .value=${item.type}>\n              <option value=\"\" ?selected=${item.type == ''}>&nbsp;</option>\n              <option value=\"String\" ?selected=${item.type == 'String'}>String</option>\n              <option value=\"Number\" ?selected=${item.type == 'Number'}>Number</option>\n              <option value=\"Cursor\" ?selected=${item.type == 'Cursor'}>Cursor</option>\n            </select>\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._delete(e)} tabindex=\"-1\">\n              <mwc-icon>remove</mwc-icon>\n            </button>\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._up(e)} tabindex=\"-1\">\n              <mwc-icon>arrow_upward</mwc-icon>\n            </button>\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._down(e)} tabindex=\"-1\">\n              <mwc-icon>arrow_downward</mwc-icon>\n            </button>\n          </div>\n        `\n      )}\n\n      <div data-record-new>\n        <input type=\"text\" data-name placeholder=\"name\" value=\"\" />\n        <select data-type placeholder=\"type\">\n          <option value=\"\">&nbsp;</option>\n          <option value=\"String\">String</option>\n          <option value=\"Number\">Number</option>\n          <option value=\"Cursor\">Cursor</option>\n        </select>\n        <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n          <mwc-icon>add</mwc-icon>\n        </button>\n        <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n        <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n      </div>\n    `\n  }\n\n  _onChange(e: Event) {\n    if (this._changingNow) {\n      return\n    }\n\n    this._changingNow = true\n\n    const input = e.target as HTMLInputElement\n\n    const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement\n\n    if (record.hasAttribute('data-record')) {\n      this._build()\n    } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-type')) {\n      this._add()\n    }\n\n    this._changingNow = false\n  }\n\n  _build(includeNewRecord?: boolean) {\n    if (includeNewRecord) {\n      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n    }\n\n    var newmap: NameType = {}\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n      const inputs = record.querySelectorAll(\n        '[data-type]:not([style*=\"display: none\"])'\n      ) as NodeListOf<HTMLInputElement>\n\n      if (!inputs || inputs.length == 0) {\n        continue\n      }\n\n      var input = inputs[inputs.length - 1]\n\n      var value = input.value\n\n      if (name) {\n        newmap[name] = value || ''\n      }\n    }\n\n    this.value = newmap\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n  _toArray(map: NameType) {\n    var array: ArrayedNameType[] = []\n\n    for (var name in map) {\n      array.push({\n        name: name,\n        type: map[name]\n      })\n    }\n\n    return array\n  }\n\n  _add() {\n    this._build(true)\n\n    const inputs = this.renderRoot.querySelectorAll(\n      '[data-record-new] input:not([style*=\"display: none\"])'\n    ) as NodeListOf<HTMLInputElement & { value: any }>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n\n      input.value = ''\n    }\n\n    inputs[0].focus()\n  }\n\n  _delete(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n\n    ;(record!.querySelector('[data-name]') as HTMLInputElement)!.value = ''\n\n    this._build()\n  }\n\n  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n  _up(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record) - 1\n\n    if (index < 0) {\n      return\n    }\n\n    const deleted = array.splice(index, 1)\n    array.splice(index + 1, 0, ...deleted)\n\n    this.value = array.reduce((sum, record) => {\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n      const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n\n      sum[name] = type\n      return sum\n    }, {} as { [name: string]: string })\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  _down(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record)\n\n    if (index > array.length) {\n      return\n    }\n\n    array.splice(index, 1)\n    array.splice(index + 1, 0, record)\n\n    this.value = array.reduce((sum, record) => {\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n      const type = (record.querySelector('[data-type]') as HTMLInputElement).value\n\n      sum[name] = type\n      return sum\n    }, {} as { [name: string]: string })\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}

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

@@ -2,6 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import '@material/mwc-icon';
+import '@operato/i18n/ox-i18n.js';
 import { OxFormField } from '@operato/input';
 type ProcedureParameterType = {
     name: string;
@@ -11,6 +12,11 @@ type ProcedureParameterType = {
     accessor?: string;
     maxSize?: number;
 };
+type ValueType = {
+    code?: string;
+    procedure?: string;
+    parameters?: ProcedureParameterType[];
+};
 /**
  input component for procedure-parameters
  
@@ -22,17 +28,21 @@ type ProcedureParameterType = {
  */
 export declare class ThingsEditorProcedureParameters extends OxFormField {
     static styles: import("lit").CSSResult[];
-    value: ProcedureParameterType[];
+    value: ValueType;
     steps: string[];
+    private procedure?;
+    private parameters?;
     private _changingNow;
+    records: NodeListOf<HTMLElement>;
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
+    updated(changes: any): void;
     _onChange(e: Event): void;
     _adjust({ name, type, dir, maxSize, val, accessor }: ProcedureParameterType): ProcedureParameterType;
     _build(includeNewRecord?: boolean): void;
+    _updateValue(): void;
     _add(): void;
     _delete(e: MouseEvent): void;
-    records: NodeListOf<HTMLElement>;
     _up(e: MouseEvent): void;
     _down(e: MouseEvent): void;
 }

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

@@ -3,8 +3,9 @@
  */
 import { __decorate, __metadata } from "tslib";
 import '@material/mwc-icon';
+import '@operato/i18n/ox-i18n.js';
 import { css, html } from 'lit';
-import { customElement, property, queryAll } from 'lit/decorators.js';
+import { customElement, property, queryAll, state } from 'lit/decorators.js';
 import { OxFormField } from '@operato/input';
 /**
  input component for procedure-parameters
@@ -18,18 +19,46 @@ import { OxFormField } from '@operato/input';
 let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters extends OxFormField {
     constructor() {
         super(...arguments);
-        this.value = [];
+        this.value = {};
         this.steps = [];
+        this.procedure = '';
+        this.parameters = [];
         this._changingNow = false;
     }
     firstUpdated() {
         this.renderRoot.addEventListener('change', this._onChange.bind(this));
     }
     render() {
-        const value = !this.value || !Array.isArray(this.value) ? [] : this.value;
+        var _a;
+        const code = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.code) || '';
+        const parameters = this.parameters || [];
+        const procedure = this.procedure || '';
         const steps = this.steps || [];
         return html `
-      ${value.map(item => html `
+      <div>
+        <label><ox-i18n msgid="label.procedure-code"></ox-i18n></label>
+      </div>
+
+      <div>
+        <pre>
+          <code>${code}</code>
+        </pre
+        >
+      </div>
+
+      <div>
+        <label><ox-i18n msgid="label.procedure-name"></ox-i18n></label>
+      </div>
+
+      <div>
+        <input type="text" data-procedure .value=${procedure} />
+      </div>
+
+      <div>
+        <label><ox-i18n msgid="label.parameters"></ox-i18n></label>
+      </div>
+
+      ${parameters.map(item => html `
           <div data-record>
             <input type="text" data-name placeholder="name" .value=${item.name} />
             <select data-dir placeholder="dir" .value=${item.dir}>
@@ -100,18 +129,33 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
       <datalist id="step-list">${steps.map(id => html ` <option value=${id}></option> `)}</datalist>
     `;
     }
+    updated(changes) {
+        if (changes.has('value')) {
+            /* 하위 호환성때문에, Array타입 값을 처리하도록 함. 다음 마이너 업그레이드시에 제거할 것. */
+            const value = (Array.isArray(this.value) ? { parameters: this.value } : this.value);
+            const { procedure, parameters } = value;
+            this.procedure = procedure;
+            this.parameters = parameters;
+        }
+    }
     _onChange(e) {
         if (this._changingNow) {
             return;
         }
         this._changingNow = true;
         const input = e.target;
-        const record = e.target.closest('[data-record],[data-record-new]');
-        if (record.hasAttribute('data-record')) {
-            this._build();
+        if (input.hasAttribute('data-procedure')) {
+            this.procedure = input.value;
+            this._updateValue();
         }
-        else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-type')) {
-            this._add();
+        else {
+            const record = e.target.closest('[data-record],[data-record-new]');
+            if (record.hasAttribute('data-record')) {
+                this._build();
+            }
+            else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-type')) {
+                this._add();
+            }
         }
         this._changingNow = false;
     }
@@ -158,7 +202,16 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
                 newmap.push(this._adjust({ name, type, dir, val, accessor, maxSize }));
             }
         }
-        this.value = newmap;
+        this.parameters = newmap;
+        this._updateValue();
+    }
+    _updateValue() {
+        const args = (this.parameters || []).map(p => ':' + p.name).join(', ');
+        this.value = {
+            code: `${this.procedure}(${args});`,
+            procedure: this.procedure,
+            parameters: this.parameters
+        };
         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
     }
     _add() {
@@ -184,7 +237,7 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
         }
         const deleted = array.splice(index, 1);
         array.splice(index + 1, 0, ...deleted);
-        this.value = array.map(record => {
+        this.parameters = array.map(record => {
             const name = record.querySelector('[data-name]').value;
             const dir = record.querySelector('[data-dir]').value;
             const type = record.querySelector('[data-type]').value;
@@ -193,7 +246,7 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
             const maxSize = record.querySelector('[data-max-size]').valueAsNumber;
             return this._adjust({ name, dir, type, val, accessor, maxSize });
         });
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
+        this._updateValue();
     }
     _down(e) {
         const record = e.target.closest('[data-record]');
@@ -204,7 +257,7 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
         }
         array.splice(index, 1);
         array.splice(index + 1, 0, record);
-        this.value = array.map(record => {
+        this.parameters = array.map(record => {
             const name = record.querySelector('[data-name]').value;
             const dir = record.querySelector('[data-dir]').value;
             const type = record.querySelector('[data-type]').value;
@@ -212,7 +265,7 @@ let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters exte
             const maxSize = record.querySelector('[data-max-size]').valueAsNumber;
             return this._adjust({ name, dir, type, val, maxSize });
         });
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
+        this._updateValue();
     }
 };
 ThingsEditorProcedureParameters.styles = [
@@ -231,6 +284,21 @@ ThingsEditorProcedureParameters.styles = [
         margin-bottom: var(--margin-narrow);
       }
 
+      pre {
+        flex: 1;
+        background-color: #333;
+        color: white;
+        margin: 0;
+        padding: 4px 6px;
+        font-size: 1.5em;
+        display: flex;
+      }
+
+      code {
+        flex: 1;
+        text-wrap: wrap;
+      }
+
       button {
         border: var(--button-border);
         border-radius: var(--border-radius);
@@ -286,13 +354,21 @@ ThingsEditorProcedureParameters.styles = [
     `
 ];
 __decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array)
+    property({ type: Object }),
+    __metadata("design:type", Object)
 ], ThingsEditorProcedureParameters.prototype, "value", void 0);
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)
 ], ThingsEditorProcedureParameters.prototype, "steps", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], ThingsEditorProcedureParameters.prototype, "procedure", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], ThingsEditorProcedureParameters.prototype, "parameters", void 0);
 __decorate([
     queryAll('[data-record]'),
     __metadata("design:type", Object)

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

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