@things-factory/integration-ui 6.1.112 → 6.1.115

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

@@ -0,0 +1,291 @@
+/**
+ * @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 procedure-parameters
+ 
+ Example:
+ 
+   <things-editor-procedure-parameters
+     value=${map}
+   </things-editor-procedure-parameters>
+ */
+let ThingsEditorProcedureParameters = class ThingsEditorProcedureParameters extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.value = [];
+        this._changingNow = false;
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('change', this._onChange.bind(this));
+    }
+    render() {
+        const value = !this.value || !Array.isArray(this.value) ? [] : this.value;
+        return html `
+      ${value.map(item => html `
+          <div data-record>
+            <input type="text" data-name placeholder="name" .value=${item.name} />
+            <select data-dir placeholder="dir" .value=${item.dir}>
+              <option value="" ?selected=${item.dir == ''}>&nbsp;</option>
+              <option value="In" ?selected=${item.dir == 'In'}>In</option>
+              <option value="Inout" ?selected=${item.dir == 'Inout'}>Inout</option>
+              <option value="Out" ?selected=${item.dir == 'Out'}>Out</option>
+            </select>
+            <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="Date" ?selected=${item.type == 'Date'}>Date</option>
+              <!-- 
+                <option value="Buffer" ?selected=${item.type == 'Buffer'}>Buffer</option>
+                <option value="Blob" ?selected=${item.type == 'Blob'}>Blob</option>
+                <option value="Clob" ?selected=${item.type == 'Clob'}>Clob</option>
+              -->
+              <option value="Cursor" ?selected=${item.type == 'Cursor'}>Cursor</option>
+            </select>
+            <input type="text" data-val placeholder="val" .value=${item.val} />
+            <input type="number" data-max-size placeholder="max-size" .value=${String(item.maxSize)} />
+
+            <button class="record-action" @click=${(e) => this._delete(e)} tabindex="-1">
+              <mwc-icon>remove</mwc-icon>
+            </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-dir placeholder="dir">
+          <option value="" selected>&nbsp;</option>
+          <option value="In">In</option>
+          <option value="Inout">Inout</option>
+          <option value="Out">Out</option>
+        </select>
+        <select data-type placeholder="type" value="">
+          <option value="" selected>&nbsp;</option>
+          <option value="String">String</option>
+          <option value="Number">Number</option>
+          <option value="Date">Date</option>
+          <!--
+          <option value="Buffer">Buffer</option>
+          <option value="Blob">Blob</option>
+          <option value="Clob">Clob</option>
+          -->
+          <option value="Cursor">Cursor</option>
+        </select>
+        <input type="text" data-val placeholder="val" value="" />
+        <input type="number" data-max-size placeholder="max-size" value="" />
+
+        <button class="record-action" @click=${(e) => this._add()} tabindex="-1">
+          <mwc-icon>add</mwc-icon>
+        </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;
+    }
+    _adjust({ name, type, dir, maxSize, val }) {
+        const entry = {
+            name,
+            type,
+            dir
+        };
+        if (dir != 'In' &&
+            (type == 'String' || type == 'Buffer') &&
+            maxSize !== null &&
+            maxSize !== undefined &&
+            !isNaN(maxSize)) {
+            entry.maxSize = maxSize;
+        }
+        if (dir != 'Out' && val !== null && val !== undefined && val != '') {
+            entry.val = val;
+        }
+        return entry;
+    }
+    _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 type = record.querySelector('[data-type]').value;
+            const dir = record.querySelector('[data-dir]').value;
+            const val = record.querySelector('[data-val]').value;
+            const maxSize = record.querySelector('[data-max-size]').valueAsNumber;
+            const inputs = record.querySelectorAll('[data-type]:not([style*="display: none"])');
+            if (!inputs || inputs.length == 0) {
+                continue;
+            }
+            if (name) {
+                newmap.push(this._adjust({ name, type, dir, val, maxSize }));
+            }
+        }
+        this.value = newmap;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
+    }
+    _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.map(record => {
+            const name = record.querySelector('[data-name]').value;
+            const dir = record.querySelector('[data-dir]').value;
+            const type = record.querySelector('[data-type]').value;
+            const val = record.querySelector('[data-val]').value;
+            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 }));
+    }
+    _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.map(record => {
+            const name = record.querySelector('[data-name]').value;
+            const dir = record.querySelector('[data-dir]').value;
+            const type = record.querySelector('[data-type]').value;
+            const val = record.querySelector('[data-val]').value;
+            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 }));
+    }
+};
+ThingsEditorProcedureParameters.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;
+      }
+
+      select,
+      ox-select,
+      input:not([type='checkbox']) {
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-radius: 4px;
+      }
+    `
+];
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], ThingsEditorProcedureParameters.prototype, "value", void 0);
+__decorate([
+    queryAll('[data-record]'),
+    __metadata("design:type", Object)
+], ThingsEditorProcedureParameters.prototype, "records", void 0);
+ThingsEditorProcedureParameters = __decorate([
+    customElement('things-editor-procedure-parameters')
+], ThingsEditorProcedureParameters);
+export { ThingsEditorProcedureParameters };
+//# sourceMappingURL=things-editor-procedure-parameters.js.map

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

@@ -0,0 +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 = { name: string; dir: string; type: string; val?: any; maxSize?: number }\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\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\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-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-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  }\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 }: ProcedureParameterType): ProcedureParameterType {\n    const entry = {\n      name,\n      type,\n      dir\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 = 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 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, 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 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  _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"]}