@operato/board 0.2.52 → 0.3.7

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 '@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"]}
+{"version":3,"file":"property-animation.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-animation.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAI3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAE3C;;;;;;;EAOE;AAGF,IAAqB,iBAAiB,GAAtC,MAAqB,iBAAkB,SAAQ,UAAU;IAMvD,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;;wCAEyB,KAAK,CAAC,IAAI;;;;;;;;;;;sDAWI,KAAK,CAAC,KAAK;;;yDAGR,KAAK,CAAC,QAAQ;;QAE/D,KAAK,CAAC,IAAI,IAAI,UAAU,IAAI,KAAK,CAAC,IAAI,IAAI,WAAW;YACrD,CAAC,CAAC,IAAI,CAAA;;wDAE0C,KAAK,CAAC,KAAK;WACxD;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,KAAK,CAAC,IAAI,IAAI,WAAW;YACzB,CAAC,CAAC,IAAI,CAAA;;4DAE8C,KAAK,CAAC,KAAK;WAC5D;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,KAAK,CAAC,IAAI,IAAI,QAAQ;YACtB,CAAC,CAAC,IAAI,CAAA;;wDAE0C,KAAK,CAAC,CAAC;;;wDAGP,KAAK,CAAC,CAAC;WACpD;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,KAAK,CAAC,IAAI,IAAI,MAAM;YACpB,CAAC,CAAC,IAAI,CAAA;;iEAEmD,KAAK,CAAC,UAAU;;;+DAGlB,KAAK,CAAC,QAAQ;WAClE;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,KAAK,CAAC,IAAI,IAAI,SAAS;YACvB,CAAC,CAAC,IAAI,CAAA;;+CAEiC,KAAK,CAAC,MAAM,IAAI,EAAE;;gBAEjD,IAAI,CAAC,KAAM,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,EAAE,aAAa,CAAC;;WAE3F;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;gFAEgE,KAAK,CAAC,MAAM;;;;yCAInD,KAAK,CAAC,KAAK;;;;;;;;;;wCAUZ,KAAK,CAAC,IAAI;;;;;KAK7C,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;AA3GQ,wBAAM,GAAG,CAAC,kBAAkB,CAAC,CAAA;AAER;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAc;AAJtB,iBAAiB;IADrC,aAAa,CAAC,oBAAoB,CAAC;GACf,iBAAiB,CA4GrC;eA5GoB,iBAAiB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-angle.js'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\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.js

@@ -4,8 +4,8 @@
 import { __decorate } from "tslib";
 import './property-animation';
 import '@material/mwc-icon';
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators';
+import { LitElement, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { PropertySharedStyle } from '../property-shared-style';
 import { convert } from './value-converter';
 let PropertyAnimations = class PropertyAnimations extends LitElement {

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,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"]}
+{"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,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,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 { LitElement, css, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property, state } from 'lit/decorators.js'\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 '@operato/input/dist/src/ox-input-data';
+import '@operato/input/ox-input-data.js';

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

@@ -2,9 +2,9 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import '@operato/input/dist/src/ox-input-data';
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import '@operato/input/ox-input-data.js';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { EffectsSharedStyle } from './effects-shared-style';
 import { convert } from './value-converter';
 let PropertyEventHover = class PropertyEventHover extends LitElement {

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

@@ -1 +1 @@
-{"version":3,"file":"property-event-hover.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-hover.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,uCAAuC,CAAA;AAE9C,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAExD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAMzC,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,IAAI,EAAE,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9E,OAAO,IAAI,CAAA;sFACuE,SAAS;;;;;;0DAMrC,MAAM,IAAI,EAAE;;;;;;;;;;;;QAY9D,MAAM,IAAI,OAAO;YACjB,CAAC,CAAC,IAAI,CAAA;;;uBAGS,MAAM;;;WAGlB;YACH,CAAC,CAAC,IAAI,CAAA;;;uBAGS,MAAM,IAAI,EAAE;;8BAEL,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;;;;gBAIzC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,mBAAmB,IAAI,aAAa,CAAC;;WAEtF;QACH,MAAM,IAAI,UAAU,IAAI,MAAM,IAAI,WAAW;YAC7C,CAAC,CAAC,IAAI,CAAA;;sDAEwC,KAAK;WAChD;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;kFAEkE,OAAO;;;;KAIpF,CAAA;IACH,CAAC;IAED,cAAc,CAAC,MAAc;QAC3B,QAAQ,MAAM,EAAE;YACd,KAAK,OAAO,CAAC;YACb,KAAK,MAAM;gBACT,OAAO,WAAW,CAAA;YACpB,KAAK,WAAW,CAAC;YACjB,KAAK,WAAW;gBACd,OAAO,0BAA0B,CAAA;YACnC;gBACE,OAAO,EAAE,CAAA;SACZ;IACH,CAAC;IAED,cAAc,CAAC,MAAc;QAC3B,QAAQ,MAAM,EAAE;YACd,KAAK,aAAa,CAAC;YACnB,KAAK,eAAe,CAAC;YACrB,KAAK,UAAU,CAAC;YAChB,KAAK,WAAW;gBACd,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,CAAA;gBACpE,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;gBACrB,OAAO,GAAG,CAAA;YACZ,KAAK,YAAY;gBACf,OAAO,CACL,CAAC,IAAI,CAAC,KAAK;oBACT,IAAI,CAAC,KAAK,CAAC,GAAG;yBACX,MAAM,CAAC,CAAC,CAAC,EAAE;wBACV,OAAO,IAAI,CAAC,KAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,aAAa,CAAA;oBACjE,CAAC,CAAC;yBACD,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;oBAC1B,EAAE,CACH,CAAA;YACH;gBACE,OAAO,EAAE,CAAA;SACZ;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;AArHQ,yBAAM,GAAG,CAAC,kBAAkB,CAAC,CAAA;AAER;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAc;AAJrC,kBAAkB;IADvB,aAAa,CAAC,sBAAsB,CAAC;GAChC,kBAAkB,CAsHvB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/dist/src/ox-input-data'\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@customElement('property-event-hover')\nclass PropertyEventHover extends LitElement {\n  static styles = [EffectsSharedStyle]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', emphasize, restore } = this.value || {}\n\n    return html`\n      <input id=\"checkbox-emphasize\" type=\"checkbox\" value-key=\"emphasize\" .checked=${emphasize} />\n      <label for=\"checkbox-emphasize\" class=\"checkbox-label\">\n        <i18n-msg msgid=\"label.emphasize\">emphasize</i18n-msg>\n      </label>\n\n      <label> <i18n-msg msgid=\"label.action\">action</i18n-msg> </label>\n      <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n        <option value=\"\"></option>\n        <option value=\"popup\">popup target board</option>\n        <option value=\"infoWindow\">open infowindow</option>\n        <option value=\"data-toggle\">toggle(true/false) target component data</option>\n        <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n        <option value=\"data-set\">set value to target component data</option>\n        <option value=\"value-set\">set value to target component value</option>\n      </select>\n\n      <label> <i18n-msg msgid=\"label.target\">target</i18n-msg> </label>\n\n      ${action == 'popup'\n        ? html`\n            <things-editor-board-selector\n              value-key=\"target\"\n              .value=${target}\n              custom-editor\n            ></things-editor-board-selector>\n          `\n        : html`\n            <input\n              value-key=\"target\"\n              .value=${target || ''}\n              list=\"target-list\"\n              .placeholder=\"${this._getPlaceHoder(action)}\"\n            />\n\n            <datalist id=\"target-list\">\n              ${this._getTargetList(action).map(item => html` <option .value=${item}></option> `)}\n            </datalist>\n          `}\n      ${action == 'data-set' || action == 'value-set'\n        ? html`\n            <label> <i18n-msg msgid=\"label.value\">value</i18n-msg> </label>\n            <ox-input-data value-key=\"value\" .value=${value} custom-editor fullwidth></ox-input-data>\n          `\n        : html``}\n\n      <input id=\"checkbox-restore\" type=\"checkbox\" value-key=\"restore\" .checked=${restore} />\n      <label for=\"checkbox-restore\" class=\"checkbox-label\">\n        <i18n-msg msgid=\"label.restore-on-leave\">restore on leave</i18n-msg>\n      </label>\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'popup':\n      case 'goto':\n        return 'SCENE-100'\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      default:\n        return ''\n    }\n  }\n\n  _getTargetList(action: string) {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n        let ids = (this.scene && this.scene.ids.map(i => `#${i.key}`)) || []\n        ids.unshift('(self)')\n        return ids\n      case 'infoWindow':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => `${i.key}`)) ||\n          []\n        )\n      default:\n        return []\n    }\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"property-event-hover.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-hover.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-event-hover')\nclass PropertyEventHover extends LitElement {\n  static styles = [EffectsSharedStyle]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var { action, value = '', target = '', emphasize, restore } = this.value || {}\n\n    return html`\n      <input id=\"checkbox-emphasize\" type=\"checkbox\" value-key=\"emphasize\" .checked=${emphasize} />\n      <label for=\"checkbox-emphasize\" class=\"checkbox-label\">\n        <i18n-msg msgid=\"label.emphasize\">emphasize</i18n-msg>\n      </label>\n\n      <label> <i18n-msg msgid=\"label.action\">action</i18n-msg> </label>\n      <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n        <option value=\"\"></option>\n        <option value=\"popup\">popup target board</option>\n        <option value=\"infoWindow\">open infowindow</option>\n        <option value=\"data-toggle\">toggle(true/false) target component data</option>\n        <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n        <option value=\"data-set\">set value to target component data</option>\n        <option value=\"value-set\">set value to target component value</option>\n      </select>\n\n      <label> <i18n-msg msgid=\"label.target\">target</i18n-msg> </label>\n\n      ${action == 'popup'\n        ? html`\n            <things-editor-board-selector\n              value-key=\"target\"\n              .value=${target}\n              custom-editor\n            ></things-editor-board-selector>\n          `\n        : html`\n            <input\n              value-key=\"target\"\n              .value=${target || ''}\n              list=\"target-list\"\n              .placeholder=\"${this._getPlaceHoder(action)}\"\n            />\n\n            <datalist id=\"target-list\">\n              ${this._getTargetList(action).map(item => html` <option .value=${item}></option> `)}\n            </datalist>\n          `}\n      ${action == 'data-set' || action == 'value-set'\n        ? html`\n            <label> <i18n-msg msgid=\"label.value\">value</i18n-msg> </label>\n            <ox-input-data value-key=\"value\" .value=${value} custom-editor fullwidth></ox-input-data>\n          `\n        : html``}\n\n      <input id=\"checkbox-restore\" type=\"checkbox\" value-key=\"restore\" .checked=${restore} />\n      <label for=\"checkbox-restore\" class=\"checkbox-label\">\n        <i18n-msg msgid=\"label.restore-on-leave\">restore on leave</i18n-msg>\n      </label>\n    `\n  }\n\n  _getPlaceHoder(action: string) {\n    switch (action) {\n      case 'popup':\n      case 'goto':\n        return 'SCENE-100'\n      case 'link-open':\n      case 'link-move':\n        return 'http://www.hatiolab.com/'\n      default:\n        return ''\n    }\n  }\n\n  _getTargetList(action: string) {\n    switch (action) {\n      case 'data-toggle':\n      case 'data-tristate':\n      case 'data-set':\n      case 'value-set':\n        let ids = (this.scene && this.scene.ids.map(i => `#${i.key}`)) || []\n        ids.unshift('(self)')\n        return ids\n      case 'infoWindow':\n        return (\n          (this.scene &&\n            this.scene.ids\n              .filter(i => {\n                return this.scene!.findById(i.key).get('type') == 'info-window'\n              })\n              .map(i => `${i.key}`)) ||\n          []\n        )\n      default:\n        return []\n    }\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

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

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

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

@@ -2,9 +2,9 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import '@operato/input/dist/src/ox-input-data';
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import '@operato/input/ox-input-data.js';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { EffectsSharedStyle } from './effects-shared-style';
 import { convert } from './value-converter';
 let PropertyEventTap = class PropertyEventTap extends LitElement {

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

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

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

@@ -4,8 +4,8 @@
 import { __decorate } from "tslib";
 import './property-event-hover';
 import './property-event-tap';
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { PropertySharedStyle } from '../property-shared-style';
 import { convert } from './value-converter';
 let PropertyEvent = class PropertyEvent extends LitElement {

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

@@ -1 +1 @@
-{"version":3,"file":"property-event.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,wBAAwB,CAAA;AAC/B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAIxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAMpC,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;;;;;;yDAM0C,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,KAAK,IAAI,EAAE;;;;;;;;;qDAS1C,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,GAAG,IAAI,EAAE;;KAEpF,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;AA/CQ,oBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAA;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc;AAJrC,aAAa;IADlB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,aAAa,CAgDlB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './property-event-hover'\nimport './property-event-tap'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } 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-event')\nclass PropertyEvent extends LitElement {\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 msgid=\"label.hover-event\" topic=\"board-modeller/effects/hover-event\"></title-with-help>\n        </legend>\n\n        <property-event-hover value-key=\"hover\" .scene=${this.scene} .value=${value.hover || {}}>\n        </property-event-hover>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help msgid=\"label.tap-event\" topic=\"board-modeller/effects/tap-event\"></title-with-help>\n        </legend>\n\n        <property-event-tap value-key=\"tap\" .scene=${this.scene} .value=${value.tap || {}}> </property-event-tap>\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-event.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,wBAAwB,CAAA;AAC/B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAMpC,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;;;;;;yDAM0C,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,KAAK,IAAI,EAAE;;;;;;;;;qDAS1C,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,GAAG,IAAI,EAAE;;KAEpF,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;AA/CQ,oBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAA;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc;AAJrC,aAAa;IADlB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,aAAa,CAgDlB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './property-event-hover'\nimport './property-event-tap'\n\nimport { LitElement, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-event')\nclass PropertyEvent extends LitElement {\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 msgid=\"label.hover-event\" topic=\"board-modeller/effects/hover-event\"></title-with-help>\n        </legend>\n\n        <property-event-hover value-key=\"hover\" .scene=${this.scene} .value=${value.hover || {}}>\n        </property-event-hover>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help msgid=\"label.tap-event\" topic=\"board-modeller/effects/tap-event\"></title-with-help>\n        </legend>\n\n        <property-event-tap value-key=\"tap\" .scene=${this.scene} .value=${value.tap || {}}> </property-event-tap>\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-shadow.js

@@ -4,7 +4,7 @@
 import { __decorate } from "tslib";
 import '@things-factory/modeller-ui/client/editors/things-editor-color';
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { customElement, property } from 'lit/decorators.js';
 import { convert } from './value-converter';
 /**
  * 컴포넌트의 그림자 속성을 편집하는 element
@@ -85,7 +85,7 @@ PropertyShadow.styles = [
 
       .icon-only-label {
         grid-column: span 3;
-        background: url(/assets/images/icon-properties-label.png) no-repeat;
+        background: var(--url-icon-properties-label) no-repeat;
         float: left;
         margin: 0;
         align-self: stretch;

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

@@ -1 +1 @@
-{"version":3,"file":"property-shadow.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-shadow.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,gEAAgE,CAAA;AAEvE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAIxD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAE3C;;;;;;;;GAQG;AAGH,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,UAAU;IAgDpD,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;;;qDAGsC,KAAK,CAAC,IAAI;;;;oDAIX,KAAK,CAAC,GAAG;;;;yDAIJ,KAAK,CAAC,QAAQ;;;;sDAIjB,KAAK,CAAC,KAAK;KAC5D,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;AAxFQ,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AA9C3B,cAAc;IADlC,aAAa,CAAC,iBAAiB,CAAC;GACZ,cAAc,CAyFlC;eAzFoB,cAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/modeller-ui/client/editors/things-editor-color'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators'\n\nimport { Properties } from '@hatiolab/things-scene'\n\nimport { convert } from './value-converter'\n\n/**\n * 컴포넌트의 그림자 속성을 편집하는 element\n *\n * Example:\n *  <property-shadow\n *    @change=\"${e => { this.shadow = e.target.value }}\"\n *    value=\"${this.shadow}\"\n *  ></property-shadow>\n */\n\n@customElement('property-shadow')\nexport default class PropertyShadow extends LitElement {\n  static styles = [\n    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[type='number'],\n      things-editor-color {\n        grid-column: span 7;\n      }\n      input[type='number'] {\n        border: var(--property-sidebar-fieldset-border);\n      }\n\n      .icon-only-label {\n        grid-column: span 3;\n        background: url(/assets/images/icon-properties-label.png) 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    `\n  ]\n\n  @property({ type: Object }) value?: Properties\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> <i18n-msg msgid=\"label.shadowOffsetX\">offset-X</i18n-msg> </label>\n\n      <input type=\"number\" value-key=\"left\" .value=${value.left} />\n\n      <label> <i18n-msg msgid=\"label.shadowOffsetY\">offset-Y</i18n-msg> </label>\n\n      <input type=\"number\" value-key=\"top\" .value=${value.top} />\n\n      <label> <i18n-msg msgid=\"label.shadowSize\">Size</i18n-msg> </label>\n\n      <input type=\"number\" value-key=\"blurSize\" .value=${value.blurSize} />\n\n      <label class=\"icon-only-label color\"></label>\n\n      <things-editor-color value-key=\"color\" .value=${value.color}> </things-editor-color>\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-shadow.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-shadow.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,gEAAgE,CAAA;AAEvE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAI3D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAE3C;;;;;;;;GAQG;AAGH,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,UAAU;IAgDpD,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;;;qDAGsC,KAAK,CAAC,IAAI;;;;oDAIX,KAAK,CAAC,GAAG;;;;yDAIJ,KAAK,CAAC,QAAQ;;;;sDAIjB,KAAK,CAAC,KAAK;KAC5D,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;AAxFQ,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AA9C3B,cAAc;IADlC,aAAa,CAAC,iBAAiB,CAAC;GACZ,cAAc,CAyFlC;eAzFoB,cAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/modeller-ui/client/editors/things-editor-color'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Properties } from '@hatiolab/things-scene'\n\nimport { convert } from './value-converter'\n\n/**\n * 컴포넌트의 그림자 속성을 편집하는 element\n *\n * Example:\n *  <property-shadow\n *    @change=\"${e => { this.shadow = e.target.value }}\"\n *    value=\"${this.shadow}\"\n *  ></property-shadow>\n */\n\n@customElement('property-shadow')\nexport default class PropertyShadow extends LitElement {\n  static styles = [\n    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[type='number'],\n      things-editor-color {\n        grid-column: span 7;\n      }\n      input[type='number'] {\n        border: var(--property-sidebar-fieldset-border);\n      }\n\n      .icon-only-label {\n        grid-column: span 3;\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    `\n  ]\n\n  @property({ type: Object }) value?: Properties\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> <i18n-msg msgid=\"label.shadowOffsetX\">offset-X</i18n-msg> </label>\n\n      <input type=\"number\" value-key=\"left\" .value=${value.left} />\n\n      <label> <i18n-msg msgid=\"label.shadowOffsetY\">offset-Y</i18n-msg> </label>\n\n      <input type=\"number\" value-key=\"top\" .value=${value.top} />\n\n      <label> <i18n-msg msgid=\"label.shadowSize\">Size</i18n-msg> </label>\n\n      <input type=\"number\" value-key=\"blurSize\" .value=${value.blurSize} />\n\n      <label class=\"icon-only-label color\"></label>\n\n      <things-editor-color value-key=\"color\" .value=${value.color}> </things-editor-color>\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/inspector/inspector.d.ts

@@ -1,6 +1,6 @@
-import { Component, Scene } from '@hatiolab/things-scene';
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import Sortable from 'sortablejs';
+import { Component, Scene } from '@hatiolab/things-scene';
 export default class SceneInspector extends LitElement {
     static styles: import("lit").CSSResult[];
     scene?: Scene;

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

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import Sortable from 'sortablejs';
 let SceneInspector = class SceneInspector extends LitElement {
     constructor() {
@@ -248,7 +248,7 @@ SceneInspector.styles = [
       .collapsed::before,
       .extended::before,
       .collapsespace::before {
-        background: url(/assets/images/icon-shell-inspector.png) no-repeat;
+        background: var(--url-icon-shell-inspector) no-repeat;
         width: 16px;
         height: 18px;
         display: inline-block;

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

@@ -1 +1 @@
-{"version":3,"file":"inspector.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/inspector/inspector.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAkC,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAExD,OAAO,QAAQ,MAAM,YAAY,CAAA;AAGjC,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,UAAU;IAAtD;;QAuFU,SAAI,GAAY,KAAK,CAAA;QAkE7B,mBAAc,GAAqB;YACjC,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE,GAAG;YACd,SAAS,EAAE,YAAY;YACvB,aAAa,EAAE,CAAC;YAChB,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;SAC/B,CAAA;IAgKH,CAAC;IAtOC,MAAM;QACJ,OAAO,IAAI,CAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAA;IACnF,CAAC;IAED,YAAY;QACV,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;QAClC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAA;QACpF,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAA;IAC5F,CAAC;IAED,OAAO,CAAC,MAA4B;QAClC,IAAI,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACvB,IAAI,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAU,CAAA;YAE3C,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;gBACxB,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;gBACvB,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;gBACpB,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;gBAEpB,OAAO,IAAI,CAAC,YAAY,CAAA;aACzB;YAED,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;gBACjC,oCAAoC;gBACpC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;gBAE3C,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,KAAkB,EAAE,MAAmB,EAAE,EAAE;oBACpE,IAAI,QAAQ,GAAG,KAAK,CAAA;oBAEpB,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;wBAC3B,IAAI,MAAM,GAAG,SAAS,CAAC,MAAM,CAAA;wBAC7B,OAAO,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;4BAC9C,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;4BAClC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;yBACvB;oBACH,CAAC,CAAC,CAAA;oBAEF,IAAI,CAAC,aAAa,EAAE,CAAA;gBACtB,CAAC,CAAC,CAAA;gBAEF,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE;oBAC5B,IAAI,CAAC,aAAa,EAAE,CAAA;gBACtB,CAAC,CAAC,CAAA;gBAEF,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE;oBACzB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,KAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;oBAC5C,IAAI,CAAC,aAAa,EAAE,CAAA;gBACtB,CAAC,CAAC,CAAA;gBAEF,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE;oBACzB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,KAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;oBAC5C,IAAI,CAAC,aAAa,EAAE,CAAA;gBACtB,CAAC,CAAC,CAAA;aACH;SACF;QAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBAChE,IAAI,QAAQ,CAAC,QAAuB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;YAC5D,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC;IAUD,MAAM,CAAC,CAAyB;QAC9B,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAM;QAEvB,IAAI,SAAS,GAAI,CAAC,CAAC,IAA+C,CAAC,SAAS,CAAA;QAC5E,IAAI,YAAY,GAAI,CAAC,CAAC,EAA6C,CAAC,SAAsB,CAAA;QAC1F,IAAI,QAAQ,GAAG,CAAC,CAAC,QAAS,GAAG,CAAC,CAAA;QAE9B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAA;QAElD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;QACjB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAClB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,OAAO,IAAI,CAAC,KAAK,CAAA;QACjB,OAAO,IAAI,CAAC,YAAY,CAAA;IAC1B,CAAC;IAED,QAAQ,CAAC,CAAa;QACpB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,aAAa,GAAG,CAAC,CAAC,MAAgD,CAAA;QACtE,IAAI,SAAS,GAAG,aAAa,CAAC,SAAS,CAAA;QACvC,IAAI,SAAS,CAAA;QAEb,OAAO,CAAC,SAAS,IAAI,aAAa,EAAE;YAClC,SAAS,GAAG,aAAa,CAAC,SAAS,CAAA;YAEnC,IAAI,SAAS;gBAAE,MAAK;YAEpB,aAAa,GAAG,aAAa,CAAC,UAAoD,CAAA;YAElF,IAAI,CAAC,aAAa,IAAI,aAAa,KAAK,IAAI,CAAC,UAAU;gBAAE,MAAK;SAC/D;QAED,IAAI,SAAS,EAAE;YACb,IAAI,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;gBAC7B,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;aAC7B;iBAAM,IAAI,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;gBAC5E,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAA;aAC/B;YAED,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;SAChC;aAAM;YACL,IAAI,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;gBACnC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;gBACtB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;aAC5C;SACF;QAED,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,WAAW,CAAC,CAAa;QACvB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,aAAa,GAAG,CAAC,CAAC,MAAgD,CAAA;QACtE,IAAI,SAAS,CAAA;QAEb,OAAO,CAAC,SAAS,IAAI,aAAa,EAAE;YAClC,SAAS,GAAG,aAAa,CAAC,SAAS,CAAA;YAEnC,IAAI,SAAS;gBAAE,MAAK;YAEpB,aAAa,GAAG,aAAa,CAAC,UAAoD,CAAA;YAElF,IAAI,CAAC,aAAa,IAAI,aAAa,KAAK,IAAI,CAAC,UAAU;gBAAE,MAAK;SAC/D;QAED,IAAI,SAAS,IAAI,SAAS,CAAC,WAAW,EAAE,EAAE;YACxC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAA;SAC/B;QAED,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,IAAI,WAAW;QACb,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,IAAI,OAAO,EAAE,CAAA;SAClC;QAED,OAAO,IAAI,CAAC,YAAY,CAAA;IAC1B,CAAC;IAED,kBAAkB,CAAC,SAAoB;QACrC,IAAI,SAAS,CAAC,WAAW,EAAE,IAAK,SAAuB,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;YAC7E,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAA;SACpE;aAAM;YACL,OAAO,eAAe,CAAA;SACvB;IACH,CAAC;IAED,UAAU,CAAC,SAAoB;QAC7B,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IAC1C,CAAC;IAED,cAAc,CAAC,SAAoB;QACjC,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAA;QAEzC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;SACnC;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,QAAQ,CAAC,CAAA;SAC3C;QAED,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,YAAY,CAAC,SAAoB;QAC/B,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;QAE1C,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,eAAe,CAAC,SAAoB;QAClC,IAAI,CAAC,KAAM,CAAC,QAAQ,GAAG,CAAC,SAAS,CAAC,CAAA;QAElC,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,eAAe,CAAC,SAAoB,EAAE,KAAa;;QACjD,IAAI,CAAC,SAAS,EAAE;YACd,OAAO,IAAI,CAAA,EAAE,CAAA;SACd;QAED,IAAI,QAAQ,GAAG,CAAC,SAAS,CAAC,WAAW,EAAE,IAAK,SAAuB,CAAC,UAAU,CAAC,IAAI,EAAE,CAAA;QACrF,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;QAEzD,OAAO,IAAI,CAAA;;;oBAGK,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,KAAI,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;qBACnD,SAAS;oBACV,SAAS,CAAC,WAAW,EAAE;;;YAG/B,KAAK,GAAG,CAAC;YACT,CAAC,CAAC,IAAI,CAAA;wCACsB,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,YAAY;uBAC1E,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;eACzB;YACH,CAAC,CAAC,IAAI,CAAA,SAAS,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,SAAS;;wBAEjC,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC;;+BAE3B,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,WAAW,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;YAC5F,CAAC,CAAC,IAAI,CAAA,wBAAwB,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU;YAC3D,CAAC,CAAC,IAAI,CAAA,EAAE;;;UAGV,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;;KAElE,CAAA;IACH,CAAC;CACF,CAAA;AA9TQ,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+EF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAc;AApFtB,cAAc;IADlC,aAAa,CAAC,iBAAiB,CAAC;GACZ,cAAc,CA+TlC;eA/ToB,cAAc","sourcesContent":["import { Component, Container, Properties, Scene } from '@hatiolab/things-scene'\nimport { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators'\n\nimport Sortable from 'sortablejs'\n\n@customElement('scene-inspector')\nexport default class SceneInspector extends LitElement {\n  static styles = [\n    css`\n      :host {\n        color: var(--scene-inspector-color);\n      }\n\n      .component {\n        display: block;\n        overflow: hidden;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n        font-size: 14px;\n      }\n\n      .component[selected] {\n        background-color: var(--scene-inspector-selected-background-color);\n        border-top: var(--scene-inspector-selected-border);\n        border-bottom: var(--scene-inspector-selected-border);\n      }\n      [selected] .type {\n        font-weight: bold;\n      }\n\n      span,\n      i {\n        display: inline-block;\n      }\n\n      span.type {\n        text-overflow: ellipses;\n      }\n\n      span.name {\n        background-color: var(--scene-inspector-name-background-color);\n        border-radius: var(--border-radius);\n        padding: 0 4px;\n        color: #fff;\n        font-size: 0.8em;\n      }\n\n      .eye {\n        margin: 0 0 0 5px;\n        vertical-align: middle;\n        opacity: 0.7;\n        font-size: 1.1em;\n        color: var(--scene-inspector-eye-icon-color);\n      }\n\n      .collapsed::before,\n      .extended::before,\n      .collapsespace::before {\n        background: url(/assets/images/icon-shell-inspector.png) no-repeat;\n        width: 16px;\n        height: 18px;\n        display: inline-block;\n        content: '';\n        opacity: 0.6;\n      }\n\n      .collapsed::before {\n        background-position: 100% -195px;\n      }\n\n      .extended::before {\n        background-position: 100% -295px;\n      }\n\n      .collapsespace::before {\n        background-position: 100% -395px;\n        opacity: 0.9;\n        width: 16px;\n      }\n      .collapsed,\n      .extended,\n      .collapsespace {\n        border-left: 1px dotted rgba(0, 0, 0, 0.1);\n      }\n\n      pre {\n        display: inline;\n      }\n    `\n  ]\n\n  @property({ type: Object }) scene?: Scene\n\n  private _extendedMap: any\n  private show: boolean = false\n\n  render() {\n    return html` ${!this.scene ? html`` : this.renderComponent(this.scene.root, 0)} `\n  }\n\n  firstUpdated() {\n    dispatchEvent(new Event('resize'))\n    this.renderRoot.addEventListener('click', this._onclick.bind(this) as EventListener)\n    this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this) as EventListener)\n  }\n\n  updated(change: PropertyValues<this>) {\n    if (change.has('scene')) {\n      let oldScene = change.get('scene') as Scene\n\n      if (oldScene) {\n        oldScene.off('selected')\n        oldScene.off('execute')\n        oldScene.off('undo')\n        oldScene.off('redo')\n\n        delete this._extendedMap\n      }\n\n      if (this.scene && this.scene.root) {\n        // root 는 기본상태가 extended 되도록 하기위해서임.\n        this.extendedMap.set(this.scene.root, true)\n\n        this.scene.on('selected', (after: Component[], before: Component[]) => {\n          let selected = after\n\n          selected.forEach(component => {\n            let parent = component.parent\n            while (parent && !this.extendedMap.get(parent)) {\n              this.extendedMap.set(parent, true)\n              parent = parent.parent\n            }\n          })\n\n          this.requestUpdate()\n        })\n\n        this.scene.on('execute', () => {\n          this.requestUpdate()\n        })\n\n        this.scene.on('undo', () => {\n          this.extendedMap.set(this.scene!.root, true)\n          this.requestUpdate()\n        })\n\n        this.scene.on('redo', () => {\n          this.extendedMap.set(this.scene!.root, true)\n          this.requestUpdate()\n        })\n      }\n    }\n\n    this.updateComplete.then(() => {\n      this.renderRoot.querySelectorAll('[sortable]').forEach(sortable => {\n        new Sortable(sortable as HTMLElement, this.sortableConfig)\n      })\n    })\n  }\n\n  sortableConfig: Sortable.Options = {\n    group: 'inspector',\n    animation: 150,\n    draggable: '.component',\n    swapThreshold: 1,\n    onSort: this.onSort.bind(this)\n  }\n\n  onSort(e: Sortable.SortableEvent) {\n    if (!this.scene) return\n\n    var component = (e.item as HTMLElement & { component: Component }).component\n    var to_container = (e.to as HTMLElement & { component: Component }).component as Container\n    var to_index = e.newIndex! - 1\n\n    this.scene.move(component, to_container, to_index)\n\n    this.show = false\n    this.updateComplete.then(() => {\n      this.show = true\n    })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    delete this.scene\n    delete this._extendedMap\n  }\n\n  _onclick(e: MouseEvent) {\n    e.stopPropagation()\n\n    var targetElement = e.target as HTMLElement & { component: Component }\n    var classList = targetElement.classList\n    var component\n\n    while (!component && targetElement) {\n      component = targetElement.component\n\n      if (component) break\n\n      targetElement = targetElement.parentNode as HTMLElement & { component: Component }\n\n      if (!targetElement || targetElement === this.renderRoot) break\n    }\n\n    if (component) {\n      if (classList.contains('eye')) {\n        this.toggleHidden(component)\n      } else if (classList.contains('extended') || classList.contains('collapsed')) {\n        this.toggleExtended(component)\n      }\n\n      this.selectComponent(component)\n    } else {\n      if (classList.contains('inspector')) {\n        this.show = !this.show\n        this.style.height = this.show ? '100%' : ''\n      }\n    }\n\n    this.requestUpdate()\n  }\n\n  _ondblclick(e: MouseEvent) {\n    e.stopPropagation()\n\n    var targetElement = e.target as HTMLElement & { component: Component }\n    var component\n\n    while (!component && targetElement) {\n      component = targetElement.component\n\n      if (component) break\n\n      targetElement = targetElement.parentNode as HTMLElement & { component: Component }\n\n      if (!targetElement || targetElement === this.renderRoot) break\n    }\n\n    if (component && component.isContainer()) {\n      this.toggleExtended(component)\n    }\n\n    this.requestUpdate()\n  }\n\n  get extendedMap() {\n    if (!this._extendedMap) {\n      this._extendedMap = new WeakMap()\n    }\n\n    return this._extendedMap\n  }\n\n  getNodeHandleClass(component: Component) {\n    if (component.isContainer() && (component as Container).components.length > 0) {\n      return !!this.extendedMap.get(component) ? 'extended' : 'collapsed'\n    } else {\n      return 'collapsespace'\n    }\n  }\n\n  isExtended(component: Component) {\n    return !!this.extendedMap.get(component)\n  }\n\n  toggleExtended(component: Component) {\n    var extended = this.isExtended(component)\n\n    if (extended) {\n      this.extendedMap.delete(component)\n    } else {\n      this.extendedMap.set(component, !extended)\n    }\n\n    this.requestUpdate()\n  }\n\n  toggleHidden(component: Component) {\n    component.set('hidden', !component.hidden)\n\n    this.requestUpdate()\n  }\n\n  selectComponent(component: Component) {\n    this.scene!.selected = [component]\n\n    this.requestUpdate()\n  }\n\n  renderComponent(component: Component, depth: number): TemplateResult {\n    if (!component) {\n      return html``\n    }\n\n    var children = (component.isContainer() && (component as Container).components) || []\n    var extended = this.isExtended(component) ? children : []\n\n    return html`\n      <div\n        class=\"component\"\n        ?selected=${(this.scene?.selected || []).indexOf(component) > -1}\n        .component=${component}\n        ?sortable=${component.isContainer()}\n      >\n        <span>\n          ${depth > 0\n            ? html`\n                <mwc-icon class=\"eye\">${component.get('hidden') ? 'visibility_off' : 'visibility'}</mwc-icon>\n                <pre>${' '.repeat(depth)}</pre>\n              `\n            : html` <pre>${' '.repeat(depth + 2)}</pre> `}\n\n          <span class=${this.getNodeHandleClass(component)}> </span>\n\n          <span class=\"type\">${depth == 0 ? 'ROOT' : component.get('type')}</span> ${component.get('id')\n            ? html` <span class=\"name\">#${component.get('id')}</span> `\n            : html``}\n        </span>\n\n        ${extended.map(child => this.renderComponent(child, depth + 1))}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"inspector.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/inspector/inspector.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport Sortable from 'sortablejs'\n\nimport { Component, Container, Scene } from '@hatiolab/things-scene'\n\n@customElement('scene-inspector')\nexport default class SceneInspector extends LitElement {\n  static styles = [\n    css`\n      :host {\n        color: var(--scene-inspector-color);\n      }\n\n      .component {\n        display: block;\n        overflow: hidden;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n        font-size: 14px;\n      }\n\n      .component[selected] {\n        background-color: var(--scene-inspector-selected-background-color);\n        border-top: var(--scene-inspector-selected-border);\n        border-bottom: var(--scene-inspector-selected-border);\n      }\n      [selected] .type {\n        font-weight: bold;\n      }\n\n      span,\n      i {\n        display: inline-block;\n      }\n\n      span.type {\n        text-overflow: ellipses;\n      }\n\n      span.name {\n        background-color: var(--scene-inspector-name-background-color);\n        border-radius: var(--border-radius);\n        padding: 0 4px;\n        color: #fff;\n        font-size: 0.8em;\n      }\n\n      .eye {\n        margin: 0 0 0 5px;\n        vertical-align: middle;\n        opacity: 0.7;\n        font-size: 1.1em;\n        color: var(--scene-inspector-eye-icon-color);\n      }\n\n      .collapsed::before,\n      .extended::before,\n      .collapsespace::before {\n        background: var(--url-icon-shell-inspector) no-repeat;\n        width: 16px;\n        height: 18px;\n        display: inline-block;\n        content: '';\n        opacity: 0.6;\n      }\n\n      .collapsed::before {\n        background-position: 100% -195px;\n      }\n\n      .extended::before {\n        background-position: 100% -295px;\n      }\n\n      .collapsespace::before {\n        background-position: 100% -395px;\n        opacity: 0.9;\n        width: 16px;\n      }\n      .collapsed,\n      .extended,\n      .collapsespace {\n        border-left: 1px dotted rgba(0, 0, 0, 0.1);\n      }\n\n      pre {\n        display: inline;\n      }\n    `\n  ]\n\n  @property({ type: Object }) scene?: Scene\n\n  private _extendedMap: any\n  private show: boolean = false\n\n  render() {\n    return html` ${!this.scene ? html`` : this.renderComponent(this.scene.root, 0)} `\n  }\n\n  firstUpdated() {\n    dispatchEvent(new Event('resize'))\n    this.renderRoot.addEventListener('click', this._onclick.bind(this) as EventListener)\n    this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this) as EventListener)\n  }\n\n  updated(change: PropertyValues<this>) {\n    if (change.has('scene')) {\n      let oldScene = change.get('scene') as Scene\n\n      if (oldScene) {\n        oldScene.off('selected')\n        oldScene.off('execute')\n        oldScene.off('undo')\n        oldScene.off('redo')\n\n        delete this._extendedMap\n      }\n\n      if (this.scene && this.scene.root) {\n        // root 는 기본상태가 extended 되도록 하기위해서임.\n        this.extendedMap.set(this.scene.root, true)\n\n        this.scene.on('selected', (after: Component[], before: Component[]) => {\n          let selected = after\n\n          selected.forEach(component => {\n            let parent = component.parent\n            while (parent && !this.extendedMap.get(parent)) {\n              this.extendedMap.set(parent, true)\n              parent = parent.parent\n            }\n          })\n\n          this.requestUpdate()\n        })\n\n        this.scene.on('execute', () => {\n          this.requestUpdate()\n        })\n\n        this.scene.on('undo', () => {\n          this.extendedMap.set(this.scene!.root, true)\n          this.requestUpdate()\n        })\n\n        this.scene.on('redo', () => {\n          this.extendedMap.set(this.scene!.root, true)\n          this.requestUpdate()\n        })\n      }\n    }\n\n    this.updateComplete.then(() => {\n      this.renderRoot.querySelectorAll('[sortable]').forEach(sortable => {\n        new Sortable(sortable as HTMLElement, this.sortableConfig)\n      })\n    })\n  }\n\n  sortableConfig: Sortable.Options = {\n    group: 'inspector',\n    animation: 150,\n    draggable: '.component',\n    swapThreshold: 1,\n    onSort: this.onSort.bind(this)\n  }\n\n  onSort(e: Sortable.SortableEvent) {\n    if (!this.scene) return\n\n    var component = (e.item as HTMLElement & { component: Component }).component\n    var to_container = (e.to as HTMLElement & { component: Component }).component as Container\n    var to_index = e.newIndex! - 1\n\n    this.scene.move(component, to_container, to_index)\n\n    this.show = false\n    this.updateComplete.then(() => {\n      this.show = true\n    })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    delete this.scene\n    delete this._extendedMap\n  }\n\n  _onclick(e: MouseEvent) {\n    e.stopPropagation()\n\n    var targetElement = e.target as HTMLElement & { component: Component }\n    var classList = targetElement.classList\n    var component\n\n    while (!component && targetElement) {\n      component = targetElement.component\n\n      if (component) break\n\n      targetElement = targetElement.parentNode as HTMLElement & { component: Component }\n\n      if (!targetElement || targetElement === this.renderRoot) break\n    }\n\n    if (component) {\n      if (classList.contains('eye')) {\n        this.toggleHidden(component)\n      } else if (classList.contains('extended') || classList.contains('collapsed')) {\n        this.toggleExtended(component)\n      }\n\n      this.selectComponent(component)\n    } else {\n      if (classList.contains('inspector')) {\n        this.show = !this.show\n        this.style.height = this.show ? '100%' : ''\n      }\n    }\n\n    this.requestUpdate()\n  }\n\n  _ondblclick(e: MouseEvent) {\n    e.stopPropagation()\n\n    var targetElement = e.target as HTMLElement & { component: Component }\n    var component\n\n    while (!component && targetElement) {\n      component = targetElement.component\n\n      if (component) break\n\n      targetElement = targetElement.parentNode as HTMLElement & { component: Component }\n\n      if (!targetElement || targetElement === this.renderRoot) break\n    }\n\n    if (component && component.isContainer()) {\n      this.toggleExtended(component)\n    }\n\n    this.requestUpdate()\n  }\n\n  get extendedMap() {\n    if (!this._extendedMap) {\n      this._extendedMap = new WeakMap()\n    }\n\n    return this._extendedMap\n  }\n\n  getNodeHandleClass(component: Component) {\n    if (component.isContainer() && (component as Container).components.length > 0) {\n      return !!this.extendedMap.get(component) ? 'extended' : 'collapsed'\n    } else {\n      return 'collapsespace'\n    }\n  }\n\n  isExtended(component: Component) {\n    return !!this.extendedMap.get(component)\n  }\n\n  toggleExtended(component: Component) {\n    var extended = this.isExtended(component)\n\n    if (extended) {\n      this.extendedMap.delete(component)\n    } else {\n      this.extendedMap.set(component, !extended)\n    }\n\n    this.requestUpdate()\n  }\n\n  toggleHidden(component: Component) {\n    component.set('hidden', !component.hidden)\n\n    this.requestUpdate()\n  }\n\n  selectComponent(component: Component) {\n    this.scene!.selected = [component]\n\n    this.requestUpdate()\n  }\n\n  renderComponent(component: Component, depth: number): TemplateResult {\n    if (!component) {\n      return html``\n    }\n\n    var children = (component.isContainer() && (component as Container).components) || []\n    var extended = this.isExtended(component) ? children : []\n\n    return html`\n      <div\n        class=\"component\"\n        ?selected=${(this.scene?.selected || []).indexOf(component) > -1}\n        .component=${component}\n        ?sortable=${component.isContainer()}\n      >\n        <span>\n          ${depth > 0\n            ? html`\n                <mwc-icon class=\"eye\">${component.get('hidden') ? 'visibility_off' : 'visibility'}</mwc-icon>\n                <pre>${' '.repeat(depth)}</pre>\n              `\n            : html` <pre>${' '.repeat(depth + 2)}</pre> `}\n\n          <span class=${this.getNodeHandleClass(component)}> </span>\n\n          <span class=\"type\">${depth == 0 ? 'ROOT' : component.get('type')}</span> ${component.get('id')\n            ? html` <span class=\"name\">#${component.get('id')}</span> `\n            : html``}\n        </span>\n\n        ${extended.map(child => this.renderComponent(child, depth + 1))}\n      </div>\n    `\n  }\n}\n"]}

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

@@ -100,7 +100,7 @@ export const PropertySharedStyle = css `
   .icon-only-label {
     grid-column: span 1;
 
-    background: url(/assets/images/icon-properties-label.png) no-repeat;
+    background: var(--url-icon-properties-label) no-repeat;
     float: left;
     margin: 0;
     align-self: stretch;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrC,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);\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);\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  /* 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 > things-editor-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 > .property-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 > .property-half-input {\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: url(/assets/images/icon-properties-label.png) 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrC,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);\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);\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  /* 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 > things-editor-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 > .property-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 > .property-half-input {\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/modeller/property-sidebar/property-sidebar.js

@@ -9,10 +9,10 @@ import './effects/effects';
 import './specifics/specifics';
 import './data-binding/data-binding';
 import './inspector/inspector';
-import { LitElement, css, html } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ScrollbarStyles } from '@operato/styles';
 import deepClone from 'lodash/cloneDeep';
+import { ScrollbarStyles } from '@operato/styles';
 let PropertySidebar = class PropertySidebar extends LitElement {
     constructor() {
         super(...arguments);

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

@@ -1 +1 @@
-{"version":3,"file":"property-sidebar.js","sourceRoot":"","sources":["../../../../src/modeller/property-sidebar/property-sidebar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport './shapes/shapes'\nimport './styles/styles'\nimport './effects/effects'\nimport './specifics/specifics'\nimport './data-binding/data-binding'\nimport './inspector/inspector'\n\nimport { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport deepClone from 'lodash/cloneDeep'\n\n@customElement('property-sidebar')\nclass PropertySidebar extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        border-left: 1px solid var(--paper-blue-grey-100);\n        width: 270px;\n        display: flex;\n        flex-direction: column;\n        background-color: var(--property-sidebar-background-color);\n        user-select: none;\n      }\n\n      [tab] {\n        display: flex;\n        background-color: rgba(0, 0, 0, 0.08);\n        opacity: 0.85;\n      }\n\n      [tab] mwc-icon {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--property-sidebar-tab-icon-color);\n        height: 40px;\n      }\n\n      [tab] [selected] {\n        background-color: var(--property-sidebar-background-color);\n        border-left: 1px solid rgba(255, 255, 255, 0.5);\n        border-right: 1px solid rgba(0, 0, 0, 0.15);\n        opacity: 1;\n      }\n\n      [content] {\n        flex: 1;\n\n        overflow: hidden;\n        overflow-y: auto;\n      }\n\n      [content] > :not([active]) {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: Object }) bounds: any = {}\n  @property({ type: Object }) model: Model | null = {}\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) specificProps: any\n  @property({ type: String }) tabName: string | null = 'shape'\n  @property({ type: Boolean }) collapsed: boolean = false\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  propertyTarget: Component | null = null\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('property-change', this._onPropertyChanged.bind(this) as EventListener)\n    this.renderRoot.addEventListener('bounds-change', this._onBoundsChanged.bind(this) as EventListener)\n  }\n\n  updated(change: PropertyValues<this>) {\n    change.has('scene') && this._onSceneChanged()\n    change.has('selected') && this._onSelectedChanged(this.selected)\n    change.has('collapsed') && this._onCollapsed(this.collapsed)\n  }\n\n  render() {\n    var tabName = this.tabName ? this.tabName : 'shape'\n\n    return html`\n      <div\n        tab\n        @click=${(e: MouseEvent) => {\n          this.tabName = (e.target as HTMLElement).getAttribute('name')\n        }}\n      >\n        <mwc-icon name=\"shape\" ?selected=${tabName == 'shape'}>format_shapes</mwc-icon>\n        <mwc-icon name=\"style\" ?selected=${tabName == 'style'}>palette</mwc-icon>\n        <mwc-icon name=\"effect\" ?selected=${tabName == 'effect'}>movie_filter</mwc-icon>\n        <mwc-icon name=\"specific\" ?selected=${tabName == 'specific'}>tune</mwc-icon>\n        <mwc-icon name=\"data-binding\" ?selected=${tabName == 'data-binding'}>share</mwc-icon>\n        <mwc-icon name=\"inspector\" ?selected=${tabName == 'inspector'}>visibility</mwc-icon>\n      </div>\n\n      <div content>\n        ${html`\n          ${{\n            shape: html`\n              <property-shape\n                .value=${this.model}\n                .bounds=${this.bounds}\n                .selected=${this.selected}\n                ?active=${tabName == 'shape'}\n              >\n              </property-shape>\n            `,\n            style: html`\n              <property-style\n                .value=${this.model}\n                .selected=${this.selected}\n                .fonts=${this.fonts}\n                ?active=${tabName == 'style'}\n              >\n              </property-style>\n            `,\n            effect: html`\n              <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>\n              </property-effect>\n            `,\n            specific: html`\n              <property-specific\n                .value=${this.model}\n                .scene=${this.scene}\n                .selected=${this.selected}\n                .props=${this.specificProps}\n                .propertyEditor=${this.propertyEditor}\n                ?active=${tabName == 'specific'}\n              >\n              </property-specific>\n            `,\n            'data-binding': html`\n              <property-data-binding .scene=${this.scene} .value=${this.model} ?active=${tabName == 'data-binding'}>\n              </property-data-binding>\n            `,\n            inspector: html`\n              <scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></scene-inspector>\n            `\n          }[this.tabName!]}\n        `}\n      </div>\n    `\n  }\n\n  _onPropertyChanged(e: CustomEvent) {\n    var detail = e.detail\n\n    if (this.propertyTarget) {\n      /* 단일 컴포넌트의 경우에 적용 */\n      this.scene && this.scene.undoableChange(() => this.propertyTarget!.set(detail))\n    } else {\n      /* 여러 컴포넌트의 경우에 적용 */\n      this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)))\n    }\n  }\n\n  _onBoundsChanged(e: CustomEvent) {\n    var detail = e.detail\n\n    if (!this.scene) {\n      return\n    }\n\n    if (this.propertyTarget) {\n      /* 단일 컴포넌트의 경우에 적용 */\n      this.scene.undoableChange(() => {\n        this.propertyTarget!.bounds = {\n          ...this.propertyTarget!.bounds,\n          ...detail\n        }\n      })\n    } else {\n      /* 여러 컴포넌트의 경우에 적용 */\n      this.scene.undoableChange(() => {\n        this.selected.forEach(component => {\n          component.bounds = {\n            ...component.bounds,\n            ...detail\n          }\n        })\n      })\n    }\n  }\n\n  _onChangedByScene() {\n    if (this.propertyTarget)\n      this.model = {\n        ...this.propertyTarget.model\n      }\n  }\n\n  _setPropertyTargetAsDefault() {\n    if (!this.scene) {\n      this._setPropertyTarget(null)\n      this.specificProps = []\n      this.model = null\n      this.bounds = {}\n    } else {\n      this.scene.select('model-layer')\n    }\n  }\n\n  _onCollapsed(collapsed: boolean) {\n    !collapsed && (this.style.display = '')\n\n    this.animate(\n      collapsed\n        ? [\n            { transform: 'translateX(0)', opacity: 1, easing: 'ease-in' },\n            { transform: 'translateX(100%)', opacity: 1 }\n          ]\n        : [\n            { transform: 'translateX(100%)', opacity: 1 },\n            { transform: 'translateX(0)', opacity: 1, easing: 'ease-out' }\n          ],\n      {\n        duration: 500\n      }\n    ).onfinish = () => {\n      collapsed && (this.style.display = 'none')\n      dispatchEvent(new Event('resize'))\n    }\n  }\n\n  async _onSceneChanged() {\n    await this.updateComplete\n\n    if (this.scene) this.selected = this.scene.select('model-layer')\n  }\n\n  async _onSelectedChanged(after: Component[]) {\n    await this.updateComplete\n\n    if (after.length == 1) {\n      this._setPropertyTarget(after[0])\n      // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.\n      // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.\n      this.specificProps = deepClone(this.propertyTarget!.nature.properties)\n      this.model = {\n        ...this.propertyTarget!.model\n      }\n      this._setBounds(this.propertyTarget!.bounds)\n    } else if (after.length == 0) {\n      // 선택이 안된 경우\n\n      this._setPropertyTargetAsDefault()\n    } else {\n      // 다중 선택된 경우\n\n      var type = after[0].model.type\n      for (let i = 1; i < after.length; i++) {\n        if (after[i].model.type != type) {\n          type = undefined\n          break\n        }\n      }\n\n      this._setPropertyTarget(null)\n\n      if (type) this.specificProps = deepClone(after[0].nature.properties)\n      else this.specificProps = null\n\n      this.model = {\n        type: type,\n        alpha: 1\n      }\n      this.bounds = {}\n    }\n  }\n\n  _setPropertyTarget(newTarget: Component | null) {\n    var oldTarget = this.propertyTarget\n\n    if (oldTarget) {\n      oldTarget.off('change', this._onChangedByScene, this)\n    }\n    if (newTarget) {\n      newTarget.on('change', this._onChangedByScene, this)\n    }\n\n    this.propertyTarget = newTarget\n  }\n\n  _setBounds(bounds: BOUNDS) {\n    this.bounds = {\n      left: bounds.left,\n      top: bounds.top,\n      width: Math.round(bounds.width),\n      height: Math.round(bounds.height)\n    }\n  }\n}\n"]}
+{"version":3,"file":"property-sidebar.js","sourceRoot":"","sources":["../../../../src/modeller/property-sidebar/property-sidebar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport './shapes/shapes'\nimport './styles/styles'\nimport './effects/effects'\nimport './specifics/specifics'\nimport './data-binding/data-binding'\nimport './inspector/inspector'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport deepClone from 'lodash/cloneDeep'\n\nimport { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('property-sidebar')\nclass PropertySidebar extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        border-left: 1px solid var(--paper-blue-grey-100);\n        width: 270px;\n        display: flex;\n        flex-direction: column;\n        background-color: var(--property-sidebar-background-color);\n        user-select: none;\n      }\n\n      [tab] {\n        display: flex;\n        background-color: rgba(0, 0, 0, 0.08);\n        opacity: 0.85;\n      }\n\n      [tab] mwc-icon {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--property-sidebar-tab-icon-color);\n        height: 40px;\n      }\n\n      [tab] [selected] {\n        background-color: var(--property-sidebar-background-color);\n        border-left: 1px solid rgba(255, 255, 255, 0.5);\n        border-right: 1px solid rgba(0, 0, 0, 0.15);\n        opacity: 1;\n      }\n\n      [content] {\n        flex: 1;\n\n        overflow: hidden;\n        overflow-y: auto;\n      }\n\n      [content] > :not([active]) {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: Object }) bounds: any = {}\n  @property({ type: Object }) model: Model | null = {}\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) specificProps: any\n  @property({ type: String }) tabName: string | null = 'shape'\n  @property({ type: Boolean }) collapsed: boolean = false\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  propertyTarget: Component | null = null\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('property-change', this._onPropertyChanged.bind(this) as EventListener)\n    this.renderRoot.addEventListener('bounds-change', this._onBoundsChanged.bind(this) as EventListener)\n  }\n\n  updated(change: PropertyValues<this>) {\n    change.has('scene') && this._onSceneChanged()\n    change.has('selected') && this._onSelectedChanged(this.selected)\n    change.has('collapsed') && this._onCollapsed(this.collapsed)\n  }\n\n  render() {\n    var tabName = this.tabName ? this.tabName : 'shape'\n\n    return html`\n      <div\n        tab\n        @click=${(e: MouseEvent) => {\n          this.tabName = (e.target as HTMLElement).getAttribute('name')\n        }}\n      >\n        <mwc-icon name=\"shape\" ?selected=${tabName == 'shape'}>format_shapes</mwc-icon>\n        <mwc-icon name=\"style\" ?selected=${tabName == 'style'}>palette</mwc-icon>\n        <mwc-icon name=\"effect\" ?selected=${tabName == 'effect'}>movie_filter</mwc-icon>\n        <mwc-icon name=\"specific\" ?selected=${tabName == 'specific'}>tune</mwc-icon>\n        <mwc-icon name=\"data-binding\" ?selected=${tabName == 'data-binding'}>share</mwc-icon>\n        <mwc-icon name=\"inspector\" ?selected=${tabName == 'inspector'}>visibility</mwc-icon>\n      </div>\n\n      <div content>\n        ${html`\n          ${{\n            shape: html`\n              <property-shape\n                .value=${this.model}\n                .bounds=${this.bounds}\n                .selected=${this.selected}\n                ?active=${tabName == 'shape'}\n              >\n              </property-shape>\n            `,\n            style: html`\n              <property-style\n                .value=${this.model}\n                .selected=${this.selected}\n                .fonts=${this.fonts}\n                ?active=${tabName == 'style'}\n              >\n              </property-style>\n            `,\n            effect: html`\n              <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>\n              </property-effect>\n            `,\n            specific: html`\n              <property-specific\n                .value=${this.model}\n                .scene=${this.scene}\n                .selected=${this.selected}\n                .props=${this.specificProps}\n                .propertyEditor=${this.propertyEditor}\n                ?active=${tabName == 'specific'}\n              >\n              </property-specific>\n            `,\n            'data-binding': html`\n              <property-data-binding .scene=${this.scene} .value=${this.model} ?active=${tabName == 'data-binding'}>\n              </property-data-binding>\n            `,\n            inspector: html`\n              <scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></scene-inspector>\n            `\n          }[this.tabName!]}\n        `}\n      </div>\n    `\n  }\n\n  _onPropertyChanged(e: CustomEvent) {\n    var detail = e.detail\n\n    if (this.propertyTarget) {\n      /* 단일 컴포넌트의 경우에 적용 */\n      this.scene && this.scene.undoableChange(() => this.propertyTarget!.set(detail))\n    } else {\n      /* 여러 컴포넌트의 경우에 적용 */\n      this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)))\n    }\n  }\n\n  _onBoundsChanged(e: CustomEvent) {\n    var detail = e.detail\n\n    if (!this.scene) {\n      return\n    }\n\n    if (this.propertyTarget) {\n      /* 단일 컴포넌트의 경우에 적용 */\n      this.scene.undoableChange(() => {\n        this.propertyTarget!.bounds = {\n          ...this.propertyTarget!.bounds,\n          ...detail\n        }\n      })\n    } else {\n      /* 여러 컴포넌트의 경우에 적용 */\n      this.scene.undoableChange(() => {\n        this.selected.forEach(component => {\n          component.bounds = {\n            ...component.bounds,\n            ...detail\n          }\n        })\n      })\n    }\n  }\n\n  _onChangedByScene() {\n    if (this.propertyTarget)\n      this.model = {\n        ...this.propertyTarget.model\n      }\n  }\n\n  _setPropertyTargetAsDefault() {\n    if (!this.scene) {\n      this._setPropertyTarget(null)\n      this.specificProps = []\n      this.model = null\n      this.bounds = {}\n    } else {\n      this.scene.select('model-layer')\n    }\n  }\n\n  _onCollapsed(collapsed: boolean) {\n    !collapsed && (this.style.display = '')\n\n    this.animate(\n      collapsed\n        ? [\n            { transform: 'translateX(0)', opacity: 1, easing: 'ease-in' },\n            { transform: 'translateX(100%)', opacity: 1 }\n          ]\n        : [\n            { transform: 'translateX(100%)', opacity: 1 },\n            { transform: 'translateX(0)', opacity: 1, easing: 'ease-out' }\n          ],\n      {\n        duration: 500\n      }\n    ).onfinish = () => {\n      collapsed && (this.style.display = 'none')\n      dispatchEvent(new Event('resize'))\n    }\n  }\n\n  async _onSceneChanged() {\n    await this.updateComplete\n\n    if (this.scene) this.selected = this.scene.select('model-layer')\n  }\n\n  async _onSelectedChanged(after: Component[]) {\n    await this.updateComplete\n\n    if (after.length == 1) {\n      this._setPropertyTarget(after[0])\n      // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.\n      // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.\n      this.specificProps = deepClone(this.propertyTarget!.nature.properties)\n      this.model = {\n        ...this.propertyTarget!.model\n      }\n      this._setBounds(this.propertyTarget!.bounds)\n    } else if (after.length == 0) {\n      // 선택이 안된 경우\n\n      this._setPropertyTargetAsDefault()\n    } else {\n      // 다중 선택된 경우\n\n      var type = after[0].model.type\n      for (let i = 1; i < after.length; i++) {\n        if (after[i].model.type != type) {\n          type = undefined\n          break\n        }\n      }\n\n      this._setPropertyTarget(null)\n\n      if (type) this.specificProps = deepClone(after[0].nature.properties)\n      else this.specificProps = null\n\n      this.model = {\n        type: type,\n        alpha: 1\n      }\n      this.bounds = {}\n    }\n  }\n\n  _setPropertyTarget(newTarget: Component | null) {\n    var oldTarget = this.propertyTarget\n\n    if (oldTarget) {\n      oldTarget.off('change', this._onChangedByScene, this)\n    }\n    if (newTarget) {\n      newTarget.on('change', this._onChangedByScene, this)\n    }\n\n    this.propertyTarget = newTarget\n  }\n\n  _setBounds(bounds: BOUNDS) {\n    this.bounds = {\n      left: bounds.left,\n      top: bounds.top,\n      width: Math.round(bounds.width),\n      height: Math.round(bounds.height)\n    }\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/shapes/box-padding-editor-styles.js

@@ -5,7 +5,7 @@ export const BoxPaddingEditorStyles = css `
   }
 
   .box-padding td {
-    background: url(/assets/images/icon-properties-padding.png) 50% 0 no-repeat;
+    background: var(--url-icon-properties-padding) 50% 0 no-repeat;
   }
 
   .box-padding tr:nth-child(1),

package/dist/src/modeller/property-sidebar/shapes/box-padding-editor-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"box-padding-editor-styles.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FxC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const BoxPaddingEditorStyles = css`\n  .box-padding {\n    width: 100%;\n  }\n\n  .box-padding td {\n    background: url(/assets/images/icon-properties-padding.png) 50% 0 no-repeat;\n  }\n\n  .box-padding tr:nth-child(1),\n  .box-padding tr:nth-child(3) {\n    height: 20px;\n  }\n\n  .box-padding tr td:nth-child(1),\n  .box-padding tr td:nth-child(3) {\n    width: 18px;\n  }\n\n  .box-padding .slide1 {\n    background-position: 0 0;\n  }\n\n  .box-padding .slide2 {\n    background-position: 50% -40px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide3 {\n    background-position: 100% -440px;\n  }\n\n  .box-padding .slide4 {\n    background-position: 0 -360px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide5 {\n    background: none;\n    text-align: center;\n  }\n\n  .box-padding .slide6 {\n    background-position: 100% -160px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide7 {\n    background-position: 0 100%;\n  }\n\n  .box-padding .slide8 {\n    background-position: 50% -320px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide9 {\n    background-position: 0 0px;\n  }\n\n  .box-padding input {\n    background-color: transparent;\n    width: 35px;\n    margin: 0px;\n    padding: 0px;\n    clear: both;\n    float: initial;\n    border: 1px solid #fff;\n    border-width: 0 0 1px 0;\n    text-align: right;\n    font-size: 14px;\n  }\n\n  .slide5 input:nth-child(1),\n  .slide5 input:nth-child(4) {\n    display: block;\n    margin: auto;\n  }\n\n  .slide5 input:nth-child(2) {\n    float: left;\n  }\n\n  .slide5 input:nth-child(3) {\n    float: right;\n    margin-top: -25px;\n  }\n\n  .slide5 input:nth-child(4) {\n    margin-top: -5px;\n  }\n`\n"]}
+{"version":3,"file":"box-padding-editor-styles.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FxC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const BoxPaddingEditorStyles = css`\n  .box-padding {\n    width: 100%;\n  }\n\n  .box-padding td {\n    background: var(--url-icon-properties-padding) 50% 0 no-repeat;\n  }\n\n  .box-padding tr:nth-child(1),\n  .box-padding tr:nth-child(3) {\n    height: 20px;\n  }\n\n  .box-padding tr td:nth-child(1),\n  .box-padding tr td:nth-child(3) {\n    width: 18px;\n  }\n\n  .box-padding .slide1 {\n    background-position: 0 0;\n  }\n\n  .box-padding .slide2 {\n    background-position: 50% -40px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide3 {\n    background-position: 100% -440px;\n  }\n\n  .box-padding .slide4 {\n    background-position: 0 -360px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide5 {\n    background: none;\n    text-align: center;\n  }\n\n  .box-padding .slide6 {\n    background-position: 100% -160px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide7 {\n    background-position: 0 100%;\n  }\n\n  .box-padding .slide8 {\n    background-position: 50% -320px;\n    background-color: rgba(69, 46, 41, 0.2);\n  }\n\n  .box-padding .slide9 {\n    background-position: 0 0px;\n  }\n\n  .box-padding input {\n    background-color: transparent;\n    width: 35px;\n    margin: 0px;\n    padding: 0px;\n    clear: both;\n    float: initial;\n    border: 1px solid #fff;\n    border-width: 0 0 1px 0;\n    text-align: right;\n    font-size: 14px;\n  }\n\n  .slide5 input:nth-child(1),\n  .slide5 input:nth-child(4) {\n    display: block;\n    margin: auto;\n  }\n\n  .slide5 input:nth-child(2) {\n    float: left;\n  }\n\n  .slide5 input:nth-child(3) {\n    float: right;\n    margin-top: -25px;\n  }\n\n  .slide5 input:nth-child(4) {\n    margin-top: -5px;\n  }\n`\n"]}

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

@@ -1,6 +1,6 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@operato/input/dist/src/ox-input-angle';
-import '@operato/input/dist/src/ox-buttons-radio';
+import '@operato/input/ox-input-angle.js';
+import '@operato/input/ox-buttons-radio.js';
 import '@material/mwc-icon';

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

@@ -2,11 +2,11 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import '@operato/input/dist/src/ox-input-angle';
-import '@operato/input/dist/src/ox-buttons-radio';
+import '@operato/input/ox-input-angle.js';
+import '@operato/input/ox-buttons-radio.js';
 import '@material/mwc-icon';
 import { css, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators';
+import { customElement, property, state } from 'lit/decorators.js';
 import { AbstractProperty } from '../abstract-property';
 import { PropertySharedStyle } from '../property-shared-style';
 import { BoxPaddingEditorStyles } from './box-padding-editor-styles';
@@ -297,7 +297,7 @@ PropertyShapes.styles = [
     `,
     css `
       .icon-label label {
-        background: url(/assets/images/icon-properties-label.png) 7px -900px no-repeat;
+        background: var(--url-icon-properties-label) 7px -900px no-repeat;
       }
 
       .icon-label label.width {
@@ -352,7 +352,7 @@ PropertyShapes.styles = [
       }
 
       ox-buttons-radio div {
-        background: url(/assets/images/icon-properties.png) no-repeat;
+        background: var(--url-icon-properties) no-repeat;
       }
 
       ox-buttons-radio div[data-value='left'] {