@operato/process 10.2.0 → 10.3.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.3.0](https://github.com/heartyoh/ioperato/compare/v10.2.1...v10.3.0) (2026-08-06)
+
+**Note:** Version bump only for package @operato/process
+
+
+
+
+
+### [10.2.1](https://github.com/heartyoh/ioperato/compare/v10.2.0...v10.2.1) (2026-07-31)
+
+
+### :bug: Bug Fix
+
+* **ui:** 다크에서 밝게 뜨던 면들 정리 — 팝업·모델러 툴바·네이티브 인풋 ([a81265a](https://github.com/heartyoh/ioperato/commit/a81265a2a2a6a6bf2dc86240877cc32610ec1fc6))
+
+
+
 ## [10.2.0](https://github.com/heartyoh/ioperato/compare/v10.1.0...v10.2.0) (2026-07-30)
 
 **Note:** Version bump only for package @operato/process

package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js

@@ -350,6 +350,8 @@ DataBindingMapper.styles = [
       }
       input,
       select {
+        background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
+        color: var(--input-field-color, var(--md-sys-color-on-surface));
         border: var(--property-sidebar-fieldset-border);
       }
 

package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-binding-mapper.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding-mapper.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/input/ox-input-code.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-help-icon.js'\nimport '@operato/input/ox-input-value-map.js'\nimport '@operato/input/ox-input-value-ranges.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nexport type Rule =\n  | {\n      map?: Properties\n      range?: Properties[]\n      eval?: string\n    }\n  | any\n\nexport type Mapping = {\n  source?: string\n  rule: 'map' | 'range' | 'eval' | 'value'\n  accessor?: string\n  target?: string\n  property?: string\n  param?: Rule\n  ndnsp?: boolean\n  partial?: boolean\n}\n\n/**\nelement for mapping data value editing\n\nExample:\n\n  <data-binding-mapper mapping=${mapping}>\n  </data-binding-mapper>\n*/\n\nexport class DataBindingMapper extends LitElement {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n        overflow: hidden;\n        padding: 7px 0 0 0;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-width: 0 1px 1px 1px;\n        padding: 4px;\n        line-height: 2;\n\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 4px;\n        grid-auto-rows: minmax(24px, auto);\n\n        align-items: center;\n      }\n\n      :host > * {\n        align-self: stretch;\n      }\n\n      label {\n        grid-column: span 3;\n        text-align: right;\n        text-transform: capitalize;\n      }\n\n      input,\n      select,\n      ox-buttons-radio,\n      [mapping-rule] {\n        grid-column: span 7;\n      }\n      input,\n      select {\n        border: var(--property-sidebar-fieldset-border);\n      }\n\n      ox-buttons-radio {\n        display: flex;\n        padding: 0 4px;\n      }\n\n      ox-buttons-radio > * {\n        text-align: center;\n        flex: 1;\n        margin: 2px;\n        border-bottom: 2px solid #fff;\n      }\n\n      ox-buttons-radio div[active] {\n        border-color: #f2471c;\n      }\n\n      [mapping-rule] {\n        display: flex;\n      }\n\n      [mapping-rule] * {\n        flex: auto;\n        margin: 0;\n        text-align: left;\n        align-self: center;\n      }\n\n      [rule-editors] {\n        grid-column: span 10;\n\n        display: 'flex';\n        align-content: auto;\n      }\n\n      [rule-editors] :not([active]) {\n        display: none;\n      }\n\n      ox-input-code {\n        height: 300px;\n        overflow: auto;\n      }\n\n      /* checkbox-row */\n      .checkbox-row {\n        grid-column: span 10;\n\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n        align-items: center;\n      }\n\n      .checkbox-row > input {\n        grid-column: 4 / 5;\n      }\n\n      .checkbox-row > label {\n        grid-column: span 6;\n        text-align: left;\n      }\n    `\n  ]\n\n  @property({ type: Object }) mapping: Mapping = {\n    rule: 'value'\n  }\n  @property({ type: Object }) rule: Rule = {}\n  @property({ type: Array }) properties: Properties[] = []\n  @property({ type: Object }) scene?: Scene\n\n  @state() _valueTypes: any = {\n    play: 'boolean',\n    hidden: 'boolean',\n    started: 'boolean',\n\n    rotation: 'number',\n    value: 'number',\n\n    fillStyle: 'color',\n    strokeStyle: 'color',\n    fontColor: 'color',\n\n    data: 'object',\n    source: 'attachment',\n    location: 'object',\n    dimension: 'object',\n\n    text: 'string',\n    ref: 'string'\n  }\n  @state() _componentIds: { value: string; description: string }[] = []\n\n  @query('#eval-editor') editor!: HTMLInputElement\n  @query('#source-input') source!: HTMLInputElement\n  @query('#target-input') target!: HTMLInputElement\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => this._onChange(e))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('mapping') && this._onChangedMapping()\n  }\n\n  findComponentIds() {\n    this._componentIds =\n      (this.scene &&\n        this.scene.ids.map((i: any) => {\n          const id = i.key\n          return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n        })) ||\n      []\n  }\n\n  render() {\n    const mapping = this.mapping || {\n      rule: 'value'\n    }\n\n    return html`\n      <label for=\"source-input\"> <ox-i18n msgid=\"label.source\">source</ox-i18n> </label>\n      <input\n        id=\"source-input\"\n        type=\"text\"\n        value-key=\"source\"\n        list=\"source-list\"\n        .value=${mapping.source || ''}\n        @focusin=${() => this.findComponentIds()}\n      />\n\n      <label for=\"accessor-input\">\n        <ox-i18n msgid=\"label.accessor\">accessor</ox-i18n><ox-help-icon topic=\"board-modeller/accessor\"></ox-help-icon>\n      </label>\n      <input\n        id=\"accessor-input\"\n        value-key=\"accessor\"\n        type=\"text\"\n        data-mapping-accessor\n        .value=${mapping.accessor || ''}\n      />\n\n      <label for=\"target-input\"> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n      <input\n        id=\"target-input\"\n        type=\"text\"\n        value-key=\"target\"\n        list=\"target-list\"\n        .value=${mapping.target || ''}\n        @focusin=${() => this.findComponentIds()}\n      />\n\n      <datalist id=\"source-list\">\n        <option value=\"\">(self)</option>\n        ${this._componentIds.length\n          ? html`\n              ${this._componentIds.map(\n                ({ value, description }) => html` <option value=${value}>${description}</option> `\n              )}\n            `\n          : html``}\n      </datalist>\n\n      <datalist id=\"target-list\">\n        <option value=\"(self)\"></option>\n        <option value=\"(children)\"></option>\n        <option value=\"(key)\"></option>\n        <option value=\"[propkey]\"></option>\n        ${this._componentIds.length\n          ? html`\n              ${this._componentIds.map(\n                ({ value, description }) => html` <option value=${value}>${description}</option> `\n              )}\n            `\n          : html``}\n      </datalist>\n\n      <label for=\"property-input\">\n        <ox-i18n msgid=\"label.property\">property</ox-i18n\n        ><ox-help-icon topic=\"board-modeller/data-binding-property\"></ox-help-icon>\n      </label>\n      <input\n        id=\"property-input\"\n        type=\"text\"\n        value-key=\"property\"\n        list=\"property-list\"\n        .value=${mapping.property || ''}\n      />\n\n      <datalist id=\"property-list\">\n        ${this.properties.map(\n          item => html` <option value=${item.name}>${item.label}</option> `\n        )}\n      </datalist>\n\n      <label> <ox-i18n msgid=\"label.rule-type\">rule type</ox-i18n> </label>\n      <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>\n        <div data-value=\"value\"><ox-i18n msgid=\"label.value\"></ox-i18n></div>\n        <div data-value=\"map\"><ox-i18n msgid=\"label.map\"></ox-i18n></div>\n        <div data-value=\"range\"><ox-i18n msgid=\"label.range\"></ox-i18n></div>\n        <div data-value=\"eval\"><ox-i18n msgid=\"label.eval\"></ox-i18n></div>\n      </ox-buttons-radio>\n\n      <div rule-editors ?hidden=${mapping.rule == 'value'}>\n        <ox-input-value-map\n          value-key=\"map\"\n          .value=${this.rule.map || {}}\n          .valuetype=${this._valuetype(mapping.property!)}\n          ?active=${mapping.rule == 'map'}\n        >\n        </ox-input-value-map>\n\n        <ox-input-value-ranges\n          value-key=\"range\"\n          .value=${this.rule.range || []}\n          .valuetype=${this._valuetype(mapping.property!)}\n          ?active=${mapping.rule == 'range'}\n        >\n        </ox-input-value-ranges>\n\n        <ox-input-code\n          value-key=\"eval\"\n          id=\"eval-editor\"\n          .value=${this.rule.eval || ''}\n          ?active=${mapping.rule == 'eval'}\n          language=\"javascript\"\n        >\n        </ox-input-code>\n      </div>\n\n      <div class=\"checkbox-row\">\n        <input id=\"checkbox-partial\" type=\"checkbox\" value-key=\"partial\" .checked=${mapping.partial === true} />\n        <label for=\"checkbox-partial\"> <ox-i18n msgid=\"label.partial-spreading\">Partial Spreading</ox-i18n> </label>\n      </div>\n\n      <div class=\"checkbox-row\">\n        <input id=\"checkbox-ndnsp\" type=\"checkbox\" value-key=\"ndnsp\" .checked=${mapping.ndnsp === true} />\n        <label for=\"checkbox-ndnsp\"> <ox-i18n msgid=\"label.ndnsp\">No Data No Spreading</ox-i18n> </label>\n      </div>\n    `\n  }\n\n  _valuetype(property: string) {\n    return this._valueTypes[property] || 'string'\n  }\n\n  private _keep_saved_rule_params: boolean = false\n\n  async _onChangedMapping() {\n    if (this._keep_saved_rule_params) {\n      this._keep_saved_rule_params = false\n    } else {\n      await this.updateComplete\n\n      var rule: Rule = {}\n\n      if (this.mapping) {\n        switch (this.mapping.rule) {\n          case 'map':\n            rule.map = this.mapping.param || {}\n            break\n          case 'range':\n            rule.range = this.mapping.param || []\n            break\n          case 'eval':\n            rule.eval = this.mapping.param || ''\n            break\n          default:\n            this.mapping.rule = 'value'\n            break\n        }\n      }\n\n      this.rule = rule\n      this.requestUpdate()\n    }\n  }\n\n  _onChangeRule(e: Event) {\n    var element = e.target as HTMLInputElement\n    var value = element.value\n\n    let param\n\n    switch (value) {\n      case 'map':\n        param = this.rule.map\n        break\n      case 'range':\n        param = this.rule.range\n        break\n      case 'eval':\n        param = this.rule.eval || ''\n\n        // rule.eval에 값이 없을 때, ace-editor 내용이 초기화되지 않는 문제때문에 처리함.\n        if (!param) {\n          this.editor.value = 'return'\n        }\n        break\n      default:\n    }\n\n    this.mapping = {\n      ...this.mapping,\n      rule: value as 'value' | 'map' | 'range' | 'eval',\n      param\n    }\n\n    this._keep_saved_rule_params = true\n    this.dispatchEvent(new CustomEvent('value-change', { bubbles: true, composed: true }))\n  }\n\n  _onChange(e: Event) {\n    var element = e.target as HTMLInputElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) return\n\n    var value: string | boolean = element.value\n\n    if (key === 'source') {\n      if (value.length > 0) {\n        value = value.trim()\n\n        this.source.value = value\n      }\n\n      this.mapping = {\n        ...this.mapping,\n        source: value\n      }\n    } else if (key === 'target') {\n      if (value.length > 0 && !/^[.#(\\[]/.test(value)) {\n        value = '#' + value.trim()\n\n        this.target.value = value\n      }\n\n      this.mapping = {\n        ...this.mapping,\n        target: value\n      }\n    } else if (key === 'accessor') {\n      this.mapping = {\n        ...this.mapping,\n        accessor: (value || '').trim()\n      }\n    } else if (key === 'property') {\n      this.mapping = {\n        ...this.mapping,\n        property: (value || '').trim()\n      }\n    } else if (key === 'map' || key === 'range' || key === 'eval') {\n      this.rule[key] = value\n      this.mapping = {\n        ...this.mapping,\n        param: value\n      }\n    } else if (key === 'ndnsp' /* no data no spreading */) {\n      value = element.checked\n\n      this.mapping = {\n        ...this.mapping,\n        ndnsp: value\n      }\n    } else if (key === 'partial' /* partial spreading */) {\n      value = element.checked\n\n      this.mapping = {\n        ...this.mapping,\n        partial: value\n      }\n    }\n\n    if (!this.mapping.rule) {\n      this.mapping.rule = 'value'\n    }\n\n    this._keep_saved_rule_params = true\n    this.dispatchEvent(\n      new CustomEvent('value-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          changed: {\n            [key]: value\n          }\n        }\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"data-binding-mapper.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding-mapper.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oCAAoC,CAAA;AAC3C,OAAO,iCAAiC,CAAA;AACxC,OAAO,0BAA0B,CAAA;AACjC,OAAO,+BAA+B,CAAA;AACtC,OAAO,sCAAsC,CAAA;AAC7C,OAAO,yCAAyC,CAAA;AAEhD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAuB1D;;;;;;;EAOE;AAEF,MAAM,OAAO,iBAAkB,SAAQ,UAAU;IAAjD;;QA6G8B,YAAO,GAAY;YAC7C,IAAI,EAAE,OAAO;SACd,CAAA;QAC2B,SAAI,GAAS,EAAE,CAAA;QAChB,eAAU,GAAiB,EAAE,CAAA;QAG/C,gBAAW,GAAQ;YAC1B,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE,SAAS;YAElB,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,QAAQ;YAEf,SAAS,EAAE,OAAO;YAClB,WAAW,EAAE,OAAO;YACpB,SAAS,EAAE,OAAO;YAElB,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,YAAY;YACpB,QAAQ,EAAE,QAAQ;YAClB,SAAS,EAAE,QAAQ;YAEnB,IAAI,EAAE,QAAQ;YACd,GAAG,EAAE,QAAQ;SACd,CAAA;QACQ,kBAAa,GAA6C,EAAE,CAAA;QA2J7D,4BAAuB,GAAY,KAAK,CAAA;IAiJlD,CAAC;IAtSC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IACpE,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAA;IACpD,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,aAAa;YAChB,CAAC,IAAI,CAAC,KAAK;gBACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE;;oBAC5B,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAA;oBAChB,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,MAAA,IAAI,CAAC,KAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,0CAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAA;gBAChF,CAAC,CAAC,CAAC;gBACL,EAAE,CAAA;IACN,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI;YAC9B,IAAI,EAAE,OAAO;SACd,CAAA;QAED,OAAO,IAAI,CAAA;;;;;;;iBAOE,OAAO,CAAC,MAAM,IAAI,EAAE;mBAClB,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;;;;;;;;;;;iBAW/B,OAAO,CAAC,QAAQ,IAAI,EAAE;;;;;;;;;iBAStB,OAAO,CAAC,MAAM,IAAI,EAAE;mBAClB,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;;;;;UAKtC,IAAI,CAAC,aAAa,CAAC,MAAM;YACzB,CAAC,CAAC,IAAI,CAAA;gBACA,IAAI,CAAC,aAAa,CAAC,GAAG,CACtB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA,kBAAkB,KAAK,IAAI,WAAW,YAAY,CACnF;aACF;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;;;UAQR,IAAI,CAAC,aAAa,CAAC,MAAM;YACzB,CAAC,CAAC,IAAI,CAAA;gBACA,IAAI,CAAC,aAAa,CAAC,GAAG,CACtB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA,kBAAkB,KAAK,IAAI,WAAW,YAAY,CACnF;aACF;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;;;;;;;iBAYD,OAAO,CAAC,QAAQ,IAAI,EAAE;;;;UAI7B,IAAI,CAAC,UAAU,CAAC,GAAG,CACnB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,YAAY,CAClE;;;;iCAIwB,OAAO,CAAC,IAAI,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;;;;;;;kCAO1D,OAAO,CAAC,IAAI,IAAI,OAAO;;;mBAGtC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE;uBACf,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAS,CAAC;oBACrC,OAAO,CAAC,IAAI,IAAI,KAAK;;;;;;mBAMtB,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;uBACjB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAS,CAAC;oBACrC,OAAO,CAAC,IAAI,IAAI,OAAO;;;;;;;mBAOxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE;oBACnB,OAAO,CAAC,IAAI,IAAI,MAAM;;;;;;;oFAO0C,OAAO,CAAC,OAAO,KAAK,IAAI;;;;;gFAK5B,OAAO,CAAC,KAAK,KAAK,IAAI;;;KAGjG,CAAA;IACH,CAAC;IAED,UAAU,CAAC,QAAgB;QACzB,OAAO,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAA;IAC/C,CAAC;IAID,KAAK,CAAC,iBAAiB;QACrB,IAAI,IAAI,CAAC,uBAAuB,EAAE,CAAC;YACjC,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAA;QACtC,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,CAAC,cAAc,CAAA;YAEzB,IAAI,IAAI,GAAS,EAAE,CAAA;YAEnB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,QAAQ,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;oBAC1B,KAAK,KAAK;wBACR,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAA;wBACnC,MAAK;oBACP,KAAK,OAAO;wBACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAA;wBACrC,MAAK;oBACP,KAAK,MAAM;wBACT,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAA;wBACpC,MAAK;oBACP;wBACE,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAA;wBAC3B,MAAK;gBACT,CAAC;YACH,CAAC;YAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;YAChB,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;IACH,CAAC;IAED,aAAa,CAAC,CAAQ;QACpB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QAEzB,IAAI,KAAK,CAAA;QAET,QAAQ,KAAK,EAAE,CAAC;YACd,KAAK,KAAK;gBACR,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAA;gBACrB,MAAK;YACP,KAAK,OAAO;gBACV,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA;gBACvB,MAAK;YACP,KAAK,MAAM;gBACT,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;gBAE5B,yDAAyD;gBACzD,IAAI,CAAC,KAAK,EAAE,CAAC;oBACX,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAA;gBAC9B,CAAC;gBACD,MAAK;YACP,QAAQ;QACV,CAAC;QAED,IAAI,CAAC,OAAO,GAAG;YACb,GAAG,IAAI,CAAC,OAAO;YACf,IAAI,EAAE,KAA2C;YACjD,KAAK;SACN,CAAA;QAED,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAA;QACnC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IACxF,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG;YAAE,OAAM;QAEhB,IAAI,KAAK,GAAqB,OAAO,CAAC,KAAK,CAAA;QAE3C,IAAI,GAAG,KAAK,QAAQ,EAAE,CAAC;YACrB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACrB,KAAK,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;gBAEpB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;YAC3B,CAAC;YAED,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,MAAM,EAAE,KAAK;aACd,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBAChD,KAAK,GAAG,GAAG,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;gBAE1B,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;YAC3B,CAAC;YAED,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,MAAM,EAAE,KAAK;aACd,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,UAAU,EAAE,CAAC;YAC9B,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE;aAC/B,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,UAAU,EAAE,CAAC;YAC9B,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE;aAC/B,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,KAAK,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,MAAM,EAAE,CAAC;YAC9D,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACtB,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,KAAK,EAAE,KAAK;aACb,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,OAAO,CAAC,0BAA0B,EAAE,CAAC;YACtD,KAAK,GAAG,OAAO,CAAC,OAAO,CAAA;YAEvB,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,KAAK,EAAE,KAAK;aACb,CAAA;QACH,CAAC;aAAM,IAAI,GAAG,KAAK,SAAS,CAAC,uBAAuB,EAAE,CAAC;YACrD,KAAK,GAAG,OAAO,CAAC,OAAO,CAAA;YAEvB,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,OAAO,EAAE,KAAK;aACf,CAAA;QACH,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAA;QAC7B,CAAC;QAED,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAA;QACnC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,OAAO,EAAE;oBACP,CAAC,GAAG,CAAC,EAAE,KAAK;iBACb;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;;AAlbM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwGF;CACF,AA1GY,CA0GZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAE1B;AAC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAgB;AAChB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;qDAA8B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAc;AAEhC;IAAR,KAAK,EAAE;sDAmBP;AACQ;IAAR,KAAK,EAAE;wDAA6D;AAE9C;IAAtB,KAAK,CAAC,cAAc,CAAC;iDAA0B;AACxB;IAAvB,KAAK,CAAC,eAAe,CAAC;iDAA0B;AACzB;IAAvB,KAAK,CAAC,eAAe,CAAC;iDAA0B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/input/ox-input-code.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-help-icon.js'\nimport '@operato/input/ox-input-value-map.js'\nimport '@operato/input/ox-input-value-ranges.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nexport type Rule =\n  | {\n      map?: Properties\n      range?: Properties[]\n      eval?: string\n    }\n  | any\n\nexport type Mapping = {\n  source?: string\n  rule: 'map' | 'range' | 'eval' | 'value'\n  accessor?: string\n  target?: string\n  property?: string\n  param?: Rule\n  ndnsp?: boolean\n  partial?: boolean\n}\n\n/**\nelement for mapping data value editing\n\nExample:\n\n  <data-binding-mapper mapping=${mapping}>\n  </data-binding-mapper>\n*/\n\nexport class DataBindingMapper extends LitElement {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n        overflow: hidden;\n        padding: 7px 0 0 0;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-width: 0 1px 1px 1px;\n        padding: 4px;\n        line-height: 2;\n\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 4px;\n        grid-auto-rows: minmax(24px, auto);\n\n        align-items: center;\n      }\n\n      :host > * {\n        align-self: stretch;\n      }\n\n      label {\n        grid-column: span 3;\n        text-align: right;\n        text-transform: capitalize;\n      }\n\n      input,\n      select,\n      ox-buttons-radio,\n      [mapping-rule] {\n        grid-column: span 7;\n      }\n      input,\n      select {\n        background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n        color: var(--input-field-color, var(--md-sys-color-on-surface));\n        border: var(--property-sidebar-fieldset-border);\n      }\n\n      ox-buttons-radio {\n        display: flex;\n        padding: 0 4px;\n      }\n\n      ox-buttons-radio > * {\n        text-align: center;\n        flex: 1;\n        margin: 2px;\n        border-bottom: 2px solid #fff;\n      }\n\n      ox-buttons-radio div[active] {\n        border-color: #f2471c;\n      }\n\n      [mapping-rule] {\n        display: flex;\n      }\n\n      [mapping-rule] * {\n        flex: auto;\n        margin: 0;\n        text-align: left;\n        align-self: center;\n      }\n\n      [rule-editors] {\n        grid-column: span 10;\n\n        display: 'flex';\n        align-content: auto;\n      }\n\n      [rule-editors] :not([active]) {\n        display: none;\n      }\n\n      ox-input-code {\n        height: 300px;\n        overflow: auto;\n      }\n\n      /* checkbox-row */\n      .checkbox-row {\n        grid-column: span 10;\n\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n        align-items: center;\n      }\n\n      .checkbox-row > input {\n        grid-column: 4 / 5;\n      }\n\n      .checkbox-row > label {\n        grid-column: span 6;\n        text-align: left;\n      }\n    `\n  ]\n\n  @property({ type: Object }) mapping: Mapping = {\n    rule: 'value'\n  }\n  @property({ type: Object }) rule: Rule = {}\n  @property({ type: Array }) properties: Properties[] = []\n  @property({ type: Object }) scene?: Scene\n\n  @state() _valueTypes: any = {\n    play: 'boolean',\n    hidden: 'boolean',\n    started: 'boolean',\n\n    rotation: 'number',\n    value: 'number',\n\n    fillStyle: 'color',\n    strokeStyle: 'color',\n    fontColor: 'color',\n\n    data: 'object',\n    source: 'attachment',\n    location: 'object',\n    dimension: 'object',\n\n    text: 'string',\n    ref: 'string'\n  }\n  @state() _componentIds: { value: string; description: string }[] = []\n\n  @query('#eval-editor') editor!: HTMLInputElement\n  @query('#source-input') source!: HTMLInputElement\n  @query('#target-input') target!: HTMLInputElement\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', e => this._onChange(e))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('mapping') && this._onChangedMapping()\n  }\n\n  findComponentIds() {\n    this._componentIds =\n      (this.scene &&\n        this.scene.ids.map((i: any) => {\n          const id = i.key\n          return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n        })) ||\n      []\n  }\n\n  render() {\n    const mapping = this.mapping || {\n      rule: 'value'\n    }\n\n    return html`\n      <label for=\"source-input\"> <ox-i18n msgid=\"label.source\">source</ox-i18n> </label>\n      <input\n        id=\"source-input\"\n        type=\"text\"\n        value-key=\"source\"\n        list=\"source-list\"\n        .value=${mapping.source || ''}\n        @focusin=${() => this.findComponentIds()}\n      />\n\n      <label for=\"accessor-input\">\n        <ox-i18n msgid=\"label.accessor\">accessor</ox-i18n><ox-help-icon topic=\"board-modeller/accessor\"></ox-help-icon>\n      </label>\n      <input\n        id=\"accessor-input\"\n        value-key=\"accessor\"\n        type=\"text\"\n        data-mapping-accessor\n        .value=${mapping.accessor || ''}\n      />\n\n      <label for=\"target-input\"> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n      <input\n        id=\"target-input\"\n        type=\"text\"\n        value-key=\"target\"\n        list=\"target-list\"\n        .value=${mapping.target || ''}\n        @focusin=${() => this.findComponentIds()}\n      />\n\n      <datalist id=\"source-list\">\n        <option value=\"\">(self)</option>\n        ${this._componentIds.length\n          ? html`\n              ${this._componentIds.map(\n                ({ value, description }) => html` <option value=${value}>${description}</option> `\n              )}\n            `\n          : html``}\n      </datalist>\n\n      <datalist id=\"target-list\">\n        <option value=\"(self)\"></option>\n        <option value=\"(children)\"></option>\n        <option value=\"(key)\"></option>\n        <option value=\"[propkey]\"></option>\n        ${this._componentIds.length\n          ? html`\n              ${this._componentIds.map(\n                ({ value, description }) => html` <option value=${value}>${description}</option> `\n              )}\n            `\n          : html``}\n      </datalist>\n\n      <label for=\"property-input\">\n        <ox-i18n msgid=\"label.property\">property</ox-i18n\n        ><ox-help-icon topic=\"board-modeller/data-binding-property\"></ox-help-icon>\n      </label>\n      <input\n        id=\"property-input\"\n        type=\"text\"\n        value-key=\"property\"\n        list=\"property-list\"\n        .value=${mapping.property || ''}\n      />\n\n      <datalist id=\"property-list\">\n        ${this.properties.map(\n          item => html` <option value=${item.name}>${item.label}</option> `\n        )}\n      </datalist>\n\n      <label> <ox-i18n msgid=\"label.rule-type\">rule type</ox-i18n> </label>\n      <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>\n        <div data-value=\"value\"><ox-i18n msgid=\"label.value\"></ox-i18n></div>\n        <div data-value=\"map\"><ox-i18n msgid=\"label.map\"></ox-i18n></div>\n        <div data-value=\"range\"><ox-i18n msgid=\"label.range\"></ox-i18n></div>\n        <div data-value=\"eval\"><ox-i18n msgid=\"label.eval\"></ox-i18n></div>\n      </ox-buttons-radio>\n\n      <div rule-editors ?hidden=${mapping.rule == 'value'}>\n        <ox-input-value-map\n          value-key=\"map\"\n          .value=${this.rule.map || {}}\n          .valuetype=${this._valuetype(mapping.property!)}\n          ?active=${mapping.rule == 'map'}\n        >\n        </ox-input-value-map>\n\n        <ox-input-value-ranges\n          value-key=\"range\"\n          .value=${this.rule.range || []}\n          .valuetype=${this._valuetype(mapping.property!)}\n          ?active=${mapping.rule == 'range'}\n        >\n        </ox-input-value-ranges>\n\n        <ox-input-code\n          value-key=\"eval\"\n          id=\"eval-editor\"\n          .value=${this.rule.eval || ''}\n          ?active=${mapping.rule == 'eval'}\n          language=\"javascript\"\n        >\n        </ox-input-code>\n      </div>\n\n      <div class=\"checkbox-row\">\n        <input id=\"checkbox-partial\" type=\"checkbox\" value-key=\"partial\" .checked=${mapping.partial === true} />\n        <label for=\"checkbox-partial\"> <ox-i18n msgid=\"label.partial-spreading\">Partial Spreading</ox-i18n> </label>\n      </div>\n\n      <div class=\"checkbox-row\">\n        <input id=\"checkbox-ndnsp\" type=\"checkbox\" value-key=\"ndnsp\" .checked=${mapping.ndnsp === true} />\n        <label for=\"checkbox-ndnsp\"> <ox-i18n msgid=\"label.ndnsp\">No Data No Spreading</ox-i18n> </label>\n      </div>\n    `\n  }\n\n  _valuetype(property: string) {\n    return this._valueTypes[property] || 'string'\n  }\n\n  private _keep_saved_rule_params: boolean = false\n\n  async _onChangedMapping() {\n    if (this._keep_saved_rule_params) {\n      this._keep_saved_rule_params = false\n    } else {\n      await this.updateComplete\n\n      var rule: Rule = {}\n\n      if (this.mapping) {\n        switch (this.mapping.rule) {\n          case 'map':\n            rule.map = this.mapping.param || {}\n            break\n          case 'range':\n            rule.range = this.mapping.param || []\n            break\n          case 'eval':\n            rule.eval = this.mapping.param || ''\n            break\n          default:\n            this.mapping.rule = 'value'\n            break\n        }\n      }\n\n      this.rule = rule\n      this.requestUpdate()\n    }\n  }\n\n  _onChangeRule(e: Event) {\n    var element = e.target as HTMLInputElement\n    var value = element.value\n\n    let param\n\n    switch (value) {\n      case 'map':\n        param = this.rule.map\n        break\n      case 'range':\n        param = this.rule.range\n        break\n      case 'eval':\n        param = this.rule.eval || ''\n\n        // rule.eval에 값이 없을 때, ace-editor 내용이 초기화되지 않는 문제때문에 처리함.\n        if (!param) {\n          this.editor.value = 'return'\n        }\n        break\n      default:\n    }\n\n    this.mapping = {\n      ...this.mapping,\n      rule: value as 'value' | 'map' | 'range' | 'eval',\n      param\n    }\n\n    this._keep_saved_rule_params = true\n    this.dispatchEvent(new CustomEvent('value-change', { bubbles: true, composed: true }))\n  }\n\n  _onChange(e: Event) {\n    var element = e.target as HTMLInputElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) return\n\n    var value: string | boolean = element.value\n\n    if (key === 'source') {\n      if (value.length > 0) {\n        value = value.trim()\n\n        this.source.value = value\n      }\n\n      this.mapping = {\n        ...this.mapping,\n        source: value\n      }\n    } else if (key === 'target') {\n      if (value.length > 0 && !/^[.#(\\[]/.test(value)) {\n        value = '#' + value.trim()\n\n        this.target.value = value\n      }\n\n      this.mapping = {\n        ...this.mapping,\n        target: value\n      }\n    } else if (key === 'accessor') {\n      this.mapping = {\n        ...this.mapping,\n        accessor: (value || '').trim()\n      }\n    } else if (key === 'property') {\n      this.mapping = {\n        ...this.mapping,\n        property: (value || '').trim()\n      }\n    } else if (key === 'map' || key === 'range' || key === 'eval') {\n      this.rule[key] = value\n      this.mapping = {\n        ...this.mapping,\n        param: value\n      }\n    } else if (key === 'ndnsp' /* no data no spreading */) {\n      value = element.checked\n\n      this.mapping = {\n        ...this.mapping,\n        ndnsp: value\n      }\n    } else if (key === 'partial' /* partial spreading */) {\n      value = element.checked\n\n      this.mapping = {\n        ...this.mapping,\n        partial: value\n      }\n    }\n\n    if (!this.mapping.rule) {\n      this.mapping.rule = 'value'\n    }\n\n    this._keep_saved_rule_params = true\n    this.dispatchEvent(\n      new CustomEvent('value-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          changed: {\n            [key]: value\n          }\n        }\n      })\n    )\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/property-shared-style.js

@@ -21,6 +21,8 @@ export const PropertySharedStyle = css `
 
   select,
   input {
+    background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
+    color: var(--input-field-color, var(--md-sys-color-on-surface));
     border: var(--property-sidebar-fieldset-border);
   }
 

package/dist/src/modeller/property-sidebar/property-shared-style.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-shared-style.js","sourceRoot":"","sources":["../../../../src/modeller/property-sidebar/property-shared-style.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiIrC,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css } from 'lit'\n\nexport const PropertySharedStyle = css`\n  fieldset {\n    border: none;\n    margin: 4px;\n    padding: 9px 4px 9px 4px;\n    border-bottom: var(--property-sidebar-fieldset-border);\n    color: var(--property-sidebar-fieldset-legend-color, var(--md-sys-color-on-secondary-container));\n    font: var(--property-sidebar-fieldset-label);\n  }\n\n  fieldset legend {\n    padding: 5px 0 0 5px;\n    color: var(--property-sidebar-fieldset-legend-color, var(--md-sys-color-on-secondary-container));\n    font: var(--property-sidebar-fieldset-legend);\n    text-transform: capitalize;\n  }\n\n  select,\n  input {\n    border: var(--property-sidebar-fieldset-border);\n  }\n\n  ox-input-data {\n    height: 300px;\n  }\n\n  /* property grid */\n  .property-grid {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n    align-items: center;\n  }\n\n  .property-grid > * {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .property-grid > label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n    line-height: 2;\n  }\n\n  .property-grid > input,\n  .property-grid > table,\n  .property-grid > select,\n  .property-grid > ox-input-angle,\n  .property-grid > ox-buttons-radio,\n  .property-grid > ox-input-color,\n  [custom-editor] {\n    grid-column: span 7;\n    align-self: stretch;\n  }\n\n  .property-grid > .checkbox-row {\n    grid-column: span 10;\n  }\n\n  .property-grid > .property-full-label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n  }\n\n  .property-grid > .half-label {\n    grid-column: span 1;\n  }\n\n  .property-grid > .property-full-input {\n    grid-column: span 7;\n  }\n\n  .property-grid > .half-editor {\n    grid-column: span 4;\n  }\n\n  /* checkbox-row */\n  .checkbox-row {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n    align-items: center;\n  }\n\n  .checkbox-row > input {\n    grid-column: 4 / 5;\n  }\n\n  .checkbox-row > label {\n    grid-column: span 6;\n    text-align: left;\n  }\n\n  /* image resources */\n  .icon-only-label {\n    grid-column: span 1;\n\n    background: var(--url-icon-properties-label) no-repeat;\n    float: left;\n    margin: 0;\n    align-self: stretch;\n  }\n\n  .icon-only-label.color {\n    background-position: 100% -500px;\n  }\n  .icon-only-label.font-size {\n    background-position: 100% -594px;\n  }\n  .icon-only-label.leading {\n    background-position: 100% -696px;\n  }\n  .icon-only-label.hscale {\n    background-position: 100% -296px;\n  }\n  .icon-only-label.vscale {\n    background-position: 100% -396px;\n  }\n  .icon-only-label.linewidth {\n    background-position: 100% -894px;\n  }\n  .icon-only-label.lineHeight {\n    background-position: 100% -995px;\n  }\n`\n"]}
+{"version":3,"file":"property-shared-style.js","sourceRoot":"","sources":["../../../../src/modeller/property-sidebar/property-shared-style.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIrC,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css } from 'lit'\n\nexport const PropertySharedStyle = css`\n  fieldset {\n    border: none;\n    margin: 4px;\n    padding: 9px 4px 9px 4px;\n    border-bottom: var(--property-sidebar-fieldset-border);\n    color: var(--property-sidebar-fieldset-legend-color, var(--md-sys-color-on-secondary-container));\n    font: var(--property-sidebar-fieldset-label);\n  }\n\n  fieldset legend {\n    padding: 5px 0 0 5px;\n    color: var(--property-sidebar-fieldset-legend-color, var(--md-sys-color-on-secondary-container));\n    font: var(--property-sidebar-fieldset-legend);\n    text-transform: capitalize;\n  }\n\n  select,\n  input {\n    background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n    color: var(--input-field-color, var(--md-sys-color-on-surface));\n    border: var(--property-sidebar-fieldset-border);\n  }\n\n  ox-input-data {\n    height: 300px;\n  }\n\n  /* property grid */\n  .property-grid {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n    align-items: center;\n  }\n\n  .property-grid > * {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .property-grid > label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n    line-height: 2;\n  }\n\n  .property-grid > input,\n  .property-grid > table,\n  .property-grid > select,\n  .property-grid > ox-input-angle,\n  .property-grid > ox-buttons-radio,\n  .property-grid > ox-input-color,\n  [custom-editor] {\n    grid-column: span 7;\n    align-self: stretch;\n  }\n\n  .property-grid > .checkbox-row {\n    grid-column: span 10;\n  }\n\n  .property-grid > .property-full-label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n  }\n\n  .property-grid > .half-label {\n    grid-column: span 1;\n  }\n\n  .property-grid > .property-full-input {\n    grid-column: span 7;\n  }\n\n  .property-grid > .half-editor {\n    grid-column: span 4;\n  }\n\n  /* checkbox-row */\n  .checkbox-row {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n    align-items: center;\n  }\n\n  .checkbox-row > input {\n    grid-column: 4 / 5;\n  }\n\n  .checkbox-row > label {\n    grid-column: span 6;\n    text-align: left;\n  }\n\n  /* image resources */\n  .icon-only-label {\n    grid-column: span 1;\n\n    background: var(--url-icon-properties-label) no-repeat;\n    float: left;\n    margin: 0;\n    align-self: stretch;\n  }\n\n  .icon-only-label.color {\n    background-position: 100% -500px;\n  }\n  .icon-only-label.font-size {\n    background-position: 100% -594px;\n  }\n  .icon-only-label.leading {\n    background-position: 100% -696px;\n  }\n  .icon-only-label.hscale {\n    background-position: 100% -296px;\n  }\n  .icon-only-label.vscale {\n    background-position: 100% -396px;\n  }\n  .icon-only-label.linewidth {\n    background-position: 100% -894px;\n  }\n  .icon-only-label.lineHeight {\n    background-position: 100% -995px;\n  }\n`\n"]}

package/dist/src/ox-process-template-list.js

@@ -231,6 +231,8 @@ OxProcessTemplateList.styles = [
       }
 
       select {
+        background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
+        color: var(--input-field-color, var(--md-sys-color-on-surface));
         border: 0;
         outline: none;
         text-align: right;

package/dist/src/ox-process-template-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-process-template-list.js","sourceRoot":"","sources":["../../src/ox-process-template-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/input/ox-input-file.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { DataGrist, FetchOption, FilterValue, PaginationConfig, SortersConfig } from '@operato/data-grist'\nimport { buildArgs, client } from '@operato/graphql'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\nconst FETCH_PROCESS_TEMPLATE_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    processTemplates(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        visibility\n        thumbnail\n      }\n      total\n    }\n  }\n`\n}\n\nconst FETCH_PROCESS_TEMPLATE_GQL = (id: string) => {\n  return gql`\n  {\n    processTemplate(id: \"${id}\") {\n      id\n      name\n      description\n      visibility\n      model\n      thumbnail\n    }\n  }\n`\n}\n\n@customElement('ox-process-template-list')\nexport class OxProcessTemplateList extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n\n        width: 100%;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      ox-grist {\n        flex: 1;\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      #headroom {\n        align-items: center;\n        padding: var(--padding-default) var(--spacing-large);\n        border-top: 2px solid rgba(0, 0, 0, 0.2);\n        background-color: var(--md-sys-color-surface);\n        box-shadow: var(--box-shadow);\n      }\n\n      #filters {\n        display: flex;\n        flex-direction: row;\n        place-content: space-between;\n        margin: var(--margin-default) 0;\n      }\n\n      select {\n        border: 0;\n        outline: none;\n        text-align: right;\n      }\n\n      @media only screen and (max-width: 460px) {\n        #filters {\n          flex-direction: column;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n\n  @query('ox-grist') grist!: DataGrist\n\n  render() {\n    return html`\n      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n        <div slot=\"headroom\" id=\"headroom\">\n          <div id=\"filters\">\n            <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>\n          </div>\n        </div>\n      </ox-grist>\n    `\n  }\n\n  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {\n    const { items: records, total } = await this.getProcessTemplates({ page, limit, filters, sortings })\n\n    return {\n      total,\n      records\n    }\n  }\n\n  get gristConfig() {\n    const PRIVATE = i18next.t('label.visibility-private')\n    const DOMAIN = i18next.t('label.visibility-domain')\n    const PUBLIC = i18next.t('label.visibility-public')\n\n    const visibilities = window.location.pathname.startsWith('/domain/')\n      ? [\n          { display: PRIVATE, value: 'private' },\n          { display: DOMAIN, value: 'domain' },\n          { display: PUBLIC, value: 'public' }\n        ]\n      : [\n          { display: PRIVATE, value: 'private' },\n          { display: PUBLIC, value: 'public' }\n        ]\n\n    return {\n      list: {\n        thumbnail: 'thumbnail',\n        fields: ['name'],\n        details: ['description']\n      },\n      columns: [\n        {\n          type: 'string',\n          name: 'id',\n          hidden: true\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: 'name',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search',\n          sortable: true\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: 'description',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search'\n        },\n        {\n          type: 'select-buttons',\n          name: 'visibility',\n          header: 'visibility',\n          record: {\n            editable: false\n          },\n          hidden: true,\n          filter: {\n            operator: 'in',\n            options: visibilities,\n            label: ''\n          }\n        },\n        {\n          type: 'image',\n          name: 'thumbnail',\n          hidden: true,\n          record: {\n            editable: false\n          },\n          width: 120\n        }\n      ],\n      rows: {\n        appendable: false,\n        selectable: {\n          multiple: false\n        },\n        handlers: {\n          click: 'select-row-toggle'\n        }\n      },\n      sorters: [\n        {\n          name: 'name',\n          desc: false\n        }\n      ],\n      pagination: {\n        pages: [20, 30, 50, 100, 200]\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.refreshProcessTemplates()\n  }\n\n  async getSelected() {\n    const selected = this.grist.selected\n    const templateId = selected && selected[0]?.id\n\n    if (!templateId) {\n      return\n    }\n\n    var processTemplateResponse = await client.query({\n      query: FETCH_PROCESS_TEMPLATE_GQL(templateId)\n    })\n\n    var template = processTemplateResponse.data?.processTemplate\n\n    if (template) {\n      template = {\n        ...template,\n        model: JSON.parse(template.model)\n      }\n    }\n\n    return template\n  }\n\n  async refreshProcessTemplates() {\n    this.grist.fetch()\n  }\n\n  async getProcessTemplates({\n    page = 1,\n    limit = 30,\n    filters = [],\n    sortings = []\n  }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {\n    var pagination: PaginationConfig = {\n      limit,\n      page\n    }\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n\n    var processTemplateListResponse = await client.query({\n      query: FETCH_PROCESS_TEMPLATE_LIST_GQL(params)\n    })\n\n    return processTemplateListResponse?.data?.processTemplates || {}\n  }\n}\n"]}
+{"version":3,"file":"ox-process-template-list.js","sourceRoot":"","sources":["../../src/ox-process-template-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/input/ox-input-file.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { DataGrist, FetchOption, FilterValue, PaginationConfig, SortersConfig } from '@operato/data-grist'\nimport { buildArgs, client } from '@operato/graphql'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\nconst FETCH_PROCESS_TEMPLATE_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    processTemplates(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        visibility\n        thumbnail\n      }\n      total\n    }\n  }\n`\n}\n\nconst FETCH_PROCESS_TEMPLATE_GQL = (id: string) => {\n  return gql`\n  {\n    processTemplate(id: \"${id}\") {\n      id\n      name\n      description\n      visibility\n      model\n      thumbnail\n    }\n  }\n`\n}\n\n@customElement('ox-process-template-list')\nexport class OxProcessTemplateList extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n\n        width: 100%;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      ox-grist {\n        flex: 1;\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      #headroom {\n        align-items: center;\n        padding: var(--padding-default) var(--spacing-large);\n        border-top: 2px solid rgba(0, 0, 0, 0.2);\n        background-color: var(--md-sys-color-surface);\n        box-shadow: var(--box-shadow);\n      }\n\n      #filters {\n        display: flex;\n        flex-direction: row;\n        place-content: space-between;\n        margin: var(--margin-default) 0;\n      }\n\n      select {\n        background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n        color: var(--input-field-color, var(--md-sys-color-on-surface));\n        border: 0;\n        outline: none;\n        text-align: right;\n      }\n\n      @media only screen and (max-width: 460px) {\n        #filters {\n          flex-direction: column;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n\n  @query('ox-grist') grist!: DataGrist\n\n  render() {\n    return html`\n      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n        <div slot=\"headroom\" id=\"headroom\">\n          <div id=\"filters\">\n            <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>\n          </div>\n        </div>\n      </ox-grist>\n    `\n  }\n\n  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {\n    const { items: records, total } = await this.getProcessTemplates({ page, limit, filters, sortings })\n\n    return {\n      total,\n      records\n    }\n  }\n\n  get gristConfig() {\n    const PRIVATE = i18next.t('label.visibility-private')\n    const DOMAIN = i18next.t('label.visibility-domain')\n    const PUBLIC = i18next.t('label.visibility-public')\n\n    const visibilities = window.location.pathname.startsWith('/domain/')\n      ? [\n          { display: PRIVATE, value: 'private' },\n          { display: DOMAIN, value: 'domain' },\n          { display: PUBLIC, value: 'public' }\n        ]\n      : [\n          { display: PRIVATE, value: 'private' },\n          { display: PUBLIC, value: 'public' }\n        ]\n\n    return {\n      list: {\n        thumbnail: 'thumbnail',\n        fields: ['name'],\n        details: ['description']\n      },\n      columns: [\n        {\n          type: 'string',\n          name: 'id',\n          hidden: true\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: 'name',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search',\n          sortable: true\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: 'description',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search'\n        },\n        {\n          type: 'select-buttons',\n          name: 'visibility',\n          header: 'visibility',\n          record: {\n            editable: false\n          },\n          hidden: true,\n          filter: {\n            operator: 'in',\n            options: visibilities,\n            label: ''\n          }\n        },\n        {\n          type: 'image',\n          name: 'thumbnail',\n          hidden: true,\n          record: {\n            editable: false\n          },\n          width: 120\n        }\n      ],\n      rows: {\n        appendable: false,\n        selectable: {\n          multiple: false\n        },\n        handlers: {\n          click: 'select-row-toggle'\n        }\n      },\n      sorters: [\n        {\n          name: 'name',\n          desc: false\n        }\n      ],\n      pagination: {\n        pages: [20, 30, 50, 100, 200]\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.refreshProcessTemplates()\n  }\n\n  async getSelected() {\n    const selected = this.grist.selected\n    const templateId = selected && selected[0]?.id\n\n    if (!templateId) {\n      return\n    }\n\n    var processTemplateResponse = await client.query({\n      query: FETCH_PROCESS_TEMPLATE_GQL(templateId)\n    })\n\n    var template = processTemplateResponse.data?.processTemplate\n\n    if (template) {\n      template = {\n        ...template,\n        model: JSON.parse(template.model)\n      }\n    }\n\n    return template\n  }\n\n  async refreshProcessTemplates() {\n    this.grist.fetch()\n  }\n\n  async getProcessTemplates({\n    page = 1,\n    limit = 30,\n    filters = [],\n    sortings = []\n  }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {\n    var pagination: PaginationConfig = {\n      limit,\n      page\n    }\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n\n    var processTemplateListResponse = await client.query({\n      query: FETCH_PROCESS_TEMPLATE_LIST_GQL(params)\n    })\n\n    return processTemplateListResponse?.data?.processTemplates || {}\n  }\n}\n"]}

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

@@ -124,6 +124,8 @@ let ProcessSelector = class ProcessSelector extends InfiniteScrollable(localize(
         }
 
         select {
+          background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
+          color: var(--input-field-color, var(--md-sys-color-on-surface));
           text-transform: capitalize;
           float: right;
         }

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

@@ -1 +1 @@
-{"version":3,"file":"ox-process-selector.js","sourceRoot":"","sources":["../../../src/selector/ox-process-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-process-creation-card.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { buildArgs, client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'\n\nconst FETCH_PROCESS_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    processes(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        thumbnail\n      }\n      total\n    }\n  }\n`\n}\n\nconst FETCH_PROCESS_GROUP_LIST_GQL = gql`\n  {\n    processGroups {\n      items {\n        id\n        name\n        description\n      }\n      total\n    }\n  }\n`\n\nconst CREATE_PROCESS_GQL = gql`\n  mutation CreateProcess($process: NewProcess!) {\n    createProcess(process: $process) {\n      id\n      name\n      description\n      model\n      createdAt\n      updatedAt\n    }\n  }\n`\n\n@customElement('ox-process-selector')\nexport class ProcessSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {\n  static get styles() {\n    return [\n      ScrollbarStyles,\n      css`\n        :host {\n          display: grid;\n          grid-template-rows: auto auto 1fr;\n          overflow: hidden;\n          color: var(--popup-content-color);\n          background-color: var(--popup-content-background-color);\n        }\n\n        #main {\n          overflow: auto;\n          padding: var(--popup-content-padding);\n          display: grid;\n          grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n          grid-auto-rows: var(--card-list-rows-height);\n          grid-gap: 20px;\n        }\n\n        .card {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          overflow: hidden;\n          border-radius: var(--card-list-border-radius);\n          background-color: var(--card-list-background-color);\n        }\n\n        .card[selected] {\n          border: red solid;\n        }\n\n        .card.create {\n          overflow: visible;\n        }\n\n        .card:hover {\n          cursor: pointer;\n        }\n\n        .card > .name {\n          background-color: var(--board-renderer-name-background-color);\n          opacity: 0.8;\n          margin-top: -35px;\n          width: 100%;\n          color: #fff;\n          font-weight: bolder;\n          font-size: 13px;\n          text-indent: 7px;\n        }\n\n        .card > .description {\n          background-color: rgba(0, 0, 0, 0.7);\n          width: 100%;\n          min-height: 15px;\n          font-size: 0.6rem;\n          color: #fff;\n          text-indent: 7px;\n        }\n        .card img {\n          max-height: 100%;\n          min-height: 100%;\n        }\n\n        #filter {\n          padding: var(--popup-content-padding);\n          background-color: var(--md-sys-color-surface);\n          box-shadow: var(--box-shadow);\n        }\n\n        #filter * {\n          font-size: 15px;\n        }\n\n        select {\n          text-transform: capitalize;\n          float: right;\n        }\n      `\n    ]\n  }\n\n  @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []\n  @property({ type: Array }) processes: any[] = []\n  @property({ type: String }) group?: string\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: String }) value?: string\n\n  private _page: number = 1\n  private _total: number = 0\n\n  constructor() {\n    super()\n\n    this._infiniteScrollOptions.limit = 20\n  }\n\n  render() {\n    return html`\n      <div id=\"filter\">\n        <select\n          @change=${(e: Event) => {\n            this.group = (e.currentTarget as any)?.value\n            this.requestUpdate()\n          }}\n        >\n          <option value=\"\">${i18next.t('label.all')}</option>\n          ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}\n        </select>\n      </div>\n\n      <div\n        id=\"main\"\n        @scroll=${(e: Event) => {\n          this.onScroll(e)\n        }}\n      >\n        ${this.creatable\n          ? html`\n              <ox-process-creation-card\n                class=\"card create\"\n                .groups=${this.groups}\n                .defaultGroup=${this.group}\n                @create-process=${(e: CustomEvent) => this.onCreateProcess(e)}\n              ></ox-process-creation-card>\n            `\n          : html``}\n        ${this.processes.map(\n          process => html`\n            <div\n              class=\"card\"\n              @click=${(e: Event) => this.onClickSelect(process)}\n              ?selected=${this.value === process.id}\n            >\n              <img src=${process.thumbnail} />\n              <div class=\"name\">${process.name}</div>\n              <div class=\"description\">${process.description}</div>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  get scrollTargetEl(): HTMLElement | null {\n    return this.renderRoot.querySelector('#main') as HTMLElement\n  }\n\n  async scrollAction() {\n    return this.appendProcesses()\n  }\n\n  firstUpdated() {\n    this.refreshGroups()\n  }\n\n  async updated(changed: PropertyValues<this>) {\n    if (changed.has('group')) {\n      this.refreshProcesses()\n    }\n  }\n\n  onClickSelect(process: any) {\n    this.dispatchEvent(\n      new CustomEvent('process-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          process\n        }\n      })\n    )\n  }\n\n  async onCreateProcess(e: CustomEvent) {\n    var { name, description, groupId, model, thumbnail } = e.detail\n\n    await this.createProcess(name, description, groupId, model, thumbnail)\n    this.refreshProcesses()\n  }\n\n  async refreshGroups() {\n    var groupListResponse = await client.query({\n      query: FETCH_PROCESS_GROUP_LIST_GQL,\n      context: gqlContext()\n    })\n\n    if (!groupListResponse || !groupListResponse.data) return\n\n    var groups = groupListResponse.data.processGroups.items\n    this.groups = [...groups]\n\n    this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''\n  }\n\n  async refreshProcesses() {\n    var processes = await this.getProcesses()\n    this.processes = [...processes]\n\n    var creationCard = this.renderRoot.querySelector('ox-process-creation-card')\n    if (creationCard) {\n      ;(creationCard as any).reset()\n    }\n  }\n\n  async appendProcesses() {\n    var processes = await this.getProcesses({ page: this._page + 1 })\n    this.processes = [...this.processes, ...processes]\n  }\n\n  async getProcesses({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {\n    var filters = []\n    var sortings = [] as any[]\n    var pagination = {\n      limit,\n      page\n    }\n\n    if (this.group)\n      filters.push({\n        name: 'groupId',\n        operator: 'eq',\n        value: this.group\n      })\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n    var processListResponse = await client.query({\n      query: FETCH_PROCESS_LIST_GQL(params),\n      context: gqlContext()\n    })\n\n    if (!processListResponse || !processListResponse.data) return []\n    this._total = processListResponse.data.processes.total\n    this._page = page\n\n    return processListResponse.data.processes.items\n  }\n\n  async createProcess(name: string, description: string, groupId: string, modelTemplate: any, thumbnail: string) {\n    var model = JSON.stringify(\n      modelTemplate || {\n        width: 1200,\n        height: 800,\n        fillStyle: 'white'\n      }\n    )\n\n    const response = await client.mutate({\n      mutation: CREATE_PROCESS_GQL,\n      variables: {\n        process: {\n          name,\n          description,\n          groupId,\n          model\n        }\n      },\n      context: gqlContext()\n    })\n\n    return response.data\n  }\n}\n"]}
+{"version":3,"file":"ox-process-selector.js","sourceRoot":"","sources":["../../../src/selector/ox-process-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import './ox-process-creation-card.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { buildArgs, client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'\n\nconst FETCH_PROCESS_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    processes(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        thumbnail\n      }\n      total\n    }\n  }\n`\n}\n\nconst FETCH_PROCESS_GROUP_LIST_GQL = gql`\n  {\n    processGroups {\n      items {\n        id\n        name\n        description\n      }\n      total\n    }\n  }\n`\n\nconst CREATE_PROCESS_GQL = gql`\n  mutation CreateProcess($process: NewProcess!) {\n    createProcess(process: $process) {\n      id\n      name\n      description\n      model\n      createdAt\n      updatedAt\n    }\n  }\n`\n\n@customElement('ox-process-selector')\nexport class ProcessSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {\n  static get styles() {\n    return [\n      ScrollbarStyles,\n      css`\n        :host {\n          display: grid;\n          grid-template-rows: auto auto 1fr;\n          overflow: hidden;\n          color: var(--popup-content-color);\n          background-color: var(--popup-content-background-color);\n        }\n\n        #main {\n          overflow: auto;\n          padding: var(--popup-content-padding);\n          display: grid;\n          grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n          grid-auto-rows: var(--card-list-rows-height);\n          grid-gap: 20px;\n        }\n\n        .card {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          overflow: hidden;\n          border-radius: var(--card-list-border-radius);\n          background-color: var(--card-list-background-color);\n        }\n\n        .card[selected] {\n          border: red solid;\n        }\n\n        .card.create {\n          overflow: visible;\n        }\n\n        .card:hover {\n          cursor: pointer;\n        }\n\n        .card > .name {\n          background-color: var(--board-renderer-name-background-color);\n          opacity: 0.8;\n          margin-top: -35px;\n          width: 100%;\n          color: #fff;\n          font-weight: bolder;\n          font-size: 13px;\n          text-indent: 7px;\n        }\n\n        .card > .description {\n          background-color: rgba(0, 0, 0, 0.7);\n          width: 100%;\n          min-height: 15px;\n          font-size: 0.6rem;\n          color: #fff;\n          text-indent: 7px;\n        }\n        .card img {\n          max-height: 100%;\n          min-height: 100%;\n        }\n\n        #filter {\n          padding: var(--popup-content-padding);\n          background-color: var(--md-sys-color-surface);\n          box-shadow: var(--box-shadow);\n        }\n\n        #filter * {\n          font-size: 15px;\n        }\n\n        select {\n          background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n          color: var(--input-field-color, var(--md-sys-color-on-surface));\n          text-transform: capitalize;\n          float: right;\n        }\n      `\n    ]\n  }\n\n  @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []\n  @property({ type: Array }) processes: any[] = []\n  @property({ type: String }) group?: string\n  @property({ type: Boolean }) creatable: boolean = false\n  @property({ type: String }) value?: string\n\n  private _page: number = 1\n  private _total: number = 0\n\n  constructor() {\n    super()\n\n    this._infiniteScrollOptions.limit = 20\n  }\n\n  render() {\n    return html`\n      <div id=\"filter\">\n        <select\n          @change=${(e: Event) => {\n            this.group = (e.currentTarget as any)?.value\n            this.requestUpdate()\n          }}\n        >\n          <option value=\"\">${i18next.t('label.all')}</option>\n          ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}\n        </select>\n      </div>\n\n      <div\n        id=\"main\"\n        @scroll=${(e: Event) => {\n          this.onScroll(e)\n        }}\n      >\n        ${this.creatable\n          ? html`\n              <ox-process-creation-card\n                class=\"card create\"\n                .groups=${this.groups}\n                .defaultGroup=${this.group}\n                @create-process=${(e: CustomEvent) => this.onCreateProcess(e)}\n              ></ox-process-creation-card>\n            `\n          : html``}\n        ${this.processes.map(\n          process => html`\n            <div\n              class=\"card\"\n              @click=${(e: Event) => this.onClickSelect(process)}\n              ?selected=${this.value === process.id}\n            >\n              <img src=${process.thumbnail} />\n              <div class=\"name\">${process.name}</div>\n              <div class=\"description\">${process.description}</div>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  get scrollTargetEl(): HTMLElement | null {\n    return this.renderRoot.querySelector('#main') as HTMLElement\n  }\n\n  async scrollAction() {\n    return this.appendProcesses()\n  }\n\n  firstUpdated() {\n    this.refreshGroups()\n  }\n\n  async updated(changed: PropertyValues<this>) {\n    if (changed.has('group')) {\n      this.refreshProcesses()\n    }\n  }\n\n  onClickSelect(process: any) {\n    this.dispatchEvent(\n      new CustomEvent('process-selected', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          process\n        }\n      })\n    )\n  }\n\n  async onCreateProcess(e: CustomEvent) {\n    var { name, description, groupId, model, thumbnail } = e.detail\n\n    await this.createProcess(name, description, groupId, model, thumbnail)\n    this.refreshProcesses()\n  }\n\n  async refreshGroups() {\n    var groupListResponse = await client.query({\n      query: FETCH_PROCESS_GROUP_LIST_GQL,\n      context: gqlContext()\n    })\n\n    if (!groupListResponse || !groupListResponse.data) return\n\n    var groups = groupListResponse.data.processGroups.items\n    this.groups = [...groups]\n\n    this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''\n  }\n\n  async refreshProcesses() {\n    var processes = await this.getProcesses()\n    this.processes = [...processes]\n\n    var creationCard = this.renderRoot.querySelector('ox-process-creation-card')\n    if (creationCard) {\n      ;(creationCard as any).reset()\n    }\n  }\n\n  async appendProcesses() {\n    var processes = await this.getProcesses({ page: this._page + 1 })\n    this.processes = [...this.processes, ...processes]\n  }\n\n  async getProcesses({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {\n    var filters = []\n    var sortings = [] as any[]\n    var pagination = {\n      limit,\n      page\n    }\n\n    if (this.group)\n      filters.push({\n        name: 'groupId',\n        operator: 'eq',\n        value: this.group\n      })\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n    var processListResponse = await client.query({\n      query: FETCH_PROCESS_LIST_GQL(params),\n      context: gqlContext()\n    })\n\n    if (!processListResponse || !processListResponse.data) return []\n    this._total = processListResponse.data.processes.total\n    this._page = page\n\n    return processListResponse.data.processes.items\n  }\n\n  async createProcess(name: string, description: string, groupId: string, modelTemplate: any, thumbnail: string) {\n    var model = JSON.stringify(\n      modelTemplate || {\n        width: 1200,\n        height: 800,\n        fillStyle: 'white'\n      }\n    )\n\n    const response = await client.mutate({\n      mutation: CREATE_PROCESS_GQL,\n      variables: {\n        process: {\n          name,\n          description,\n          groupId,\n          model\n        }\n      },\n      context: gqlContext()\n    })\n\n    return response.data\n  }\n}\n"]}