@operato/process 1.1.34 → 1.1.36

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.1.36](https://github.com/heartyoh/ioperato/compare/v1.1.35...v1.1.36) (2022-12-16)
+
+
+### :bug: Bug Fix
+
+* add ox-process-selector for process module ([e5b5f3e](https://github.com/heartyoh/ioperato/commit/e5b5f3e350777bff62987ec7ce8137d939edbc5e))
+* migrate board/process related components from things-factory ([9099193](https://github.com/heartyoh/ioperato/commit/90991935dbb83a4b5bc84cfa8ef88e3d50c3e3d6))
+
+
+
+### [1.1.35](https://github.com/heartyoh/ioperato/compare/v1.1.34...v1.1.35) (2022-12-16)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
 ### [1.1.34](https://github.com/heartyoh/ioperato/compare/v1.1.33...v1.1.34) (2022-12-16)
 
 **Note:** Version bump only for package @operato/process

package/dist/src/modeller/property-sidebar/effects/property-event-hover.js

@@ -35,11 +35,7 @@ export class PropertyEventHover extends LitElement {
 
       ${action == 'popup'
             ? html `
-            <things-editor-board-selector
-              value-key="target"
-              .value=${target}
-              custom-editor
-            ></things-editor-board-selector>
+            <ox-editor-process-selector value-key="target" .value=${target} custom-editor></ox-editor-process-selector>
           `
             : html `
             <input

package/dist/src/modeller/property-sidebar/effects/property-event-hover.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-event-hover.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-hover.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { EffectsSharedStyle } from './effects-shared-style.js'\nimport { convert } from './value-converter'\n\nexport class PropertyEventHover extends LitElement {\n  static styles = [EffectsSharedStyle]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', emphasize, restore } = this.value || {}\n\n    return html`\n      <input id=\"checkbox-emphasize\" type=\"checkbox\" value-key=\"emphasize\" .checked=${emphasize} />\n      <label for=\"checkbox-emphasize\" class=\"checkbox-label\">\n        <ox-i18n msgid=\"label.emphasize\">emphasize</ox-i18n>\n      </label>\n\n      <label> <ox-i18n msgid=\"label.action\">action</ox-i18n> </label>\n      <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n        <option value=\"\"></option>\n        <option value=\"popup\">popup target process</option>\n        <option value=\"infoWindow\">open infowindow</option>\n        <option value=\"data-toggle\">toggle(true/false) target component data</option>\n        <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n        <option value=\"data-set\">set value to target component data</option>\n        <option value=\"value-set\">set value to target component value</option>\n      </select>\n\n      <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n      ${action == 'popup'\n        ? html`\n            <things-editor-board-selector\n              value-key=\"target\"\n              .value=${target}\n              custom-editor\n            ></things-editor-board-selector>\n          `\n        : html`\n            <input\n              value-key=\"target\"\n              .value=${target || ''}\n              list=\"target-list\"\n              .placeholder=\"${this._getPlaceHoder(action)}\"\n            />\n\n            <datalist id=\"target-list\">\n              ${this._getTargetList(action).map(\n                ({ value, description }) => html` <option .value=${value}>${description}</option> `\n              )}\n            </datalist>\n          `}\n      ${action == 'data-set' || action == 'value-set'\n        ? html`\n            <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n            <ox-input-data value-key=\"value\" .value=${value} custom-editor fullwidth></ox-input-data>\n          `\n        : html``}\n\n      <input id=\"checkbox-restore\" type=\"checkbox\" value-key=\"restore\" .checked=${restore} />\n      <label for=\"checkbox-restore\" class=\"checkbox-label\">\n        <ox-i18n msgid=\"label.restore-on-leave\">restore on leave</ox-i18n>\n      </label>\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'popup':\n      case 'goto':\n        return 'SCENE-100'\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      default:\n        return ''\n    }\n  }\n\n  _getTargetList(action: string): { value: string; description: string }[] {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n        let ids =\n          (this.scene &&\n            this.scene.ids.map(i => {\n              const id = i.key\n              return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n            })) ||\n          []\n        ids.unshift({ value: '(self)', description: 'self component' })\n        return ids\n      case 'infoWindow':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => {\n                const id = i.key\n                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n              })) ||\n          []\n        )\n      default:\n        return []\n    }\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"property-event-hover.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-hover.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { EffectsSharedStyle } from './effects-shared-style.js'\nimport { convert } from './value-converter'\n\nexport class PropertyEventHover extends LitElement {\n  static styles = [EffectsSharedStyle]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', emphasize, restore } = this.value || {}\n\n    return html`\n      <input id=\"checkbox-emphasize\" type=\"checkbox\" value-key=\"emphasize\" .checked=${emphasize} />\n      <label for=\"checkbox-emphasize\" class=\"checkbox-label\">\n        <ox-i18n msgid=\"label.emphasize\">emphasize</ox-i18n>\n      </label>\n\n      <label> <ox-i18n msgid=\"label.action\">action</ox-i18n> </label>\n      <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n        <option value=\"\"></option>\n        <option value=\"popup\">popup target process</option>\n        <option value=\"infoWindow\">open infowindow</option>\n        <option value=\"data-toggle\">toggle(true/false) target component data</option>\n        <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n        <option value=\"data-set\">set value to target component data</option>\n        <option value=\"value-set\">set value to target component value</option>\n      </select>\n\n      <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n      ${action == 'popup'\n        ? html`\n            <ox-editor-process-selector value-key=\"target\" .value=${target} custom-editor></ox-editor-process-selector>\n          `\n        : html`\n            <input\n              value-key=\"target\"\n              .value=${target || ''}\n              list=\"target-list\"\n              .placeholder=\"${this._getPlaceHoder(action)}\"\n            />\n\n            <datalist id=\"target-list\">\n              ${this._getTargetList(action).map(\n                ({ value, description }) => html` <option .value=${value}>${description}</option> `\n              )}\n            </datalist>\n          `}\n      ${action == 'data-set' || action == 'value-set'\n        ? html`\n            <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n            <ox-input-data value-key=\"value\" .value=${value} custom-editor fullwidth></ox-input-data>\n          `\n        : html``}\n\n      <input id=\"checkbox-restore\" type=\"checkbox\" value-key=\"restore\" .checked=${restore} />\n      <label for=\"checkbox-restore\" class=\"checkbox-label\">\n        <ox-i18n msgid=\"label.restore-on-leave\">restore on leave</ox-i18n>\n      </label>\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'popup':\n      case 'goto':\n        return 'SCENE-100'\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      default:\n        return ''\n    }\n  }\n\n  _getTargetList(action: string): { value: string; description: string }[] {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n        let ids =\n          (this.scene &&\n            this.scene.ids.map(i => {\n              const id = i.key\n              return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n            })) ||\n          []\n        ids.unshift({ value: '(self)', description: 'self component' })\n        return ids\n      case 'infoWindow':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => {\n                const id = i.key\n                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n              })) ||\n          []\n        )\n      default:\n        return []\n    }\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/effects/property-event-tap.d.ts

@@ -3,6 +3,7 @@
  */
 import '@operato/input/ox-input-data.js';
 import '@operato/i18n/ox-i18n.js';
+import '../../../ox-editor-process-selector.js';
 import { LitElement } from 'lit';
 import { Properties, Scene } from '@hatiolab/things-scene';
 export declare class PropertyEventTap extends LitElement {

package/dist/src/modeller/property-sidebar/effects/property-event-tap.js

@@ -4,6 +4,7 @@
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-data.js';
 import '@operato/i18n/ox-i18n.js';
+import '../../../ox-editor-process-selector.js';
 import { html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { scenarios } from '../../../graphql/scenario';
@@ -61,11 +62,7 @@ export class PropertyEventTap extends LitElement {
 
       ${action === 'goto' || (action === null || action === void 0 ? void 0 : action.includes('popup'))
             ? html `
-            <things-editor-board-selector
-              value-key="target"
-              .value=${target}
-              custom-editor
-            ></things-editor-board-selector>
+            <ox-editor-process-selector value-key="target" .value=${target} custom-editor></ox-editor-process-selector>
           `
             : action !== 'run'
                 ? html `

package/dist/src/modeller/property-sidebar/effects/property-event-tap.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-event-tap.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-tap.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html, LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { scenarios } from '../../../graphql/scenario'\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\nexport class PropertyEventTap extends LitElement {\n  static styles = [EffectsSharedStyle]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  @state() scenarios: { value: string; description: string }[] = []\n  @state() targetList: { value: string; description: string }[] = []\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', pressed, options } = this.value || {}\n    var { input = '(self)', output = true } = options || {}\n\n    return html`\n      <input id=\"checkbox-pressed\" type=\"checkbox\" value-key=\"pressed\" .checked=${pressed} />\n      <label for=\"checkbox-pressed\" class=\"checkbox-label\"> <ox-i18n msgid=\"label.pressed\">pressed</ox-i18n> </label>\n\n      <label> <ox-i18n msgid=\"label.action\">action</ox-i18n> </label>\n      <select\n        id=\"tap-select\"\n        value-key=\"action\"\n        .value=${action || ''}\n        @change=${async (e: Event) => {\n          if ((e.target as HTMLSelectElement).value.includes('scenario')) {\n            this.scenarios = (await scenarios()).map(({ name, description }) => {\n              return { value: name, description }\n            })\n          }\n        }}\n      >\n        <option value=\"\"></option>\n        <option value=\"run\">run this process</option>\n        <option value=\"goto\">go to target process</option>\n        <option value=\"link-open\">open new window for target link</option>\n        <option value=\"link-move\">move to target link</option>\n        <option value=\"route-page\">route to page</option>\n        <option value=\"popup\">popup target process</option>\n        <option value=\"modal-popup\">modal popup target process</option>\n        <option value=\"close-scene\">close current process</option>\n        <option value=\"infoWindow\">open infowindow</option>\n        <option value=\"toggle-info-window\">toggle infowindow</option>\n        <option value=\"data-toggle\">toggle(true/false) target component data</option>\n        <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n        <option value=\"data-set\">set value to target component data</option>\n        <option value=\"value-set\">set value to target component value</option>\n        <option value=\"start-scenario\">start the given scenario</option>\n        <option value=\"run-scenario\">run the given scenario</option>\n      </select>\n\n      <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n      ${action === 'goto' || action?.includes('popup')\n        ? html`\n            <things-editor-board-selector\n              value-key=\"target\"\n              .value=${target}\n              custom-editor\n            ></things-editor-board-selector>\n          `\n        : action !== 'run'\n        ? html`\n            <input\n              value-key=\"target\"\n              .value=${target}\n              list=\"target-list\"\n              .placeholder=${this._getPlaceHoder(action)}\n              @focusin=${() => {\n                this.targetList = this._getInputList(action)\n              }}\n            />\n\n            <datalist id=\"target-list\">\n              ${this.targetList.map(\n                ({ value, description }) => html` <option .value=${value}>${description}</option> `\n              )}\n            </datalist>\n          `\n        : html``}\n      ${action === 'goto' || action?.includes('popup')\n        ? html`\n            <label for=\"input\"> <ox-i18n msgid=\"label.input-data\">input</ox-i18n> </label>\n            <input\n              id=\"input\"\n              value-key=\"input\"\n              .value=${input}\n              list=\"input-list\"\n              @focusin=${() => {\n                this.targetList = this._getInputList(action)\n              }}\n            />\n            <datalist id=\"input-list\">\n              ${this.targetList.map(\n                ({ value, description }) => html` <option .value=${value}>${description}</option> `\n              )}\n            </datalist>\n            ${\n              /* currently 'goto' does not support returning result */\n              action?.includes('popup')\n                ? html` <input id=\"checkbox-output\" type=\"checkbox\" value-key=\"output\" .checked=${output} />\n                    <label for=\"checkbox-output\" class=\"checkbox-label\">\n                      <ox-i18n msgid=\"label.will-get-return\">will-get-return</ox-i18n>\n                    </label>`\n                : html``\n            }\n          `\n        : action === 'data-set' || action === 'value-set' || action === 'start-scenario' || action === 'run-scenario'\n        ? html`\n            <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n            <ox-input-data value-key=\"value\" .value=${value} custom-editor fullwidth></ox-input-data>\n          `\n        : html``}\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      default:\n        return ''\n    }\n  }\n\n  _getInputList(action: string): { value: string; description: string }[] {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n      case 'popup':\n      case 'modal-popup':\n        let ids =\n          (this.scene &&\n            this.scene.ids.map(i => {\n              const id = i.key\n              return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n            })) ||\n          []\n        ids.unshift({ value: '(self)', description: 'self component' })\n        return ids\n      case 'infoWindow':\n      case 'toggle-info-window':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => {\n                const id = i.key\n                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n              })) ||\n          []\n        )\n      case 'start-scenario':\n      case 'run-scenario':\n        return this.scenarios\n      default:\n        return []\n    }\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    if (key === 'input' || key === 'output') {\n      var { options = {} } = this.value || {}\n\n      this.value = {\n        ...this.value,\n        options: {\n          ...options,\n          [key]: convert(element)\n        }\n      }\n    } else {\n      this.value = {\n        ...this.value,\n        [key]: convert(element)\n      }\n    }\n\n    var { action } = this.value\n    if (action !== 'goto' && !action?.includes('popup')) {\n      /* clear unused options */\n      delete this.value.options\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"property-event-tap.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-tap.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '../../../ox-editor-process-selector.js'\n\nimport { html, LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { scenarios } from '../../../graphql/scenario'\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\nexport class PropertyEventTap extends LitElement {\n  static styles = [EffectsSharedStyle]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  @state() scenarios: { value: string; description: string }[] = []\n  @state() targetList: { value: string; description: string }[] = []\n\n  async firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', pressed, options } = this.value || {}\n    var { input = '(self)', output = true } = options || {}\n\n    return html`\n      <input id=\"checkbox-pressed\" type=\"checkbox\" value-key=\"pressed\" .checked=${pressed} />\n      <label for=\"checkbox-pressed\" class=\"checkbox-label\"> <ox-i18n msgid=\"label.pressed\">pressed</ox-i18n> </label>\n\n      <label> <ox-i18n msgid=\"label.action\">action</ox-i18n> </label>\n      <select\n        id=\"tap-select\"\n        value-key=\"action\"\n        .value=${action || ''}\n        @change=${async (e: Event) => {\n          if ((e.target as HTMLSelectElement).value.includes('scenario')) {\n            this.scenarios = (await scenarios()).map(({ name, description }) => {\n              return { value: name, description }\n            })\n          }\n        }}\n      >\n        <option value=\"\"></option>\n        <option value=\"run\">run this process</option>\n        <option value=\"goto\">go to target process</option>\n        <option value=\"link-open\">open new window for target link</option>\n        <option value=\"link-move\">move to target link</option>\n        <option value=\"route-page\">route to page</option>\n        <option value=\"popup\">popup target process</option>\n        <option value=\"modal-popup\">modal popup target process</option>\n        <option value=\"close-scene\">close current process</option>\n        <option value=\"infoWindow\">open infowindow</option>\n        <option value=\"toggle-info-window\">toggle infowindow</option>\n        <option value=\"data-toggle\">toggle(true/false) target component data</option>\n        <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n        <option value=\"data-set\">set value to target component data</option>\n        <option value=\"value-set\">set value to target component value</option>\n        <option value=\"start-scenario\">start the given scenario</option>\n        <option value=\"run-scenario\">run the given scenario</option>\n      </select>\n\n      <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n      ${action === 'goto' || action?.includes('popup')\n        ? html`\n            <ox-editor-process-selector value-key=\"target\" .value=${target} custom-editor></ox-editor-process-selector>\n          `\n        : action !== 'run'\n        ? html`\n            <input\n              value-key=\"target\"\n              .value=${target}\n              list=\"target-list\"\n              .placeholder=${this._getPlaceHoder(action)}\n              @focusin=${() => {\n                this.targetList = this._getInputList(action)\n              }}\n            />\n\n            <datalist id=\"target-list\">\n              ${this.targetList.map(\n                ({ value, description }) => html` <option .value=${value}>${description}</option> `\n              )}\n            </datalist>\n          `\n        : html``}\n      ${action === 'goto' || action?.includes('popup')\n        ? html`\n            <label for=\"input\"> <ox-i18n msgid=\"label.input-data\">input</ox-i18n> </label>\n            <input\n              id=\"input\"\n              value-key=\"input\"\n              .value=${input}\n              list=\"input-list\"\n              @focusin=${() => {\n                this.targetList = this._getInputList(action)\n              }}\n            />\n            <datalist id=\"input-list\">\n              ${this.targetList.map(\n                ({ value, description }) => html` <option .value=${value}>${description}</option> `\n              )}\n            </datalist>\n            ${\n              /* currently 'goto' does not support returning result */\n              action?.includes('popup')\n                ? html` <input id=\"checkbox-output\" type=\"checkbox\" value-key=\"output\" .checked=${output} />\n                    <label for=\"checkbox-output\" class=\"checkbox-label\">\n                      <ox-i18n msgid=\"label.will-get-return\">will-get-return</ox-i18n>\n                    </label>`\n                : html``\n            }\n          `\n        : action === 'data-set' || action === 'value-set' || action === 'start-scenario' || action === 'run-scenario'\n        ? html`\n            <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n            <ox-input-data value-key=\"value\" .value=${value} custom-editor fullwidth></ox-input-data>\n          `\n        : html``}\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      default:\n        return ''\n    }\n  }\n\n  _getInputList(action: string): { value: string; description: string }[] {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n      case 'popup':\n      case 'modal-popup':\n        let ids =\n          (this.scene &&\n            this.scene.ids.map(i => {\n              const id = i.key\n              return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n            })) ||\n          []\n        ids.unshift({ value: '(self)', description: 'self component' })\n        return ids\n      case 'infoWindow':\n      case 'toggle-info-window':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => {\n                const id = i.key\n                return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n              })) ||\n          []\n        )\n      case 'start-scenario':\n      case 'run-scenario':\n        return this.scenarios\n      default:\n        return []\n    }\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    if (key === 'input' || key === 'output') {\n      var { options = {} } = this.value || {}\n\n      this.value = {\n        ...this.value,\n        options: {\n          ...options,\n          [key]: convert(element)\n        }\n      }\n    } else {\n      this.value = {\n        ...this.value,\n        [key]: convert(element)\n      }\n    }\n\n    var { action } = this.value\n    if (action !== 'goto' && !action?.includes('popup')) {\n      /* clear unused options */\n      delete this.value.options\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/inspector/inspector.d.ts

@@ -19,7 +19,7 @@ export declare class SceneInspector extends LitElement {
     _onclick(e: MouseEvent): void;
     _ondblclick(e: MouseEvent): void;
     get extendedMap(): any;
-    getNodeHandleClass(component: Component): "extended" | "collapsed" | "collapsespace";
+    getNodeHandleClass(component: Component): "collapsed" | "extended" | "collapsespace";
     isExtended(component: Component): boolean;
     toggleExtended(component: Component): void;
     toggleHidden(component: Component): void;

package/dist/src/ox-editor-process-selector.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/mwc-icon';
+import './selector/ox-process-selector';
+import { LitElement } from 'lit';
+export declare class ProcessSelector extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+    value?: string;
+    properties?: any;
+    private popup;
+    render(): import("lit-html").TemplateResult<1>;
+    _onInputChanged(e: Event): void;
+    openSelector(): void;
+}

package/dist/src/ox-editor-process-selector.js

@@ -0,0 +1,86 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import './selector/ox-process-selector';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
+let ProcessSelector = class ProcessSelector extends LitElement {
+    static get styles() {
+        return [
+            css `
+        :host {
+          position: relative;
+          display: inline-block;
+        }
+
+        input[type='text'] {
+          box-sizing: border-box;
+          width: 100%;
+          height: 100%;
+          border: 1px solid rgba(0, 0, 0, 0.2);
+        }
+
+        mwc-icon {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      `
+        ];
+    }
+    render() {
+        return html `
+      <input id="text" type="text" .value=${this.value || ''} @change=${(e) => this._onInputChanged(e)} />
+
+      <mwc-icon @click=${(e) => this.openSelector()}>dashboard</mwc-icon>
+    `;
+    }
+    _onInputChanged(e) {
+        var _a;
+        this.value = (_a = e.target) === null || _a === void 0 ? void 0 : _a.value;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+    openSelector() {
+        if (this.popup) {
+            delete this.popup;
+        }
+        /*
+         * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+         * 주의. value는 object일 수도 있고, string일 수도 있다.
+         * string인 경우에는 해당 보드의 id로 해석한다.
+         */
+        var value = this.value || {};
+        var template = html `
+      <ox-process-selector
+        .creatable=${true}
+        .value=${value}
+        @process-selected=${async (e) => {
+            var process = e.detail.process;
+            this.value = process.id;
+            this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+            this.popup && this.popup.close();
+        }}
+      ></ox-process-selector>
+    `;
+        this.popup = openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('title.select process')
+        });
+    }
+};
+__decorate([
+    property({ type: String })
+], ProcessSelector.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], ProcessSelector.prototype, "properties", void 0);
+ProcessSelector = __decorate([
+    customElement('ox-editor-process-selector')
+], ProcessSelector);
+export { ProcessSelector };
+//# sourceMappingURL=ox-editor-process-selector.js.map

package/dist/src/ox-editor-process-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-editor-process-selector.js","sourceRoot":"","sources":["../../src/ox-editor-process-selector.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGpC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAC7C,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;OAkBF;SACF,CAAA;IACH,CAAC;IAOD,MAAM;QACJ,OAAO,IAAI,CAAA;4CAC6B,IAAI,CAAC,KAAK,IAAI,EAAE,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;;yBAEpF,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;KAC1D,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAQ;;QACtB,IAAI,CAAC,KAAK,GAAG,MAAC,CAAC,CAAC,MAAc,0CAAE,KAAK,CAAA;QACrC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAA;SAClB;QAED;;;;WAIG;QACH,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE5B,IAAI,QAAQ,GAAG,IAAI,CAAA;;qBAEF,IAAI;iBACR,KAAK;4BACM,KAAK,EAAE,CAAc,EAAE,EAAE;YAC3C,IAAI,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAA;YAC9B,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,EAAE,CAAA;YAEvB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;YAEhF,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;SACzC,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AAnD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAiB;AA1BjC,eAAe;IAD3B,aAAa,CAAC,4BAA4B,CAAC;GAC/B,eAAe,CA4E3B;SA5EY,eAAe","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport './selector/ox-process-selector'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('ox-editor-process-selector')\nexport class ProcessSelector extends LitElement {\n  static get styles() {\n    return [\n      css`\n        :host {\n          position: relative;\n          display: inline-block;\n        }\n\n        input[type='text'] {\n          box-sizing: border-box;\n          width: 100%;\n          height: 100%;\n          border: 1px solid rgba(0, 0, 0, 0.2);\n        }\n\n        mwc-icon {\n          position: absolute;\n          top: 0;\n          right: 0;\n        }\n      `\n    ]\n  }\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) properties?: any\n\n  private popup: any\n\n  render() {\n    return html`\n      <input id=\"text\" type=\"text\" .value=${this.value || ''} @change=${(e: Event) => this._onInputChanged(e)} />\n\n      <mwc-icon @click=${(e: MouseEvent) => this.openSelector()}>dashboard</mwc-icon>\n    `\n  }\n\n  _onInputChanged(e: Event) {\n    this.value = (e.target as any)?.value\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    /*\n     * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n     * 주의. value는 object일 수도 있고, string일 수도 있다.\n     * string인 경우에는 해당 보드의 id로 해석한다.\n     */\n    var value = this.value || {}\n\n    var template = html`\n      <ox-process-selector\n        .creatable=${true}\n        .value=${value}\n        @process-selected=${async (e: CustomEvent) => {\n          var process = e.detail.process\n          this.value = process.id\n\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n          this.popup && this.popup.close()\n        }}\n      ></ox-process-selector>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.select process')\n    })\n  }\n}\n"]}

package/dist/src/ox-process-selector.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@material/mwc-icon';
+import './selector/process-selector';
+import { LitElement } from 'lit';
+export declare class ProcessSelector extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+    value?: string;
+    properties?: any;
+    private popup;
+    render(): import("lit-html").TemplateResult<1>;
+    _onInputChanged(e: Event): void;
+    openSelector(): void;
+}

package/dist/src/ox-process-selector.js

@@ -0,0 +1,86 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import './selector/process-selector';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
+let ProcessSelector = class ProcessSelector extends LitElement {
+    static get styles() {
+        return [
+            css `
+        :host {
+          position: relative;
+          display: inline-block;
+        }
+
+        input[type='text'] {
+          box-sizing: border-box;
+          width: 100%;
+          height: 100%;
+          border: 1px solid rgba(0, 0, 0, 0.2);
+        }
+
+        mwc-icon {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      `
+        ];
+    }
+    render() {
+        return html `
+      <input id="text" type="text" .value=${this.value || ''} @change=${(e) => this._onInputChanged(e)} />
+
+      <mwc-icon @click=${(e) => this.openSelector()}>dashboard</mwc-icon>
+    `;
+    }
+    _onInputChanged(e) {
+        var _a;
+        this.value = (_a = e.target) === null || _a === void 0 ? void 0 : _a.value;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+    openSelector() {
+        if (this.popup) {
+            delete this.popup;
+        }
+        /*
+         * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+         * 주의. value는 object일 수도 있고, string일 수도 있다.
+         * string인 경우에는 해당 보드의 id로 해석한다.
+         */
+        var value = this.value || {};
+        var template = html `
+      <process-selector
+        .creatable=${true}
+        .value=${value}
+        @process-selected=${async (e) => {
+            var process = e.detail.process;
+            this.value = process.id;
+            this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+            this.popup && this.popup.close();
+        }}
+      ></process-selector>
+    `;
+        this.popup = openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('title.select process')
+        });
+    }
+};
+__decorate([
+    property({ type: String })
+], ProcessSelector.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], ProcessSelector.prototype, "properties", void 0);
+ProcessSelector = __decorate([
+    customElement('ox-process-selector')
+], ProcessSelector);
+export { ProcessSelector };
+//# sourceMappingURL=ox-process-selector.js.map

package/dist/src/ox-process-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-process-selector.js","sourceRoot":"","sources":["../../src/ox-process-selector.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,6BAA6B,CAAA;AAEpC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGpC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAC7C,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;OAkBF;SACF,CAAA;IACH,CAAC;IAOD,MAAM;QACJ,OAAO,IAAI,CAAA;4CAC6B,IAAI,CAAC,KAAK,IAAI,EAAE,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;;yBAEpF,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;KAC1D,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAQ;;QACtB,IAAI,CAAC,KAAK,GAAG,MAAC,CAAC,CAAC,MAAc,0CAAE,KAAK,CAAA;QACrC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAA;SAClB;QAED;;;;WAIG;QACH,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE5B,IAAI,QAAQ,GAAG,IAAI,CAAA;;qBAEF,IAAI;iBACR,KAAK;4BACM,KAAK,EAAE,CAAc,EAAE,EAAE;YAC3C,IAAI,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAA;YAC9B,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,EAAE,CAAA;YAEvB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;YAEhF,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;SACzC,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AAnD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAiB;AA1BjC,eAAe;IAD3B,aAAa,CAAC,qBAAqB,CAAC;GACxB,eAAe,CA4E3B;SA5EY,eAAe","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport './selector/process-selector'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('ox-process-selector')\nexport class ProcessSelector extends LitElement {\n  static get styles() {\n    return [\n      css`\n        :host {\n          position: relative;\n          display: inline-block;\n        }\n\n        input[type='text'] {\n          box-sizing: border-box;\n          width: 100%;\n          height: 100%;\n          border: 1px solid rgba(0, 0, 0, 0.2);\n        }\n\n        mwc-icon {\n          position: absolute;\n          top: 0;\n          right: 0;\n        }\n      `\n    ]\n  }\n\n  @property({ type: String }) value?: string\n  @property({ type: Object }) properties?: any\n\n  private popup: any\n\n  render() {\n    return html`\n      <input id=\"text\" type=\"text\" .value=${this.value || ''} @change=${(e: Event) => this._onInputChanged(e)} />\n\n      <mwc-icon @click=${(e: MouseEvent) => this.openSelector()}>dashboard</mwc-icon>\n    `\n  }\n\n  _onInputChanged(e: Event) {\n    this.value = (e.target as any)?.value\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  openSelector() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    /*\n     * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n     * 주의. value는 object일 수도 있고, string일 수도 있다.\n     * string인 경우에는 해당 보드의 id로 해석한다.\n     */\n    var value = this.value || {}\n\n    var template = html`\n      <process-selector\n        .creatable=${true}\n        .value=${value}\n        @process-selected=${async (e: CustomEvent) => {\n          var process = e.detail.process\n          this.value = process.id\n\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n          this.popup && this.popup.close()\n        }}\n      ></process-selector>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.select process')\n    })\n  }\n}\n"]}

package/dist/src/ox-property-editor-process-selector.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import './ox-editor-process-selector';

package/dist/src/ox-property-editor-process-selector.js

@@ -0,0 +1,22 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import './ox-editor-process-selector';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+let PropertyEditorProcessSelector = class PropertyEditorProcessSelector extends OxPropertyEditor {
+    static get styles() {
+        return [...OxPropertyEditor.styles];
+    }
+    editorTemplate(value, spec) {
+        return html `
+      <ox-editor-process-selector id="editor" .value=${value} .properties=${spec.property}></ox-editor-process-selector>
+    `;
+    }
+};
+PropertyEditorProcessSelector = __decorate([
+    customElement('ox-property-editor-process-selector')
+], PropertyEditorProcessSelector);
+//# sourceMappingURL=ox-property-editor-process-selector.js.map

package/dist/src/ox-property-editor-process-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-property-editor-process-selector.js","sourceRoot":"","sources":["../../src/ox-property-editor-process-selector.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAGzE,IAAM,6BAA6B,GAAnC,MAAM,6BAA8B,SAAQ,gBAAgB;IAC1D,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC;IAED,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA;uDACwC,KAAK,gBAAgB,IAAI,CAAC,QAAQ;KACpF,CAAA;IACH,CAAC;CACF,CAAA;AAVK,6BAA6B;IADlC,aAAa,CAAC,qCAAqC,CAAC;GAC/C,6BAA6B,CAUlC","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-editor-process-selector'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n@customElement('ox-property-editor-process-selector')\nclass PropertyEditorProcessSelector extends OxPropertyEditor {\n  static get styles() {\n    return [...OxPropertyEditor.styles]\n  }\n\n  editorTemplate(value: any, spec: PropertySpec) {\n    return html`\n      <ox-editor-process-selector id=\"editor\" .value=${value} .properties=${spec.property}></ox-editor-process-selector>\n    `\n  }\n}\n"]}

package/dist/src/selector/ox-process-creation-card.d.ts

@@ -0,0 +1,14 @@
+import '@material/mwc-icon';
+import './process-creation-popup';
+import { LitElement } from 'lit';
+declare const ProcessCreationCard_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class ProcessCreationCard extends ProcessCreationCard_base {
+    static get styles(): import("lit").CSSResult[];
+    defaultGroup?: string;
+    groups: any;
+    private popup;
+    render(): import("lit-html").TemplateResult<1>;
+    onClick(): void;
+    reset(): void;
+}
+export {};

package/dist/src/selector/ox-process-creation-card.js

@@ -0,0 +1,87 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import './process-creation-popup';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { openPopup } from '@operato/layout';
+let ProcessCreationCard = class ProcessCreationCard extends localize(i18next)(LitElement) {
+    static get styles() {
+        return [
+            css `
+        :host {
+          display: flex;
+          border: var(--card-list-create-border);
+          border-radius: var(--card-list-create-border-radius);
+
+          background-color: #fff;
+
+          align-content: center;
+          justify-content: center;
+        }
+
+        div {
+          text-align: center;
+          font-size: 0.8em;
+          color: var(--card-list-create-color);
+          text-transform: capitalize;
+        }
+
+        mwc-icon {
+          display: block;
+          font-size: 3.5em;
+          color: var(--card-list-create-icon-color);
+        }
+      `
+        ];
+    }
+    render() {
+        return html `<div @click=${(e) => this.onClick()}>
+      <mwc-icon>add_circle_outline</mwc-icon>create process
+    </div> `;
+    }
+    onClick() {
+        if (this.popup) {
+            delete this.popup;
+        }
+        /*
+         * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+         * 주의. value는 object일 수도 있고, string일 수도 있다.
+         * string인 경우에는 해당 보드의 id로 해석한다.
+         */
+        var template = html `
+      <process-creation-popup
+        .defaultGroup=${this.defaultGroup}
+        .groups=${this.groups}
+        @create-process=${async (e) => {
+            var { name, description, groupId } = e.detail;
+            this.dispatchEvent(new CustomEvent('create-process', {
+                detail: {
+                    name,
+                    description,
+                    groupId
+                }
+            }));
+            this.popup && this.popup.close();
+        }}
+      ></process-creation-popup>
+    `;
+        this.popup = openPopup(template, {
+            backdrop: true,
+            size: 'large',
+            title: i18next.t('title.create-process')
+        });
+    }
+    reset() { }
+};
+__decorate([
+    property({ type: String })
+], ProcessCreationCard.prototype, "defaultGroup", void 0);
+__decorate([
+    property({ type: Array })
+], ProcessCreationCard.prototype, "groups", void 0);
+ProcessCreationCard = __decorate([
+    customElement('ox-process-creation-card')
+], ProcessCreationCard);
+export { ProcessCreationCard };
+//# sourceMappingURL=ox-process-creation-card.js.map

package/dist/src/selector/ox-process-creation-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-process-creation-card.js","sourceRoot":"","sources":["../../../src/selector/ox-process-creation-card.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGpC,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IACpE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;OAwBF;SACF,CAAA;IACH,CAAC;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;;YAE9C,CAAA;IACV,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAA;SAClB;QAED;;;;WAIG;QACH,IAAI,QAAQ,GAAG,IAAI,CAAA;;wBAEC,IAAI,CAAC,YAAY;kBACvB,IAAI,CAAC,MAAM;0BACH,KAAK,EAAE,CAAc,EAAE,EAAE;YACzC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;YAE7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;gBAChC,MAAM,EAAE;oBACN,IAAI;oBACJ,WAAW;oBACX,OAAO;iBACR;aACF,CAAC,CACH,CAAA;YAED,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;SACzC,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,KAAI,CAAC;CACX,CAAA;AAnD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;mDAAY;AAjC3B,mBAAmB;IAD/B,aAAa,CAAC,0BAA0B,CAAC;GAC7B,mBAAmB,CAmF/B;SAnFY,mBAAmB","sourcesContent":["import '@material/mwc-icon'\nimport './process-creation-popup'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('ox-process-creation-card')\nexport class ProcessCreationCard extends localize(i18next)(LitElement) {\n  static get styles() {\n    return [\n      css`\n        :host {\n          display: flex;\n          border: var(--card-list-create-border);\n          border-radius: var(--card-list-create-border-radius);\n\n          background-color: #fff;\n\n          align-content: center;\n          justify-content: center;\n        }\n\n        div {\n          text-align: center;\n          font-size: 0.8em;\n          color: var(--card-list-create-color);\n          text-transform: capitalize;\n        }\n\n        mwc-icon {\n          display: block;\n          font-size: 3.5em;\n          color: var(--card-list-create-icon-color);\n        }\n      `\n    ]\n  }\n\n  /* default group id */\n  @property({ type: String }) defaultGroup?: string\n  @property({ type: Array }) groups: any\n\n  private popup: any\n\n  render() {\n    return html`<div @click=${(e: Event) => this.onClick()}>\n      <mwc-icon>add_circle_outline</mwc-icon>create process\n    </div> `\n  }\n\n  onClick() {\n    if (this.popup) {\n      delete this.popup\n    }\n\n    /*\n     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n     * 주의. value는 object일 수도 있고, string일 수도 있다.\n     * string인 경우에는 해당 보드의 id로 해석한다.\n     */\n    var template = html`\n      <process-creation-popup\n        .defaultGroup=${this.defaultGroup}\n        .groups=${this.groups}\n        @create-process=${async (e: CustomEvent) => {\n          var { name, description, groupId } = e.detail\n\n          this.dispatchEvent(\n            new CustomEvent('create-process', {\n              detail: {\n                name,\n                description,\n                groupId\n              }\n            })\n          )\n\n          this.popup && this.popup.close()\n        }}\n      ></process-creation-popup>\n    `\n\n    this.popup = openPopup(template, {\n      backdrop: true,\n      size: 'large',\n      title: i18next.t('title.create-process')\n    })\n  }\n\n  reset() {}\n}\n"]}

package/dist/src/selector/ox-process-selector.d.ts

@@ -0,0 +1,44 @@
+import './ox-process-creation-card';
+import { LitElement, PropertyValues } from 'lit';
+declare const ProcessSelector_base: (new (...args: any[]) => {
+    _infiniteScrollOptions: {
+        threshold: number;
+        limit: number;
+        totalProp: string;
+        pageProp: string;
+    };
+    onScroll: import("lodash").DebouncedFunc<(e: any) => void>;
+    readonly scrollTargetEl: HTMLElement | null;
+    scrollAction(): Promise<void>;
+}) & (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class ProcessSelector extends ProcessSelector_base {
+    static get styles(): import("lit").CSSResult[];
+    groups: {
+        id: string;
+        name: string;
+        description: string;
+    }[];
+    processes: any[];
+    group?: string;
+    creatable: boolean;
+    value?: string;
+    private _page;
+    private _total;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    get scrollTargetEl(): HTMLElement | null;
+    scrollAction(): Promise<void>;
+    firstUpdated(): void;
+    updated(changed: PropertyValues<this>): Promise<void>;
+    onClickSelect(process: any): void;
+    onCreateProcess(e: CustomEvent): Promise<void>;
+    refreshGroups(): Promise<void>;
+    refreshProcesses(): Promise<void>;
+    appendProcesses(): Promise<void>;
+    getProcesses({ page, limit }?: {
+        page?: number | undefined;
+        limit?: number | undefined;
+    }): Promise<any>;
+    createProcess(name: string, description: string, groupId: string): Promise<any>;
+}
+export {};