@operato/board 0.2.46 → 0.2.50

package/dist/src/modeller/property-sidebar/data-binding/data-binding.d.ts

@@ -1,8 +1,8 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@things-factory/i18n-base';
 import './data-binding-mapper';
 import '@material/mwc-icon';
 import '@things-factory/help';
 import '@operato/input/dist/src/ox-buttons-radio.js';
+import '@operato/input/dist/src/ox-input-data';

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

@@ -2,11 +2,11 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import '@things-factory/i18n-base';
 import './data-binding-mapper';
 import '@material/mwc-icon';
 import '@things-factory/help';
 import '@operato/input/dist/src/ox-buttons-radio.js';
+import '@operato/input/dist/src/ox-input-data';
 import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators';
 import { AbstractProperty } from '../abstract-property';
@@ -38,15 +38,13 @@ const PROPS = [
 let PropertyDataBinding = class PropertyDataBinding extends AbstractProperty {
     constructor() {
         super(...arguments);
-        this.value = {
-            mappings: []
-        };
         this.mappingIndex = 0;
         this._dataExpanded = false;
         this.mapping = {};
     }
     get mappings() {
-        return this.value.mappings || [];
+        var _a;
+        return ((_a = this.value) === null || _a === void 0 ? void 0 : _a.mappings) || [];
     }
     firstUpdated() {
         this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
@@ -60,6 +58,9 @@ let PropertyDataBinding = class PropertyDataBinding extends AbstractProperty {
         }
     }
     render() {
+        const value = this.value || {
+            mappings: []
+        };
         return html `
       <fieldset>
         <legend>
@@ -67,21 +68,21 @@ let PropertyDataBinding = class PropertyDataBinding extends AbstractProperty {
         </legend>
         <div class="property-grid">
           <label> <i18n-msg msgid="label.id">ID</i18n-msg> </label>
-          <input value-key="id" .value=${this.value.id || ''} />
+          <input value-key="id" .value=${value.id || ''} />
 
           <label> <i18n-msg msgid="label.class">Class</i18n-msg> </label>
-          <input value-key="class" .value=${this.value.class || ''} />
+          <input value-key="class" .value=${value.class || ''} />
 
           <label> <i18n-msg msgid="label.template-prefix">Template Prefix</i18n-msg> </label>
-          <input value-key="templatePrefix" .value=${this.value.templatePrefix || ''} />
+          <input value-key="templatePrefix" .value=${value.templatePrefix || ''} />
 
           <div class="checkbox-row">
-            <input id="checkbox-ndns" type="checkbox" value-key="ndns" .checked=${this.value.ndns} />
+            <input id="checkbox-ndns" type="checkbox" value-key="ndns" .checked=${value.ndns} />
             <label for="checkbox-ndns"> <i18n-msg msgid="label.ndns">No Data No Show</i18n-msg> </label>
           </div>
 
           <div class="checkbox-row">
-            <input id="checkbox-sensitive" type="checkbox" value-key="sensitive" .checked=${this.value.sensitive} />
+            <input id="checkbox-sensitive" type="checkbox" value-key="sensitive" .checked=${value.sensitive} />
             <label for="checkbox-sensitive">
               <i18n-msg msgid="label.intent-sensitive">Intent Sensitive</i18n-msg>
             </label>
@@ -99,7 +100,7 @@ let PropertyDataBinding = class PropertyDataBinding extends AbstractProperty {
             >${this._dataExpanded ? 'expand_less' : 'expand_more'}</mwc-icon
           >
         </legend>
-        <things-editor-data value-key="data" .value=${this.value.data}> </things-editor-data>
+        <ox-input-data value-key="data" .value=${value.data}> </ox-input-data>
       </fieldset>
 
       <fieldset>
@@ -122,8 +123,8 @@ let PropertyDataBinding = class PropertyDataBinding extends AbstractProperty {
             this._setMappingIndex(e.target.value);
         }}
           >
-            ${this.mappings.map((m, i) => html ` <div value=${i} data-mapping>${i + 1}</div> `)}
-            <div value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>
+            ${this.mappings.map((m, i) => html ` <div data-value=${i} data-mapping>${i + 1}</div> `)}
+            <div data-value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>
           </ox-buttons-radio>
 
           <mwc-icon
@@ -149,7 +150,7 @@ let PropertyDataBinding = class PropertyDataBinding extends AbstractProperty {
         <data-binding-mapper
           @value-change=${(e) => this._onMappingChanged(e)}
           .scene=${this.scene}
-          .mapping=${(this.value.mappings && this.value.mappings[this.mappingIndex]) || {}}
+          .mapping=${(value.mappings && value.mappings[this.mappingIndex]) || {}}
           .properties=${PROPS}
         >
         </data-binding-mapper>
@@ -161,7 +162,8 @@ let PropertyDataBinding = class PropertyDataBinding extends AbstractProperty {
         this._onTabScroll();
     }
     _clearDataBindingMapper() {
-        var mappings = [...(this.value.mappings || [])];
+        var _a;
+        var mappings = [...(((_a = this.value) === null || _a === void 0 ? void 0 : _a.mappings) || [])];
         mappings.splice(this.mappingIndex, 1);
         this._onAfterValueChange('mappings', mappings.filter(m => !!m));
     }
@@ -169,8 +171,9 @@ let PropertyDataBinding = class PropertyDataBinding extends AbstractProperty {
         clipboard = JSON.stringify(this.mappings[this.mappingIndex]);
     }
     async _pasteDataBindingMapper() {
+        var _a;
         var index = this.mappingIndex;
-        var mappings = [...(this.value.mappings || [])];
+        var mappings = [...(((_a = this.value) === null || _a === void 0 ? void 0 : _a.mappings) || [])];
         mappings[this.mappingIndex] = JSON.parse(clipboard);
         this._onAfterValueChange('mappings', mappings);
         setTimeout(() => {
@@ -204,6 +207,7 @@ let PropertyDataBinding = class PropertyDataBinding extends AbstractProperty {
         return this.tabs;
     }
     async _onMappingChanged(e) {
+        var _a;
         var mapping = e.target.mapping;
         /* data spread target의 변경이 있는 경우, target 컴포넌트들의 태그를 블링크 시킨다 */
         if (mapping && mapping.target) {
@@ -215,7 +219,7 @@ let PropertyDataBinding = class PropertyDataBinding extends AbstractProperty {
                 });
         }
         /* mapping의 모든 속성이 편집되면, 모델에 반영한다. */
-        var mappings = [...(this.value.mappings || [])];
+        var mappings = [...(((_a = this.value) === null || _a === void 0 ? void 0 : _a.mappings) || [])];
         if (mapping.target && mapping.property && mapping.rule) {
             mappings[this.mappingIndex] = mapping;
             var mappingIdx = this.mappingIndex;

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

@@ -1 +1 @@
-{"version":3,"file":"data-binding.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\nimport './data-binding-mapper'\nimport '@material/mwc-icon'\nimport '@things-factory/help'\nimport '@operato/input/dist/src/ox-buttons-radio.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\n\nvar clipboard = '{}'\n\nconst PROPS = [\n  '',\n  'text',\n  ['fillStyle', 'fill style'],\n  ['strokeStyle', 'stroke style'],\n  ['fontColor', 'font color'],\n  'value',\n  'data',\n  'source',\n  'hidden',\n  'started',\n  'play',\n  ['ref', 'reference'],\n  'options',\n  'rotate',\n  'scale',\n  'translate',\n  'dimension',\n  'location',\n  'accessor'\n].map(prop => {\n  return typeof prop == 'string' ? { name: prop, label: prop } : { name: prop[0], label: prop[1] }\n})\n\n@customElement('property-data-binding')\nclass PropertyDataBinding extends AbstractProperty {\n  static styles = [\n    PropertySharedStyle,\n    css`\n      #tab-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      #tab-header > mwc-icon {\n        padding: 0;\n        margin: 0;\n        width: 25px;\n        height: 25px;\n        font-size: x-large;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n      }\n\n      fieldset[collapsable] legend {\n        box-sizing: border-box;\n        width: 100%;\n      }\n\n      fieldset[collapsable] legend mwc-icon {\n        float: right;\n        font-size: medium;\n        margin: 0;\n      }\n\n      fieldset[collapsable][collapsed] > :not(legend) {\n        display: none;\n      }\n\n      ox-buttons-radio {\n        flex: 1;\n        height: 25px;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-width: 1px 1px 0 1px;\n        text-align: center;\n\n        display: flex;\n        padding: 0;\n        box-sizing: border-box;\n\n        width: 0; /* limit width */\n        overflow-x: hidden;\n      }\n\n      ox-buttons-radio > div {\n        background-color: rgba(0, 0, 0, 0.2);\n        border: 1px solid rgba(0, 0, 0, 0.07);\n        border-width: 0 0 2px 0;\n        padding: 0;\n        color: #fff;\n        font-size: 13px;\n        max-width: 25px;\n        min-width: 25px;\n      }\n\n      ox-buttons-radio > div[disabled] {\n        background-color: rgba(0, 0, 0, 0.1);\n      }\n\n      ox-buttons-radio > div[active] {\n        border-color: rgb(242, 71, 28);\n      }\n\n      ox-buttons-radio > div.iron-selected {\n        background-color: rgba(255, 255, 255, 0.5);\n        color: #585858;\n      }\n\n      div[binding] {\n        display: flex;\n        flex-direction: row-reverse;\n        background-color: rgba(255, 255, 255, 0.5);\n        overflow: hidden;\n        border-style: solid;\n        border-color: rgba(0, 0, 0, 0.2);\n        border-image: initial;\n        border-width: 0px 1px;\n        padding: 7px 5px 2px 5px;\n      }\n\n      mwc-icon {\n        margin-left: 5px;\n        color: var(--secondary-color);\n        opacity: 0.8;\n        cursor: pointer;\n        --mdc-icon-size: 18px;\n      }\n\n      mwc-icon:hover {\n        color: var(--primary-color);\n        opacity: 1;\n      }\n\n      mwc-icon[disabled] {\n        color: rgba(0, 0, 0, 0.1);\n      }\n\n      data-binding-mapper {\n        --things-select: {\n          min-width: 50%;\n          margin-bottom: 10px;\n          padding: 3px 20px 2px 5px;\n          -webkit-border-radius: 4px;\n          -moz-border-radius: 4px;\n          border-radius: 4px;\n          border: 1px solid rgba(0, 0, 0, 0.15);\n          font-size: 15px;\n          font-weight: 300;\n          -webkit-appearance: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: Properties = {\n    mappings: []\n  }\n  @property({ type: Object }) scene?: Scene\n\n  @state() mappingIndex: number = 0\n  @state() _afterRender?: Function | null\n  @state() _dataExpanded: boolean = false\n\n  @query('#tabs') tabs!: HTMLElement\n  @query('#tab-nav-left-button') tabNavLeftButton!: HTMLElement\n  @query('#tab-nav-right-button') tabNavRightButton!: HTMLElement\n\n  private mapping: Properties = {}\n\n  get mappings() {\n    return this.value.mappings || []\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n\n    this.tabContainer.addEventListener('scroll', () => {\n      this._onTabScroll()\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this._onValueChanged()\n    }\n  }\n\n  render() {\n    return html`\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/data-binding\" msgid=\"label.identifier\">identifier</title-with-help>\n        </legend>\n        <div class=\"property-grid\">\n          <label> <i18n-msg msgid=\"label.id\">ID</i18n-msg> </label>\n          <input value-key=\"id\" .value=${this.value.id || ''} />\n\n          <label> <i18n-msg msgid=\"label.class\">Class</i18n-msg> </label>\n          <input value-key=\"class\" .value=${this.value.class || ''} />\n\n          <label> <i18n-msg msgid=\"label.template-prefix\">Template Prefix</i18n-msg> </label>\n          <input value-key=\"templatePrefix\" .value=${this.value.templatePrefix || ''} />\n\n          <div class=\"checkbox-row\">\n            <input id=\"checkbox-ndns\" type=\"checkbox\" value-key=\"ndns\" .checked=${this.value.ndns} />\n            <label for=\"checkbox-ndns\"> <i18n-msg msgid=\"label.ndns\">No Data No Show</i18n-msg> </label>\n          </div>\n\n          <div class=\"checkbox-row\">\n            <input id=\"checkbox-sensitive\" type=\"checkbox\" value-key=\"sensitive\" .checked=${this.value.sensitive} />\n            <label for=\"checkbox-sensitive\">\n              <i18n-msg msgid=\"label.intent-sensitive\">Intent Sensitive</i18n-msg>\n            </label>\n          </div>\n        </div>\n      </fieldset>\n\n      <fieldset collapsable ?collapsed=${!this._dataExpanded}>\n        <legend>\n          <i18n-msg msgid=\"label.initial-data\">initial value</i18n-msg>\n          <mwc-icon\n            @click=${() => {\n              this._dataExpanded = !this._dataExpanded\n            }}\n            >${this._dataExpanded ? 'expand_less' : 'expand_more'}</mwc-icon\n          >\n        </legend>\n        <things-editor-data value-key=\"data\" .value=${this.value.data}> </things-editor-data>\n      </fieldset>\n\n      <fieldset>\n        <legend><i18n-msg msgid=\"label.data-spread\">Data Spread</i18n-msg></legend>\n        <div id=\"tab-header\">\n          <mwc-icon\n            id=\"tab-nav-left-button\"\n            @click=${() => {\n              this._onTabScrollNavLeft()\n            }}\n            disabled\n            >chevron_left</mwc-icon\n          >\n\n          <ox-buttons-radio\n            id=\"tabs\"\n            .value=${String(this.mappingIndex)}\n            @change=${(e: Event) => {\n              e.stopPropagation()\n              this._setMappingIndex((e.target as any).value)\n            }}\n          >\n            ${this.mappings.map((m: string, i: number) => html` <div value=${i} data-mapping>${i + 1}</div> `)}\n            <div value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>\n          </ox-buttons-radio>\n\n          <mwc-icon\n            id=\"tab-nav-right-button\"\n            @click=${(e: Event) => {\n              this._onTabScrollNavRight()\n            }}\n            disabled\n            >chevron_right</mwc-icon\n          >\n        </div>\n\n        <div binding>\n          <mwc-icon style=\"font-size:19px\" @click=${() => this._clearDataBindingMapper()} title=\"delete\"\n            >delete_forever</mwc-icon\n          >\n          <mwc-icon @click=${() => this._pasteDataBindingMapper()} title=\"past\">content_paste</mwc-icon>\n          <mwc-icon style=\"font-size:17px\" @click=${() => this._copyDataBindingMapper()} title=\"copy\"\n            >content_copy</mwc-icon\n          >\n        </div>\n\n        <data-binding-mapper\n          @value-change=${(e: CustomEvent) => this._onMappingChanged(e)}\n          .scene=${this.scene}\n          .mapping=${(this.value.mappings && this.value.mappings[this.mappingIndex]) || {}}\n          .properties=${PROPS}\n        >\n        </data-binding-mapper>\n      </fieldset>\n    `\n  }\n\n  _setMappingIndex(idx: number) {\n    this.mappingIndex = isNaN(Number(idx)) ? 0 : Number(idx)\n\n    this._onTabScroll()\n  }\n\n  _clearDataBindingMapper() {\n    var mappings = [...(this.value.mappings || [])]\n    mappings.splice(this.mappingIndex, 1)\n    this._onAfterValueChange(\n      'mappings',\n      mappings.filter(m => !!m)\n    )\n  }\n\n  _copyDataBindingMapper() {\n    clipboard = JSON.stringify(this.mappings[this.mappingIndex])\n  }\n\n  async _pasteDataBindingMapper() {\n    var index = this.mappingIndex\n    var mappings = [...(this.value.mappings || [])]\n    mappings[this.mappingIndex] = JSON.parse(clipboard)\n\n    this._onAfterValueChange('mappings', mappings)\n\n    setTimeout(() => {\n      this._setMappingIndex(index)\n    }, 100)\n  }\n\n  async _onValueChanged() {\n    await this.updateComplete\n\n    if (this._afterRender) {\n      this._afterRender()\n    } else {\n      this._setMappingIndex(0)\n    }\n\n    this._afterRender = null\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    var value = this._getValueFromEventTarget(element)\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: value\n    }\n\n    this._onAfterValueChange(key, value)\n  }\n\n  get tabContainer() {\n    return this.tabs\n  }\n\n  async _onMappingChanged(e: CustomEvent) {\n    var mapping = (e.target as any).mapping\n\n    /* data spread target의 변경이 있는 경우, target 컴포넌트들의 태그를 블링크 시킨다 */\n    if (mapping && mapping.target) {\n      this.scene &&\n        this.scene.findAll(mapping.target, this.scene.selected && this.scene.selected[0]).forEach((c, i) => {\n          if (i == 0) c.trigger('tagreset')\n          c.trigger('tag', {})\n        })\n    }\n\n    /* mapping의 모든 속성이 편집되면, 모델에 반영한다. */\n    var mappings = [...(this.value.mappings || [])]\n\n    if (mapping.target && mapping.property && mapping.rule) {\n      mappings[this.mappingIndex] = mapping\n\n      var mappingIdx = this.mappingIndex\n      this._afterRender = () => {\n        this._setMappingIndex(mappingIdx)\n        this.tabContainer.scrollLeft = this.tabContainer.scrollWidth\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('property-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            mappings: mappings.filter(m => !!m)\n          }\n        })\n      )\n\n      await this.requestUpdate()\n    } else if (!mapping.target && !mapping.property) {\n      // accessor를 입력중인 경우 tabIndex Change 방지\n      if (e.detail && e.detail.changed && !e.detail.changed.accessor) {\n        mappings[this.mappingIndex] = null\n        var nextMappingIdx = Math.max(this.mappingIndex - 1, 0)\n        this._afterRender = () => {\n          this._setMappingIndex(nextMappingIdx)\n        }\n        this.dispatchEvent(\n          new CustomEvent('property-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              mappings: mappings.filter(m => !!m)\n            }\n          })\n        )\n      }\n    }\n  }\n\n  _onTabScroll() {\n    if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    }\n    // left-end\n    else if (this.tabContainer.scrollLeft == 0) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n    // right-end\n    else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    } else {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n  }\n\n  _onTabScrollNavLeft() {\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft -= this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n\n  _onTabScrollNavRight() {\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft += this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n}\n"]}
+{"version":3,"file":"data-binding.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,uBAAuB,CAAA;AAC9B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,6CAA6C,CAAA;AACpD,OAAO,uCAAuC,CAAA;AAG9C,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,IAAI,SAAS,GAAG,IAAI,CAAA;AAEpB,MAAM,KAAK,GAAG;IACZ,EAAE;IACF,MAAM;IACN,CAAC,WAAW,EAAE,YAAY,CAAC;IAC3B,CAAC,aAAa,EAAE,cAAc,CAAC;IAC/B,CAAC,WAAW,EAAE,YAAY,CAAC;IAC3B,OAAO;IACP,MAAM;IACN,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,MAAM;IACN,CAAC,KAAK,EAAE,WAAW,CAAC;IACpB,SAAS;IACT,QAAQ;IACR,OAAO;IACP,WAAW;IACX,WAAW;IACX,UAAU;IACV,UAAU;CACX,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;IACX,OAAO,OAAO,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAA;AAClG,CAAC,CAAC,CAAA;AAGF,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,gBAAgB;IAAlD;;QA0HW,iBAAY,GAAW,CAAC,CAAA;QAExB,kBAAa,GAAY,KAAK,CAAA;QAM/B,YAAO,GAAe,EAAE,CAAA;IAkRlC,CAAC;IAhRC,IAAI,QAAQ;;QACV,OAAO,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,KAAI,EAAE,CAAA;IACnC,CAAC;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QAE1E,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YAChD,IAAI,CAAC,YAAY,EAAE,CAAA;QACrB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,eAAe,EAAE,CAAA;SACvB;IACH,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI;YAC1B,QAAQ,EAAE,EAAE;SACb,CAAA;QAED,OAAO,IAAI,CAAA;;;;;;;yCAO0B,KAAK,CAAC,EAAE,IAAI,EAAE;;;4CAGX,KAAK,CAAC,KAAK,IAAI,EAAE;;;qDAGR,KAAK,CAAC,cAAc,IAAI,EAAE;;;kFAGG,KAAK,CAAC,IAAI;;;;;4FAKA,KAAK,CAAC,SAAS;;;;;;;;yCAQlE,CAAC,IAAI,CAAC,aAAa;;;;qBAIvC,GAAG,EAAE;YACZ,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAA;QAC1C,CAAC;eACE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa;;;iDAGhB,KAAK,CAAC,IAAI;;;;;;;;qBAQtC,GAAG,EAAE;YACZ,IAAI,CAAC,mBAAmB,EAAE,CAAA;QAC5B,CAAC;;;;;;;qBAOQ,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;sBACxB,CAAC,CAAQ,EAAE,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,gBAAgB,CAAE,CAAC,CAAC,MAAc,CAAC,KAAK,CAAC,CAAA;QAChD,CAAC;;cAEC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE,CAAC,IAAI,CAAA,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC;8BACrF,IAAI,CAAC,QAAQ,CAAC,MAAM,0BAA0B,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;;;;;qBAK/E,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,oBAAoB,EAAE,CAAA;QAC7B,CAAC;;;;;;;oDAOuC,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE;;;6BAG3D,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE;oDACb,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE;;;;;;0BAM7D,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;mBACpD,IAAI,CAAC,KAAK;qBACR,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE;wBACxD,KAAK;;;;KAIxB,CAAA;IACH,CAAC;IAED,gBAAgB,CAAC,GAAW;QAC1B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;QAExD,IAAI,CAAC,YAAY,EAAE,CAAA;IACrB,CAAC;IAED,uBAAuB;;QACrB,IAAI,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,KAAI,EAAE,CAAC,CAAC,CAAA;QAChD,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAA;QACrC,IAAI,CAAC,mBAAmB,CACtB,UAAU,EACV,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAC1B,CAAA;IACH,CAAC;IAED,sBAAsB;QACpB,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAA;IAC9D,CAAC;IAED,KAAK,CAAC,uBAAuB;;QAC3B,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAA;QAC7B,IAAI,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,KAAI,EAAE,CAAC,CAAC,CAAA;QAChD,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;QAEnD,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA;QAE9C,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAA;QAC9B,CAAC,EAAE,GAAG,CAAC,CAAA;IACT,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,MAAM,IAAI,CAAC,cAAc,CAAA;QAEzB,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,YAAY,EAAE,CAAA;SACpB;aAAM;YACL,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;SACzB;QAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;IAC1B,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,KAAK,GAAG,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAA;QAElD,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAG,CAAC,EAAE,KAAK;SACb,CAAA;QAED,IAAI,CAAC,mBAAmB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;IACtC,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,IAAI,CAAA;IAClB,CAAC;IAED,KAAK,CAAC,iBAAiB,CAAC,CAAc;;QACpC,IAAI,OAAO,GAAI,CAAC,CAAC,MAAc,CAAC,OAAO,CAAA;QAEvC,8DAA8D;QAC9D,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,EAAE;YAC7B,IAAI,CAAC,KAAK;gBACR,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;oBACjG,IAAI,CAAC,IAAI,CAAC;wBAAE,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;oBACjC,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;gBACtB,CAAC,CAAC,CAAA;SACL;QAED,qCAAqC;QACrC,IAAI,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,KAAI,EAAE,CAAC,CAAC,CAAA;QAEhD,IAAI,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,IAAI,EAAE;YACtD,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,OAAO,CAAA;YAErC,IAAI,UAAU,GAAG,IAAI,CAAC,YAAY,CAAA;YAClC,IAAI,CAAC,YAAY,GAAG,GAAG,EAAE;gBACvB,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAA;gBACjC,IAAI,CAAC,YAAY,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAA;YAC9D,CAAC,CAAA;YAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBACjC,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;iBACpC;aACF,CAAC,CACH,CAAA;YAED,MAAM,IAAI,CAAC,aAAa,EAAE,CAAA;SAC3B;aAAM,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;YAC/C,uCAAuC;YACvC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE;gBAC9D,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAA;gBAClC,IAAI,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;gBACvD,IAAI,CAAC,YAAY,GAAG,GAAG,EAAE;oBACvB,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAA;gBACvC,CAAC,CAAA;gBACD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;oBACjC,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;oBACd,MAAM,EAAE;wBACN,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;qBACpC;iBACF,CAAC,CACH,CAAA;aACF;SACF;IACH,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE;YAClE,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;YAClD,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;SACpD;QACD,WAAW;aACN,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,IAAI,CAAC,EAAE;YAC1C,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;YAClD,IAAI,CAAC,iBAAiB,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;SACnD;QACD,YAAY;aACP,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE;YACtG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;YACjD,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;SACpD;aAAM;YACL,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;YACjD,IAAI,CAAC,iBAAiB,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;SACnD;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAA;QACjD,IAAI,CAAC,YAAY,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAA;QAC7D,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,GAAG,MAAM,CAAA;IACjD,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAA;QACjD,IAAI,CAAC,YAAY,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAA;QAC7D,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,GAAG,MAAM,CAAA;IACjD,CAAC;CACF,CAAA;AAnZQ,0BAAM,GAAG;IACd,mBAAmB;IACnB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiHF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAc;AAEhC;IAAR,KAAK,EAAE;yDAAyB;AACxB;IAAR,KAAK,EAAE;yDAA+B;AAC9B;IAAR,KAAK,EAAE;0DAA+B;AAEvB;IAAf,KAAK,CAAC,OAAO,CAAC;iDAAmB;AACH;IAA9B,KAAK,CAAC,sBAAsB,CAAC;6DAA+B;AAC7B;IAA/B,KAAK,CAAC,uBAAuB,CAAC;8DAAgC;AAhI3D,mBAAmB;IADxB,aAAa,CAAC,uBAAuB,CAAC;GACjC,mBAAmB,CAoZxB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './data-binding-mapper'\nimport '@material/mwc-icon'\nimport '@things-factory/help'\nimport '@operato/input/dist/src/ox-buttons-radio.js'\nimport '@operato/input/dist/src/ox-input-data'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\n\nvar clipboard = '{}'\n\nconst PROPS = [\n  '',\n  'text',\n  ['fillStyle', 'fill style'],\n  ['strokeStyle', 'stroke style'],\n  ['fontColor', 'font color'],\n  'value',\n  'data',\n  'source',\n  'hidden',\n  'started',\n  'play',\n  ['ref', 'reference'],\n  'options',\n  'rotate',\n  'scale',\n  'translate',\n  'dimension',\n  'location',\n  'accessor'\n].map(prop => {\n  return typeof prop == 'string' ? { name: prop, label: prop } : { name: prop[0], label: prop[1] }\n})\n\n@customElement('property-data-binding')\nclass PropertyDataBinding extends AbstractProperty {\n  static styles = [\n    PropertySharedStyle,\n    css`\n      #tab-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      #tab-header > mwc-icon {\n        padding: 0;\n        margin: 0;\n        width: 25px;\n        height: 25px;\n        font-size: x-large;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n      }\n\n      fieldset[collapsable] legend {\n        box-sizing: border-box;\n        width: 100%;\n      }\n\n      fieldset[collapsable] legend mwc-icon {\n        float: right;\n        font-size: medium;\n        margin: 0;\n      }\n\n      fieldset[collapsable][collapsed] > :not(legend) {\n        display: none;\n      }\n\n      ox-buttons-radio {\n        flex: 1;\n        height: 25px;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-width: 1px 1px 0 1px;\n        text-align: center;\n\n        display: flex;\n        padding: 0;\n        box-sizing: border-box;\n\n        width: 0; /* limit width */\n        overflow-x: hidden;\n      }\n\n      ox-buttons-radio > div {\n        background-color: rgba(0, 0, 0, 0.2);\n        border: 1px solid rgba(0, 0, 0, 0.07);\n        border-width: 0 0 2px 0;\n        padding: 0;\n        color: #fff;\n        font-size: 13px;\n        max-width: 25px;\n        min-width: 25px;\n      }\n\n      ox-buttons-radio > div[disabled] {\n        background-color: rgba(0, 0, 0, 0.1);\n      }\n\n      ox-buttons-radio > div[active] {\n        border-color: rgb(242, 71, 28);\n      }\n\n      ox-buttons-radio > div.iron-selected {\n        background-color: rgba(255, 255, 255, 0.5);\n        color: #585858;\n      }\n\n      div[binding] {\n        display: flex;\n        flex-direction: row-reverse;\n        background-color: rgba(255, 255, 255, 0.5);\n        overflow: hidden;\n        border-style: solid;\n        border-color: rgba(0, 0, 0, 0.2);\n        border-image: initial;\n        border-width: 0px 1px;\n        padding: 7px 5px 2px 5px;\n      }\n\n      mwc-icon {\n        margin-left: 5px;\n        color: var(--secondary-color);\n        opacity: 0.8;\n        cursor: pointer;\n        --mdc-icon-size: 18px;\n      }\n\n      mwc-icon:hover {\n        color: var(--primary-color);\n        opacity: 1;\n      }\n\n      mwc-icon[disabled] {\n        color: rgba(0, 0, 0, 0.1);\n      }\n\n      data-binding-mapper {\n        --things-select: {\n          min-width: 50%;\n          margin-bottom: 10px;\n          padding: 3px 20px 2px 5px;\n          -webkit-border-radius: 4px;\n          -moz-border-radius: 4px;\n          border-radius: 4px;\n          border: 1px solid rgba(0, 0, 0, 0.15);\n          font-size: 15px;\n          font-weight: 300;\n          -webkit-appearance: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  @state() mappingIndex: number = 0\n  @state() _afterRender?: Function | null\n  @state() _dataExpanded: boolean = false\n\n  @query('#tabs') tabs!: HTMLElement\n  @query('#tab-nav-left-button') tabNavLeftButton!: HTMLElement\n  @query('#tab-nav-right-button') tabNavRightButton!: HTMLElement\n\n  private mapping: Properties = {}\n\n  get mappings() {\n    return this.value?.mappings || []\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n\n    this.tabContainer.addEventListener('scroll', () => {\n      this._onTabScroll()\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this._onValueChanged()\n    }\n  }\n\n  render() {\n    const value = this.value || {\n      mappings: []\n    }\n\n    return html`\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/data-binding\" msgid=\"label.identifier\">identifier</title-with-help>\n        </legend>\n        <div class=\"property-grid\">\n          <label> <i18n-msg msgid=\"label.id\">ID</i18n-msg> </label>\n          <input value-key=\"id\" .value=${value.id || ''} />\n\n          <label> <i18n-msg msgid=\"label.class\">Class</i18n-msg> </label>\n          <input value-key=\"class\" .value=${value.class || ''} />\n\n          <label> <i18n-msg msgid=\"label.template-prefix\">Template Prefix</i18n-msg> </label>\n          <input value-key=\"templatePrefix\" .value=${value.templatePrefix || ''} />\n\n          <div class=\"checkbox-row\">\n            <input id=\"checkbox-ndns\" type=\"checkbox\" value-key=\"ndns\" .checked=${value.ndns} />\n            <label for=\"checkbox-ndns\"> <i18n-msg msgid=\"label.ndns\">No Data No Show</i18n-msg> </label>\n          </div>\n\n          <div class=\"checkbox-row\">\n            <input id=\"checkbox-sensitive\" type=\"checkbox\" value-key=\"sensitive\" .checked=${value.sensitive} />\n            <label for=\"checkbox-sensitive\">\n              <i18n-msg msgid=\"label.intent-sensitive\">Intent Sensitive</i18n-msg>\n            </label>\n          </div>\n        </div>\n      </fieldset>\n\n      <fieldset collapsable ?collapsed=${!this._dataExpanded}>\n        <legend>\n          <i18n-msg msgid=\"label.initial-data\">initial value</i18n-msg>\n          <mwc-icon\n            @click=${() => {\n              this._dataExpanded = !this._dataExpanded\n            }}\n            >${this._dataExpanded ? 'expand_less' : 'expand_more'}</mwc-icon\n          >\n        </legend>\n        <ox-input-data value-key=\"data\" .value=${value.data}> </ox-input-data>\n      </fieldset>\n\n      <fieldset>\n        <legend><i18n-msg msgid=\"label.data-spread\">Data Spread</i18n-msg></legend>\n        <div id=\"tab-header\">\n          <mwc-icon\n            id=\"tab-nav-left-button\"\n            @click=${() => {\n              this._onTabScrollNavLeft()\n            }}\n            disabled\n            >chevron_left</mwc-icon\n          >\n\n          <ox-buttons-radio\n            id=\"tabs\"\n            .value=${String(this.mappingIndex)}\n            @change=${(e: Event) => {\n              e.stopPropagation()\n              this._setMappingIndex((e.target as any).value)\n            }}\n          >\n            ${this.mappings.map((m: string, i: number) => html` <div data-value=${i} data-mapping>${i + 1}</div> `)}\n            <div data-value=${this.mappings.length} data-mapping disabled>${this.mappings.length + 1}</div>\n          </ox-buttons-radio>\n\n          <mwc-icon\n            id=\"tab-nav-right-button\"\n            @click=${(e: Event) => {\n              this._onTabScrollNavRight()\n            }}\n            disabled\n            >chevron_right</mwc-icon\n          >\n        </div>\n\n        <div binding>\n          <mwc-icon style=\"font-size:19px\" @click=${() => this._clearDataBindingMapper()} title=\"delete\"\n            >delete_forever</mwc-icon\n          >\n          <mwc-icon @click=${() => this._pasteDataBindingMapper()} title=\"past\">content_paste</mwc-icon>\n          <mwc-icon style=\"font-size:17px\" @click=${() => this._copyDataBindingMapper()} title=\"copy\"\n            >content_copy</mwc-icon\n          >\n        </div>\n\n        <data-binding-mapper\n          @value-change=${(e: CustomEvent) => this._onMappingChanged(e)}\n          .scene=${this.scene}\n          .mapping=${(value.mappings && value.mappings[this.mappingIndex]) || {}}\n          .properties=${PROPS}\n        >\n        </data-binding-mapper>\n      </fieldset>\n    `\n  }\n\n  _setMappingIndex(idx: number) {\n    this.mappingIndex = isNaN(Number(idx)) ? 0 : Number(idx)\n\n    this._onTabScroll()\n  }\n\n  _clearDataBindingMapper() {\n    var mappings = [...(this.value?.mappings || [])]\n    mappings.splice(this.mappingIndex, 1)\n    this._onAfterValueChange(\n      'mappings',\n      mappings.filter(m => !!m)\n    )\n  }\n\n  _copyDataBindingMapper() {\n    clipboard = JSON.stringify(this.mappings[this.mappingIndex])\n  }\n\n  async _pasteDataBindingMapper() {\n    var index = this.mappingIndex\n    var mappings = [...(this.value?.mappings || [])]\n    mappings[this.mappingIndex] = JSON.parse(clipboard)\n\n    this._onAfterValueChange('mappings', mappings)\n\n    setTimeout(() => {\n      this._setMappingIndex(index)\n    }, 100)\n  }\n\n  async _onValueChanged() {\n    await this.updateComplete\n\n    if (this._afterRender) {\n      this._afterRender()\n    } else {\n      this._setMappingIndex(0)\n    }\n\n    this._afterRender = null\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    var value = this._getValueFromEventTarget(element)\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: value\n    }\n\n    this._onAfterValueChange(key, value)\n  }\n\n  get tabContainer() {\n    return this.tabs\n  }\n\n  async _onMappingChanged(e: CustomEvent) {\n    var mapping = (e.target as any).mapping\n\n    /* data spread target의 변경이 있는 경우, target 컴포넌트들의 태그를 블링크 시킨다 */\n    if (mapping && mapping.target) {\n      this.scene &&\n        this.scene.findAll(mapping.target, this.scene.selected && this.scene.selected[0]).forEach((c, i) => {\n          if (i == 0) c.trigger('tagreset')\n          c.trigger('tag', {})\n        })\n    }\n\n    /* mapping의 모든 속성이 편집되면, 모델에 반영한다. */\n    var mappings = [...(this.value?.mappings || [])]\n\n    if (mapping.target && mapping.property && mapping.rule) {\n      mappings[this.mappingIndex] = mapping\n\n      var mappingIdx = this.mappingIndex\n      this._afterRender = () => {\n        this._setMappingIndex(mappingIdx)\n        this.tabContainer.scrollLeft = this.tabContainer.scrollWidth\n      }\n\n      this.dispatchEvent(\n        new CustomEvent('property-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            mappings: mappings.filter(m => !!m)\n          }\n        })\n      )\n\n      await this.requestUpdate()\n    } else if (!mapping.target && !mapping.property) {\n      // accessor를 입력중인 경우 tabIndex Change 방지\n      if (e.detail && e.detail.changed && !e.detail.changed.accessor) {\n        mappings[this.mappingIndex] = null\n        var nextMappingIdx = Math.max(this.mappingIndex - 1, 0)\n        this._afterRender = () => {\n          this._setMappingIndex(nextMappingIdx)\n        }\n        this.dispatchEvent(\n          new CustomEvent('property-change', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              mappings: mappings.filter(m => !!m)\n            }\n          })\n        )\n      }\n    }\n  }\n\n  _onTabScroll() {\n    if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    }\n    // left-end\n    else if (this.tabContainer.scrollLeft == 0) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n    // right-end\n    else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    } else {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n  }\n\n  _onTabScrollNavLeft() {\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft -= this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n\n  _onTabScrollNavRight() {\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft += this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n}\n"]}

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

@@ -26,7 +26,7 @@ export const EffectsSharedStyle = css `
 
   input,
   select,
-  things-editor-angle-input,
+  ox-input-angle,
   things-editor-color,
   [custom-editor] {
     grid-column: span 7;
@@ -34,7 +34,7 @@ export const EffectsSharedStyle = css `
 
   input,
   select,
-  things-editor-angle-input input,
+  ox-input-angle input,
   things-editor-color input,
   [custom-editor] input {
     border: var(--property-sidebar-fieldset-border);

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

@@ -1 +1 @@
-{"version":3,"file":"effects-shared-style.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/effects-shared-style.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDpC,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css } from 'lit'\n\nexport const EffectsSharedStyle = css`\n  :host {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n\n    align-items: center;\n  }\n\n  * {\n    align-self: stretch;\n  }\n\n  label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n\n    align-self: center;\n  }\n\n  input,\n  select,\n  things-editor-angle-input,\n  things-editor-color,\n  [custom-editor] {\n    grid-column: span 7;\n  }\n\n  input,\n  select,\n  things-editor-angle-input input,\n  things-editor-color input,\n  [custom-editor] input {\n    border: var(--property-sidebar-fieldset-border);\n  }\n\n  input[type='checkbox'] {\n    grid-column: 4 / 5;\n    align-self: center;\n  }\n\n  label.checkbox-label {\n    grid-column: span 6;\n    text-align: left;\n  }\n\n  [fullwidth] {\n    grid-column: 1 / -1;\n  }\n`\n"]}
+{"version":3,"file":"effects-shared-style.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/effects-shared-style.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDpC,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css } from 'lit'\n\nexport const EffectsSharedStyle = css`\n  :host {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n    grid-auto-rows: minmax(24px, auto);\n\n    align-items: center;\n  }\n\n  * {\n    align-self: stretch;\n  }\n\n  label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n\n    align-self: center;\n  }\n\n  input,\n  select,\n  ox-input-angle,\n  things-editor-color,\n  [custom-editor] {\n    grid-column: span 7;\n  }\n\n  input,\n  select,\n  ox-input-angle input,\n  things-editor-color input,\n  [custom-editor] input {\n    border: var(--property-sidebar-fieldset-border);\n  }\n\n  input[type='checkbox'] {\n    grid-column: 4 / 5;\n    align-self: center;\n  }\n\n  label.checkbox-label {\n    grid-column: span 6;\n    text-align: left;\n  }\n\n  [fullwidth] {\n    grid-column: 1 / -1;\n  }\n`\n"]}

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

@@ -1,7 +1,6 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@things-factory/i18n-base';
 import './property-animations';
 import './property-event';
 import './property-shadow';

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

@@ -2,30 +2,26 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import '@things-factory/i18n-base';
 import './property-animations';
 import './property-event';
 import './property-shadow';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators';
 import { AbstractProperty } from '../abstract-property';
 import { PropertySharedStyle } from '../property-shared-style';
-import { html } from 'lit';
 let PropertyEffects = class PropertyEffects extends AbstractProperty {
-    constructor() {
-        super(...arguments);
-        this.value = {};
-    }
     firstUpdated() {
         this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
     }
     render() {
+        const value = this.value || {};
         return html `
       <fieldset>
         <legend>
           <title-with-help topic="board-modeller/effects/shadow" msgid="label.shadow">shadow</title-with-help>
         </legend>
 
-        <property-shadow value-key="shadow" .value=${this.value.shadow || {}}> </property-shadow>
+        <property-shadow value-key="shadow" .value=${value.shadow || {}}> </property-shadow>
       </fieldset>
 
       <fieldset>
@@ -35,14 +31,14 @@ let PropertyEffects = class PropertyEffects extends AbstractProperty {
 
         <div class="property-grid">
           <label> <i18n-msg msgid="label.retention">retention</i18n-msg> </label>
-          <input type="number" value-key="retention" .value=${this.value.retention} placeholder="ms" />
+          <input type="number" value-key="retention" .value=${value.retention} placeholder="ms" />
         </div>
       </fieldset>
 
-      <property-animations value-key="animation" .scene=${this.scene} .value=${this.value.animation || {}}>
+      <property-animations value-key="animation" .scene=${this.scene} .value=${value.animation || {}}>
       </property-animations>
 
-      <property-event value-key="event" .scene=${this.scene} .value=${this.value.event || {}}> </property-event>
+      <property-event value-key="event" .scene=${this.scene} .value=${value.event || {}}> </property-event>
     `;
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"effects.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/effects.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,2BAA2B,CAAA;AAClC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,kBAAkB,CAAA;AACzB,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAExD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,gBAAgB;IAA9C;;QAG8B,UAAK,GAAQ,EAAE,CAAA;IAkC7C,CAAC;IA/BC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;qDAMsC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE;;;;;;;;;;8DAUd,IAAI,CAAC,KAAK,CAAC,SAAS;;;;0DAIxB,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,EAAE;;;iDAGxD,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE;KACvF,CAAA;IACH,CAAC;CACF,CAAA;AApCQ,sBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAA;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAc;AAJrC,eAAe;IADpB,aAAa,CAAC,iBAAiB,CAAC;GAC3B,eAAe,CAqCpB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\nimport './property-animations'\nimport './property-event'\nimport './property-shadow'\n\nimport { customElement, property } from 'lit/decorators'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { Scene } from '@hatiolab/things-scene'\nimport { html } from 'lit'\n\n@customElement('property-effect')\nclass PropertyEffects extends AbstractProperty {\n  static styles = [PropertySharedStyle]\n\n  @property({ type: Object }) value: any = {}\n  @property({ type: Object }) scene?: Scene\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    return html`\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/effects/shadow\" msgid=\"label.shadow\">shadow</title-with-help>\n        </legend>\n\n        <property-shadow value-key=\"shadow\" .value=${this.value.shadow || {}}> </property-shadow>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/effects/retention\" msgid=\"label.retention\">retention</title-with-help>\n        </legend>\n\n        <div class=\"property-grid\">\n          <label> <i18n-msg msgid=\"label.retention\">retention</i18n-msg> </label>\n          <input type=\"number\" value-key=\"retention\" .value=${this.value.retention} placeholder=\"ms\" />\n        </div>\n      </fieldset>\n\n      <property-animations value-key=\"animation\" .scene=${this.scene} .value=${this.value.animation || {}}>\n      </property-animations>\n\n      <property-event value-key=\"event\" .scene=${this.scene} .value=${this.value.event || {}}> </property-event>\n    `\n  }\n}\n"]}
+{"version":3,"file":"effects.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/effects.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,uBAAuB,CAAA;AAC9B,OAAO,kBAAkB,CAAA;AACzB,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAIxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAG9D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,gBAAgB;IAM5C,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;;;;;qDAMsC,KAAK,CAAC,MAAM,IAAI,EAAE;;;;;;;;;;8DAUT,KAAK,CAAC,SAAS;;;;0DAInB,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,SAAS,IAAI,EAAE;;;iDAGnD,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,KAAK,IAAI,EAAE;KAClF,CAAA;IACH,CAAC;CACF,CAAA;AAtCQ,sBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAA;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAc;AAJrC,eAAe;IADpB,aAAa,CAAC,iBAAiB,CAAC;GAC3B,eAAe,CAuCpB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './property-animations'\nimport './property-event'\nimport './property-shadow'\n\nimport { html } from 'lit'\nimport { customElement, property } from 'lit/decorators'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\n\n@customElement('property-effect')\nclass PropertyEffects extends AbstractProperty {\n  static styles = [PropertySharedStyle]\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    const value = this.value || {}\n\n    return html`\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/effects/shadow\" msgid=\"label.shadow\">shadow</title-with-help>\n        </legend>\n\n        <property-shadow value-key=\"shadow\" .value=${value.shadow || {}}> </property-shadow>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/effects/retention\" msgid=\"label.retention\">retention</title-with-help>\n        </legend>\n\n        <div class=\"property-grid\">\n          <label> <i18n-msg msgid=\"label.retention\">retention</i18n-msg> </label>\n          <input type=\"number\" value-key=\"retention\" .value=${value.retention} placeholder=\"ms\" />\n        </div>\n      </fieldset>\n\n      <property-animations value-key=\"animation\" .scene=${this.scene} .value=${value.animation || {}}>\n      </property-animations>\n\n      <property-event value-key=\"event\" .scene=${this.scene} .value=${value.event || {}}> </property-event>\n    `\n  }\n}\n"]}

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

@@ -1,8 +1,7 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@things-factory/i18n-base';
-import '@things-factory/modeller-ui/client/editors/things-editor-angle-input';
+import '@operato/input/dist/src/ox-input-angle';
 import { LitElement } from 'lit';
 import { Properties, Scene } from '@hatiolab/things-scene';
 /**
@@ -15,7 +14,7 @@ Example:
 */
 export default class PropertyAnimation extends LitElement {
     static styles: import("lit").CSSResult[];
-    value: Properties;
+    value?: Properties;
     scene?: Scene;
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/src/modeller/property-sidebar/effects/property-animation.js

@@ -2,9 +2,8 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import '@things-factory/i18n-base';
-import '@things-factory/modeller-ui/client/editors/things-editor-angle-input';
-import { LitElement, html } from 'lit';
+import '@operato/input/dist/src/ox-input-angle';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators';
 import { EffectsSharedStyle } from './effects-shared-style';
 import { convert } from './value-converter';
@@ -17,17 +16,14 @@ Example:
     </property-animation>
 */
 let PropertyAnimation = class PropertyAnimation extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.value = {};
-    }
     firstUpdated() {
         this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
     }
     render() {
+        const value = this.value || {};
         return html `
       <label>Animation Type</label>
-      <select value-key="type" .value=${this.value && this.value.type}>
+      <select value-key="type" .value=${value.type}>
         <option value="">None</option>
         <option value="rotation">Rotation</option>
         <option value="vibration">Vibration</option>
@@ -38,56 +34,56 @@ let PropertyAnimation = class PropertyAnimation extends LitElement {
       </select>
 
       <label> <i18n-msg msgid="label.waiting-time">waiting time</i18n-msg> </label>
-      <input type="number" value-key="delay" .value=${this.value.delay} placeholder="ms" />
+      <input type="number" value-key="delay" .value=${value.delay} placeholder="ms" />
 
       <label> <i18n-msg msgid="label.duration">duration</i18n-msg> </label>
-      <input type="number" value-key="duration" .value=${this.value.duration} placeholder="ms" />
+      <input type="number" value-key="duration" .value=${value.duration} placeholder="ms" />
 
-      ${this.value.type == 'rotation' || this.value.type == 'vibration'
+      ${value.type == 'rotation' || value.type == 'vibration'
             ? html `
             <label> <i18n-msg msgid="label.theta">theta</i18n-msg> </label>
-            <things-editor-angle-input value-key="theta" .radian=${this.value.theta}> </things-editor-angle-input>
+            <ox-input-angle value-key="theta" .radian=${value.theta}> </ox-input-angle>
           `
             : html ``}
-      ${this.value.type == 'heartbeat'
+      ${value.type == 'heartbeat'
             ? html `
             <label> <i18n-msg msgid="label.scale">scale</i18n-msg> </label>
-            <input type="number" value-key="scale" .value=${this.value.scale} />
+            <input type="number" value-key="scale" .value=${value.scale} />
           `
             : html ``}
-      ${this.value.type == 'moving'
+      ${value.type == 'moving'
             ? html `
             <label> <i18n-msg msgid="label.x-axes">X-axes</i18n-msg> </label>
-            <input type="number" value-key="x" .value=${this.value.x} />
+            <input type="number" value-key="x" .value=${value.x} />
 
             <label> <i18n-msg msgid="label.y-axes">Y-axes</i18n-msg> </label>
-            <input type="number" value-key="y" .value=${this.value.y} />
+            <input type="number" value-key="y" .value=${value.y} />
           `
             : html ``}
-      ${this.value.type == 'fade'
+      ${value.type == 'fade'
             ? html `
             <label> <i18n-msg msgid="label.start-alpha">start alpha</i18n-msg> </label>
-            <input type="number" value-key="startAlpha" .value=${this.value.startAlpha} />
+            <input type="number" value-key="startAlpha" .value=${value.startAlpha} />
 
             <label> <i18n-msg msgid="label.end-alpha">end alpha</i18n-msg> </label>
-            <input type="number" value-key="endAlpha" .value=${this.value.endAlpha} />
+            <input type="number" value-key="endAlpha" .value=${value.endAlpha} />
           `
             : html ``}
-      ${this.value.type == 'outline'
+      ${value.type == 'outline'
             ? html `
             <label> <i18n-msg msgid="label.target">target</i18n-msg> </label>
-            <input value-key="rideOn" .value=${this.value.rideOn || ''} list="target-list" />
+            <input value-key="rideOn" .value=${value.rideOn || ''} list="target-list" />
             <datalist id="target-list">
               ${this.scene.ids.map(info => info.key).map(id => html ` <option value=${id}></option> `)}
             </datalist>
           `
             : html ``}
 
-      <input id="checkbox-repeat" value-key="repeat" type="checkbox" .checked=${this.value.repeat} />
+      <input id="checkbox-repeat" value-key="repeat" type="checkbox" .checked=${value.repeat} />
       <label for="checkbox-repeat" class="checkbox-label"> <i18n-msg msgid="label.repeat">repeat</i18n-msg> </label>
 
       <label>delta</label>
-      <select value-key="delta" .value=${this.value.delta}>
+      <select value-key="delta" .value=${value.delta}>
         <option value="linear">linear</option>
         <option value="quad">quad</option>
         <option value="circ">circ</option>
@@ -97,7 +93,7 @@ let PropertyAnimation = class PropertyAnimation extends LitElement {
       </select>
 
       <label>ease</label>
-      <select value-key="ease" .value=${this.value.ease}>
+      <select value-key="ease" .value=${value.ease}>
         <option value="in">in</option>
         <option value="out">out</option>
         <option value="inout">inout</option>

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

@@ -1 +1 @@
-{"version":3,"file":"property-animation.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-animation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\nimport '@things-factory/modeller-ui/client/editors/things-editor-angle-input'\n\nimport { LitElement, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property } from 'lit/decorators'\n\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\n/**\n * 컴포넌트의 animation 속성을 편집하는 element\n\nExample:\n\n    <property-animation .value=${animation}>\n    </property-animation>\n*/\n\n@customElement('property-animation')\nexport default class PropertyAnimation 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    return html`\n      <label>Animation Type</label>\n      <select value-key=\"type\" .value=${this.value && this.value.type}>\n        <option value=\"\">None</option>\n        <option value=\"rotation\">Rotation</option>\n        <option value=\"vibration\">Vibration</option>\n        <option value=\"heartbeat\">Heartbeat</option>\n        <option value=\"moving\">Moving</option>\n        <option value=\"fade\">Fade</option>\n        <option value=\"outline\">Outline</option>\n      </select>\n\n      <label> <i18n-msg msgid=\"label.waiting-time\">waiting time</i18n-msg> </label>\n      <input type=\"number\" value-key=\"delay\" .value=${this.value.delay} placeholder=\"ms\" />\n\n      <label> <i18n-msg msgid=\"label.duration\">duration</i18n-msg> </label>\n      <input type=\"number\" value-key=\"duration\" .value=${this.value.duration} placeholder=\"ms\" />\n\n      ${this.value.type == 'rotation' || this.value.type == 'vibration'\n        ? html`\n            <label> <i18n-msg msgid=\"label.theta\">theta</i18n-msg> </label>\n            <things-editor-angle-input value-key=\"theta\" .radian=${this.value.theta}> </things-editor-angle-input>\n          `\n        : html``}\n      ${this.value.type == 'heartbeat'\n        ? html`\n            <label> <i18n-msg msgid=\"label.scale\">scale</i18n-msg> </label>\n            <input type=\"number\" value-key=\"scale\" .value=${this.value.scale} />\n          `\n        : html``}\n      ${this.value.type == 'moving'\n        ? html`\n            <label> <i18n-msg msgid=\"label.x-axes\">X-axes</i18n-msg> </label>\n            <input type=\"number\" value-key=\"x\" .value=${this.value.x} />\n\n            <label> <i18n-msg msgid=\"label.y-axes\">Y-axes</i18n-msg> </label>\n            <input type=\"number\" value-key=\"y\" .value=${this.value.y} />\n          `\n        : html``}\n      ${this.value.type == 'fade'\n        ? html`\n            <label> <i18n-msg msgid=\"label.start-alpha\">start alpha</i18n-msg> </label>\n            <input type=\"number\" value-key=\"startAlpha\" .value=${this.value.startAlpha} />\n\n            <label> <i18n-msg msgid=\"label.end-alpha\">end alpha</i18n-msg> </label>\n            <input type=\"number\" value-key=\"endAlpha\" .value=${this.value.endAlpha} />\n          `\n        : html``}\n      ${this.value.type == 'outline'\n        ? html`\n            <label> <i18n-msg msgid=\"label.target\">target</i18n-msg> </label>\n            <input value-key=\"rideOn\" .value=${this.value.rideOn || ''} list=\"target-list\" />\n            <datalist id=\"target-list\">\n              ${this.scene!.ids.map(info => info.key).map(id => html` <option value=${id}></option> `)}\n            </datalist>\n          `\n        : html``}\n\n      <input id=\"checkbox-repeat\" value-key=\"repeat\" type=\"checkbox\" .checked=${this.value.repeat} />\n      <label for=\"checkbox-repeat\" class=\"checkbox-label\"> <i18n-msg msgid=\"label.repeat\">repeat</i18n-msg> </label>\n\n      <label>delta</label>\n      <select value-key=\"delta\" .value=${this.value.delta}>\n        <option value=\"linear\">linear</option>\n        <option value=\"quad\">quad</option>\n        <option value=\"circ\">circ</option>\n        <option value=\"back\">back</option>\n        <option value=\"bounce\">bounce</option>\n        <option value=\"elastic\">elastic</option>\n      </select>\n\n      <label>ease</label>\n      <select value-key=\"ease\" .value=${this.value.ease}>\n        <option value=\"in\">in</option>\n        <option value=\"out\">out</option>\n        <option value=\"inout\">inout</option>\n      </select>\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-animation.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-animation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/dist/src/ox-input-angle'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\n/**\n * 컴포넌트의 animation 속성을 편집하는 element\n\nExample:\n\n    <property-animation .value=${animation}>\n    </property-animation>\n*/\n\n@customElement('property-animation')\nexport default class PropertyAnimation 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    const value = this.value || {}\n\n    return html`\n      <label>Animation Type</label>\n      <select value-key=\"type\" .value=${value.type}>\n        <option value=\"\">None</option>\n        <option value=\"rotation\">Rotation</option>\n        <option value=\"vibration\">Vibration</option>\n        <option value=\"heartbeat\">Heartbeat</option>\n        <option value=\"moving\">Moving</option>\n        <option value=\"fade\">Fade</option>\n        <option value=\"outline\">Outline</option>\n      </select>\n\n      <label> <i18n-msg msgid=\"label.waiting-time\">waiting time</i18n-msg> </label>\n      <input type=\"number\" value-key=\"delay\" .value=${value.delay} placeholder=\"ms\" />\n\n      <label> <i18n-msg msgid=\"label.duration\">duration</i18n-msg> </label>\n      <input type=\"number\" value-key=\"duration\" .value=${value.duration} placeholder=\"ms\" />\n\n      ${value.type == 'rotation' || value.type == 'vibration'\n        ? html`\n            <label> <i18n-msg msgid=\"label.theta\">theta</i18n-msg> </label>\n            <ox-input-angle value-key=\"theta\" .radian=${value.theta}> </ox-input-angle>\n          `\n        : html``}\n      ${value.type == 'heartbeat'\n        ? html`\n            <label> <i18n-msg msgid=\"label.scale\">scale</i18n-msg> </label>\n            <input type=\"number\" value-key=\"scale\" .value=${value.scale} />\n          `\n        : html``}\n      ${value.type == 'moving'\n        ? html`\n            <label> <i18n-msg msgid=\"label.x-axes\">X-axes</i18n-msg> </label>\n            <input type=\"number\" value-key=\"x\" .value=${value.x} />\n\n            <label> <i18n-msg msgid=\"label.y-axes\">Y-axes</i18n-msg> </label>\n            <input type=\"number\" value-key=\"y\" .value=${value.y} />\n          `\n        : html``}\n      ${value.type == 'fade'\n        ? html`\n            <label> <i18n-msg msgid=\"label.start-alpha\">start alpha</i18n-msg> </label>\n            <input type=\"number\" value-key=\"startAlpha\" .value=${value.startAlpha} />\n\n            <label> <i18n-msg msgid=\"label.end-alpha\">end alpha</i18n-msg> </label>\n            <input type=\"number\" value-key=\"endAlpha\" .value=${value.endAlpha} />\n          `\n        : html``}\n      ${value.type == 'outline'\n        ? html`\n            <label> <i18n-msg msgid=\"label.target\">target</i18n-msg> </label>\n            <input value-key=\"rideOn\" .value=${value.rideOn || ''} list=\"target-list\" />\n            <datalist id=\"target-list\">\n              ${this.scene!.ids.map(info => info.key).map(id => html` <option value=${id}></option> `)}\n            </datalist>\n          `\n        : html``}\n\n      <input id=\"checkbox-repeat\" value-key=\"repeat\" type=\"checkbox\" .checked=${value.repeat} />\n      <label for=\"checkbox-repeat\" class=\"checkbox-label\"> <i18n-msg msgid=\"label.repeat\">repeat</i18n-msg> </label>\n\n      <label>delta</label>\n      <select value-key=\"delta\" .value=${value.delta}>\n        <option value=\"linear\">linear</option>\n        <option value=\"quad\">quad</option>\n        <option value=\"circ\">circ</option>\n        <option value=\"back\">back</option>\n        <option value=\"bounce\">bounce</option>\n        <option value=\"elastic\">elastic</option>\n      </select>\n\n      <label>ease</label>\n      <select value-key=\"ease\" .value=${value.ease}>\n        <option value=\"in\">in</option>\n        <option value=\"out\">out</option>\n        <option value=\"inout\">inout</option>\n      </select>\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-animations.d.ts

@@ -1,6 +1,5 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@things-factory/i18n-base';
 import './property-animation';
 import '@material/mwc-icon';

package/dist/src/modeller/property-sidebar/effects/property-animations.js

@@ -2,23 +2,22 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import '@things-factory/i18n-base';
 import './property-animation';
 import '@material/mwc-icon';
-import { LitElement, css, html } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators';
 import { PropertySharedStyle } from '../property-shared-style';
 import { convert } from './value-converter';
 let PropertyAnimations = class PropertyAnimations extends LitElement {
     constructor() {
         super(...arguments);
-        this.value = {};
         this._expanded = false;
     }
     firstUpdated() {
         this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
     }
     render() {
+        const value = this.value || {};
         return html `
       <fieldset collapsable ?collapsed=${!this._expanded}>
         <legend>
@@ -31,7 +30,7 @@ let PropertyAnimations = class PropertyAnimations extends LitElement {
           >
         </legend>
 
-        <property-animation value-key="oncreate" .scene=${this.scene} .value=${this.value.oncreate || {}}>
+        <property-animation value-key="oncreate" .scene=${this.scene} .value=${value.oncreate || {}}>
         </property-animation>
       </fieldset>
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"property-animations.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-animations.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,2BAA2B,CAAA;AAClC,OAAO,sBAAsB,CAAA;AAC7B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAsB8B,UAAK,GAAe,EAAE,CAAA;QAGzC,cAAS,GAAY,KAAK,CAAA;IAwCrC,CAAC;IAtCC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;yCAC0B,CAAC,IAAI,CAAC,SAAS;;;;qBAInC,GAAG,EAAE;YACZ,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAA;QAClC,CAAC;eACE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa;;;;0DAIH,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,EAAE;;;KAGnG,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;SACxB,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;CACF,CAAA;AAhEQ,yBAAM,GAAG;IACd,mBAAmB;IACnB,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAc;AAEhC;IAAR,KAAK,EAAE;qDAA2B;AAzB/B,kBAAkB;IADvB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,kBAAkB,CAiEvB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\nimport './property-animation'\nimport '@material/mwc-icon'\n\nimport { LitElement, css, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property, state } from 'lit/decorators'\n\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-animations')\nclass PropertyAnimations extends LitElement {\n  static styles = [\n    PropertySharedStyle,\n    css`\n      fieldset[collapsable] legend {\n        box-sizing: border-box;\n        width: 100%;\n      }\n\n      fieldset[collapsable] legend mwc-icon {\n        float: right;\n        font-size: medium;\n        margin: 0;\n        cursor: pointer;\n      }\n\n      fieldset[collapsable][collapsed] > :not(legend) {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: Properties = {}\n  @property({ type: Object }) scene!: Scene\n\n  @state() _expanded: boolean = false\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    return html`\n      <fieldset collapsable ?collapsed=${!this._expanded}>\n        <legend>\n          <title-with-help topic=\"board-modeller/effects/animation\" msgid=\"label.animation\">animation</title-with-help>\n          <mwc-icon\n            @click=${() => {\n              this._expanded = !this._expanded\n            }}\n            >${this._expanded ? 'expand_less' : 'expand_more'}</mwc-icon\n          >\n        </legend>\n\n        <property-animation value-key=\"oncreate\" .scene=${this.scene} .value=${this.value.oncreate || {}}>\n        </property-animation>\n      </fieldset>\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-animations.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-animations.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,sBAAsB,CAAA;AAC7B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAI/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAyBW,cAAS,GAAY,KAAK,CAAA;IA0CrC,CAAC;IAxCC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;yCAC0B,CAAC,IAAI,CAAC,SAAS;;;;qBAInC,GAAG,EAAE;YACZ,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAA;QAClC,CAAC;eACE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa;;;;0DAIH,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,QAAQ,IAAI,EAAE;;;KAG9F,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;SACxB,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;CACF,CAAA;AAlEQ,yBAAM,GAAG;IACd,mBAAmB;IACnB,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAc;AAEhC;IAAR,KAAK,EAAE;qDAA2B;AAzB/B,kBAAkB;IADvB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,kBAAkB,CAmEvB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './property-animation'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-animations')\nclass PropertyAnimations extends LitElement {\n  static styles = [\n    PropertySharedStyle,\n    css`\n      fieldset[collapsable] legend {\n        box-sizing: border-box;\n        width: 100%;\n      }\n\n      fieldset[collapsable] legend mwc-icon {\n        float: right;\n        font-size: medium;\n        margin: 0;\n        cursor: pointer;\n      }\n\n      fieldset[collapsable][collapsed] > :not(legend) {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene!: Scene\n\n  @state() _expanded: boolean = false\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    const value = this.value || {}\n\n    return html`\n      <fieldset collapsable ?collapsed=${!this._expanded}>\n        <legend>\n          <title-with-help topic=\"board-modeller/effects/animation\" msgid=\"label.animation\">animation</title-with-help>\n          <mwc-icon\n            @click=${() => {\n              this._expanded = !this._expanded\n            }}\n            >${this._expanded ? 'expand_less' : 'expand_more'}</mwc-icon\n          >\n        </legend>\n\n        <property-animation value-key=\"oncreate\" .scene=${this.scene} .value=${value.oncreate || {}}>\n        </property-animation>\n      </fieldset>\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-hover.d.ts

@@ -1,4 +1,4 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@things-factory/i18n-base';
+import '@operato/input/dist/src/ox-input-data';