@operato/board 0.2.46 → 0.2.47

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,2BAA2B,CAAA;AAClC,OAAO,gEAAgE,CAAA;AAEvE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGxD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAE3C;;;;;;;;GAQG;AAGH,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,UAAU;IAAtD;;QA8C8B,UAAK,GAAe,EAAE,CAAA;IAyCpD,CAAC;IAvCC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;qDAGsC,IAAI,CAAC,KAAK,CAAC,IAAI;;;;oDAIhB,IAAI,CAAC,KAAK,CAAC,GAAG;;;;yDAIT,IAAI,CAAC,KAAK,CAAC,QAAQ;;;;sDAItB,IAAI,CAAC,KAAK,CAAC,KAAK;KACjE,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;AAtFQ,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAuB;AA9C/B,cAAc;IADlC,aAAa,CAAC,iBAAiB,CAAC;GACZ,cAAc,CAuFlC;eAvFoB,cAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\nimport '@things-factory/modeller-ui/client/editors/things-editor-color'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators'\n\nimport { Properties } from '@hatiolab/things-scene'\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    return html`\n      <label> <i18n-msg msgid=\"label.shadowOffsetX\">offset-X</i18n-msg> </label>\n\n      <input type=\"number\" value-key=\"left\" .value=${this.value.left} />\n\n      <label> <i18n-msg msgid=\"label.shadowOffsetY\">offset-Y</i18n-msg> </label>\n\n      <input type=\"number\" value-key=\"top\" .value=${this.value.top} />\n\n      <label> <i18n-msg msgid=\"label.shadowSize\">Size</i18n-msg> </label>\n\n      <input type=\"number\" value-key=\"blurSize\" .value=${this.value.blurSize} />\n\n      <label class=\"icon-only-label color\"></label>\n\n      <things-editor-color value-key=\"color\" .value=${this.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,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"]}

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

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

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

@@ -48,8 +48,8 @@ export const PropertySharedStyle = css `
   .property-grid > input,
   .property-grid > table,
   .property-grid > select,
-  .property-grid > things-editor-angle-input,
-  .property-grid > things-editor-buttons-radio,
+  .property-grid > ox-input-angle,
+  .property-grid > ox-buttons-radio,
   .property-grid > things-editor-color,
   [custom-editor] {
     grid-column: span 7;

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 > things-editor-angle-input,\n  .property-grid > things-editor-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: 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"]}

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

@@ -1,7 +1,6 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import '@things-factory/i18n-base';
-import '@things-factory/modeller-ui/client/editors/things-editor-angle-input';
-import '@things-factory/modeller-ui/client/editors/things-editor-buttons-radio';
+import '@operato/input/dist/src/ox-input-angle';
+import '@operato/input/dist/src/ox-buttons-radio';
 import '@material/mwc-icon';

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

@@ -2,15 +2,14 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import '@things-factory/i18n-base';
-import '@things-factory/modeller-ui/client/editors/things-editor-angle-input';
-import '@things-factory/modeller-ui/client/editors/things-editor-buttons-radio';
+import '@operato/input/dist/src/ox-input-angle';
+import '@operato/input/dist/src/ox-buttons-radio';
 import '@material/mwc-icon';
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators';
 import { AbstractProperty } from '../abstract-property';
-import { BoxPaddingEditorStyles } from './box-padding-editor-styles';
 import { PropertySharedStyle } from '../property-shared-style';
+import { BoxPaddingEditorStyles } from './box-padding-editor-styles';
 let PropertyShapes = class PropertyShapes extends AbstractProperty {
     constructor() {
         super(...arguments);
@@ -86,8 +85,7 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
                 ? html ``
                 : html `
                       <label class="rotate"> <i18n-msg msgid="label.rotate">rotate</i18n-msg> </label>
-                      <things-editor-angle-input value-key="rotation" .radian=${value.rotation}>
-                      </things-editor-angle-input>
+                      <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
                     `}
               </div>
             </fieldset>
@@ -113,16 +111,13 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
                 <input type="number" value-key="depth" .value=${value.depth} />
 
                 <label class="rotationX"> <i18n-msg msgid="label.rotation-x">rot. X</i18n-msg> </label>
-                <things-editor-angle-input value-key="rotationX" .radian=${value.rotationX}>
-                </things-editor-angle-input>
+                <ox-input-angle value-key="rotationX" .radian=${value.rotationX}> </ox-input-angle>
 
                 <label class="rotationY"> <i18n-msg msgid="label.rotation-y">rot. Y</i18n-msg> </label>
-                <things-editor-angle-input value-key="rotationY" .radian=${value.rotationY}>
-                </things-editor-angle-input>
+                <ox-input-angle value-key="rotationY" .radian=${value.rotationY}> </ox-input-angle>
 
                 <label class="rotationZ"> <i18n-msg msgid="label.rotation-z">rot. Z</i18n-msg> </label>
-                <things-editor-angle-input value-key="rotation" .radian=${value.rotation}>
-                </things-editor-angle-input>
+                <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
               </div>
             </fieldset>
           `
@@ -138,19 +133,19 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
 
               <div class="property-grid">
                 <label> <i18n-msg msgid="label.horizontal">horizontal</i18n-msg> </label>
-                <things-editor-buttons-radio value-key="textAlign" .value=${value.textAlign}>
+                <ox-buttons-radio value-key="textAlign" .value=${value.textAlign}>
                   <div data-value="left"></div>
                   <div data-value="center"></div>
                   <div data-value="right"></div>
                   <div data-value="justify"></div>
-                </things-editor-buttons-radio>
+                </ox-buttons-radio>
 
                 <label> <i18n-msg msgid="label.vertical">vertical</i18n-msg> </label>
-                <things-editor-buttons-radio value-key="textBaseline" .value=${value.textBaseline}>
+                <ox-buttons-radio value-key="textBaseline" .value=${value.textBaseline}>
                   <div data-value="top"></div>
                   <div data-value="middle"></div>
                   <div data-value="bottom"></div>
-                </things-editor-buttons-radio>
+                </ox-buttons-radio>
 
                 <div class="checkbox-row">
                   <input id="checkbox-textwrap" type="checkbox" value-key="textWrap" .checked=${value.textWrap} />
@@ -188,7 +183,9 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
             ? html `
             <fieldset class="icon-label">
               <legend>
-                <title-with-help topic="board-modeller/shapes/viewer-option" msgid="label.viewer-option">Viewer Option</title-with-help>
+                <title-with-help topic="board-modeller/shapes/viewer-option" msgid="label.viewer-option"
+                  >Viewer Option</title-with-help
+                >
               </legend>
 
               <div class="property-grid">
@@ -200,12 +197,13 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
                   <option value="width">width</option>
                   <option value="height">height</option>
                 </select>
-                </things-editor-angle-input>
               </div>
             </fieldset>
             <fieldset class="icon-label">
               <legend>
-                <title-with-help topic="board-modeller/shapes/print-option" msgid="label.label-print">Print Option</title-with-help>
+                <title-with-help topic="board-modeller/shapes/print-option" msgid="label.label-print"
+                  >Print Option</title-with-help
+                >
               </legend>
 
               <div class="property-grid">
@@ -216,7 +214,6 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
                   <option value="I">180°</option>
                   <option value="R">270°</option>
                 </select>
-                </things-editor-angle-input>
               </div>
             </fieldset>
           `
@@ -343,7 +340,7 @@ PropertyShapes.styles = [
         background-position: 5px -1496px;
       }
 
-      things-editor-buttons-radio > * {
+      ox-buttons-radio > * {
         width: 30px;
         height: 25px;
         min-width: initial;
@@ -354,39 +351,39 @@ PropertyShapes.styles = [
         border-bottom: 2px solid #fff;
       }
 
-      things-editor-buttons-radio div {
+      ox-buttons-radio div {
         background: url(/assets/images/icon-properties.png) no-repeat;
       }
 
-      things-editor-buttons-radio div[data-value='left'] {
+      ox-buttons-radio div[data-value='left'] {
         background-position: 50% 3px;
       }
 
-      things-editor-buttons-radio div[data-value='center'] {
+      ox-buttons-radio div[data-value='center'] {
         background-position: 50% -47px;
       }
 
-      things-editor-buttons-radio div[data-value='right'] {
+      ox-buttons-radio div[data-value='right'] {
         background-position: 50% -97px;
       }
 
-      things-editor-buttons-radio div[data-value='justify'] {
+      ox-buttons-radio div[data-value='justify'] {
         background-position: 50% -147px;
       }
 
-      things-editor-buttons-radio div[data-value='top'] {
+      ox-buttons-radio div[data-value='top'] {
         background-position: 50% -197px;
       }
 
-      things-editor-buttons-radio div[data-value='middle'] {
+      ox-buttons-radio div[data-value='middle'] {
         background-position: 50% -193px;
       }
 
-      things-editor-buttons-radio div[data-value='bottom'] {
+      ox-buttons-radio div[data-value='bottom'] {
         background-position: 50% -188px;
       }
 
-      things-editor-buttons-radio div[active] {
+      ox-buttons-radio div[active] {
         border-color: #f2471c;
       }
     `

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

@@ -1 +1 @@
-{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/shapes/shapes.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\nimport '@things-factory/modeller-ui/client/editors/things-editor-angle-input'\nimport '@things-factory/modeller-ui/client/editors/things-editor-buttons-radio'\nimport '@material/mwc-icon'\n\nimport { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { BoxPaddingEditorStyles } from './box-padding-editor-styles'\nimport { PropertySharedStyle } from '../property-shared-style'\n\n@customElement('property-shape')\nclass PropertyShapes extends AbstractProperty {\n  static styles = [\n    PropertySharedStyle,\n    BoxPaddingEditorStyles,\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    css`\n      .icon-label label {\n        background: url(/assets/images/icon-properties-label.png) 7px -900px no-repeat;\n      }\n\n      .icon-label label.width {\n        background-position: 7px -96px;\n      }\n\n      .icon-label label.height {\n        background-position: 7px 4px;\n      }\n\n      .icon-label label.rotate {\n        background-position: 7px -198px;\n      }\n\n      .icon-label label.twidth {\n        background-position: 7px -296px;\n      }\n\n      .icon-label label.theight {\n        background-position: 7px -396px;\n      }\n\n      .icon-label label.zPos {\n        background-position: 5px -1098px;\n      }\n\n      .icon-label label.depth {\n        background-position: 5px -1198px;\n      }\n\n      .icon-label label.rotationX {\n        background-position: 5px -1296px;\n      }\n\n      .icon-label label.rotationY {\n        background-position: 5px -1396px;\n      }\n\n      .icon-label label.rotationZ {\n        background-position: 5px -1496px;\n      }\n\n      things-editor-buttons-radio > * {\n        width: 30px;\n        height: 25px;\n        min-width: initial;\n        margin: 0 4px 0 0;\n        padding: 0;\n        border-radius: 0;\n        display: inline-block;\n        border-bottom: 2px solid #fff;\n      }\n\n      things-editor-buttons-radio div {\n        background: url(/assets/images/icon-properties.png) no-repeat;\n      }\n\n      things-editor-buttons-radio div[data-value='left'] {\n        background-position: 50% 3px;\n      }\n\n      things-editor-buttons-radio div[data-value='center'] {\n        background-position: 50% -47px;\n      }\n\n      things-editor-buttons-radio div[data-value='right'] {\n        background-position: 50% -97px;\n      }\n\n      things-editor-buttons-radio div[data-value='justify'] {\n        background-position: 50% -147px;\n      }\n\n      things-editor-buttons-radio div[data-value='top'] {\n        background-position: 50% -197px;\n      }\n\n      things-editor-buttons-radio div[data-value='middle'] {\n        background-position: 50% -193px;\n      }\n\n      things-editor-buttons-radio div[data-value='bottom'] {\n        background-position: 50% -188px;\n      }\n\n      things-editor-buttons-radio div[active] {\n        border-color: #f2471c;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) bounds: BOUNDS | null = null\n  @property({ type: Array }) selected: Component[] = []\n\n  @state() private _3dExpanded: 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>\n        <div class=\"property-grid\">\n          ${this._isIdentifiable(this.selected)\n            ? html`\n                <label> <i18n-msg msgid=\"label.id\">ID</i18n-msg> </label>\n                <input value-key=\"id\" .value=${value.id || ''} />\n              `\n            : html``}\n          ${this._isClassIdentifiable(this.selected)\n            ? html`\n                <label> <i18n-msg msgid=\"label.class\">Class</i18n-msg> </label>\n                <input value-key=\"class\" .value=${value.class || ''} />\n              `\n            : html``}\n          ${this._hasTextProperty(this.selected)\n            ? html`\n                <label> <i18n-msg msgid=\"label.text\">Text</i18n-msg> </label>\n                <input value-key=\"text\" .value=${value.text || ''} />\n                <label> <i18n-msg msgid=\"label.text-format\">Text Format</i18n-msg> </label>\n                <input value-key=\"textFormat\" .value=${value.textFormat || ''} list=\"format-list\" />\n                <datalist id=\"format-list\">\n                  <option value=\"#,###.\"></option>\n                  <option value=\"#,###.#\"></option>\n                  <option value=\"#,###.0\"></option>\n                  <option value=\"#,##0.#\"></option>\n                  <option value=\"#,##0.0\"></option>\n                  <option value=\"#,##0.0%\"></option>\n                </datalist>\n              `\n            : html``}\n          ${this._hasProperties(this.selected)\n            ? html`\n                <div class=\"checkbox-row\">\n                  <input id=\"checkbox-hidden\" value-key=\"hidden\" type=\"checkbox\" .checked=${value.hidden} />\n                  <label for=\"checkbox-hidden\"> <i18n-msg msgid=\"label.item-hidden\">Item Hidden</i18n-msg> </label>\n\n                  <input id=\"checkbox-locked\" value-key=\"locked\" type=\"checkbox\" .checked=${value.locked} />\n                  <label for=\"checkbox-locked\"> <i18n-msg msgid=\"label.locked\">Locked</i18n-msg> </label>\n                </div>\n              `\n            : html``}\n        </div>\n      </fieldset>\n\n      ${!this._isLine(this.selected)\n        ? html`\n            <fieldset class=\"icon-label unit ratio\">\n              <legend>\n                <title-with-help topic=\"board-modeller/shapes/size\" msgid=\"label.size\">size</title-with-help>\n              </legend>\n\n              <div class=\"property-grid\">\n                <label class=\"width\"> <i18n-msg msgid=\"label.width\">width</i18n-msg> </label>\n                <input type=\"number\" value-key=\"bounds.width\" .value=${this.bounds?.width} />\n                <label class=\"height\"> <i18n-msg msgid=\"label.height\">height</i18n-msg> </label>\n                <input type=\"number\" value-key=\"bounds.height\" .value=${this.bounds?.height} />\n\n                ${this.selected.length && this.selected[0].isRootModel()\n                  ? html``\n                  : html`\n                      <label class=\"rotate\"> <i18n-msg msgid=\"label.rotate\">rotate</i18n-msg> </label>\n                      <things-editor-angle-input value-key=\"rotation\" .radian=${value.rotation}>\n                      </things-editor-angle-input>\n                    `}\n              </div>\n            </fieldset>\n          `\n        : html``}\n      ${this._is3dish(this.selected)\n        ? html`\n            <fieldset class=\"icon-label unit ratio\" collapsable ?collapsed=${!this._3dExpanded}>\n              <legend>\n                <title-with-help topic=\"board-modeller/shapes/3dish\" msgid=\"label.3dish\">3D</title-with-help>\n                <mwc-icon\n                  @click=${(e: Event) => {\n                    this._3dExpanded = !this._3dExpanded\n                  }}\n                  >${this._3dExpanded ? 'expand_less' : 'expand_more'}</mwc-icon\n                >\n              </legend>\n\n              <div class=\"property-grid\">\n                <label class=\"zPos\"> <i18n-msg msgid=\"label.z-pos\">pos. Z</i18n-msg> </label>\n                <input type=\"number\" value-key=\"zPos\" .value=${value.zPos} />\n                <label class=\"depth\"> <i18n-msg msgid=\"label.depth\">depth</i18n-msg> </label>\n                <input type=\"number\" value-key=\"depth\" .value=${value.depth} />\n\n                <label class=\"rotationX\"> <i18n-msg msgid=\"label.rotation-x\">rot. X</i18n-msg> </label>\n                <things-editor-angle-input value-key=\"rotationX\" .radian=${value.rotationX}>\n                </things-editor-angle-input>\n\n                <label class=\"rotationY\"> <i18n-msg msgid=\"label.rotation-y\">rot. Y</i18n-msg> </label>\n                <things-editor-angle-input value-key=\"rotationY\" .radian=${value.rotationY}>\n                </things-editor-angle-input>\n\n                <label class=\"rotationZ\"> <i18n-msg msgid=\"label.rotation-z\">rot. Z</i18n-msg> </label>\n                <things-editor-angle-input value-key=\"rotation\" .radian=${value.rotation}>\n                </things-editor-angle-input>\n              </div>\n            </fieldset>\n          `\n        : html``}\n      ${this._hasTextProperty(this.selected)\n        ? html`\n            <fieldset>\n              <legend>\n                <title-with-help topic=\"board-modeller/shapes/text-box\" msgid=\"label.text-box\"\n                  >text box</title-with-help\n                >\n              </legend>\n\n              <div class=\"property-grid\">\n                <label> <i18n-msg msgid=\"label.horizontal\">horizontal</i18n-msg> </label>\n                <things-editor-buttons-radio value-key=\"textAlign\" .value=${value.textAlign}>\n                  <div data-value=\"left\"></div>\n                  <div data-value=\"center\"></div>\n                  <div data-value=\"right\"></div>\n                  <div data-value=\"justify\"></div>\n                </things-editor-buttons-radio>\n\n                <label> <i18n-msg msgid=\"label.vertical\">vertical</i18n-msg> </label>\n                <things-editor-buttons-radio value-key=\"textBaseline\" .value=${value.textBaseline}>\n                  <div data-value=\"top\"></div>\n                  <div data-value=\"middle\"></div>\n                  <div data-value=\"bottom\"></div>\n                </things-editor-buttons-radio>\n\n                <div class=\"checkbox-row\">\n                  <input id=\"checkbox-textwrap\" type=\"checkbox\" value-key=\"textWrap\" .checked=${value.textWrap} />\n                  <label for=\"checkbox-textwrap\"> <i18n-msg msgid=\"label.text-wrap\">Text Wrap</i18n-msg> </label>\n                </div>\n\n                <label> <i18n-msg msgid=\"label.padding\">padding</i18n-msg> </label>\n                <table class=\"box-padding\">\n                  <tr>\n                    <td class=\"slide1\"></td>\n                    <td class=\"slide2\"></td>\n                    <td class=\"slide3\"></td>\n                  </tr>\n                  <tr>\n                    <td class=\"slide4\"></td>\n                    <td class=\"slide5\">\n                      <input type=\"number\" value-key=\"paddingTop\" .value=${value.paddingTop} />\n                      <input type=\"number\" value-key=\"paddingLeft\" .value=${value.paddingLeft} />\n                      <input type=\"number\" value-key=\"paddingRight\" .value=${value.paddingRight} />\n                      <input type=\"number\" value-key=\"paddingBottom\" .value=${value.paddingBottom} />\n                    </td>\n                    <td class=\"slide6\"></td>\n                  </tr>\n                  <tr>\n                    <td class=\"slide7\"></td>\n                    <td class=\"slide8\"></td>\n                    <td class=\"slide9\"></td>\n                  </tr>\n                </table>\n              </div>\n            </fieldset>\n          `\n        : html``}\n      ${this.selected.length && this.selected[0].isRootModel()\n        ? html`\n            <fieldset class=\"icon-label\">\n              <legend>\n                <title-with-help topic=\"board-modeller/shapes/viewer-option\" msgid=\"label.viewer-option\">Viewer Option</title-with-help>\n              </legend>\n\n              <div class=\"property-grid\">\n                <label><i18n-msg msgid=\"label.fit\">Fit</i18n-msg></label>\n                <select value-key=\"fitMode\" .value=${value.fitMode || 'ratio'}>\n                  <option value=\"none\">none</option>\n                  <option value=\"ratio\" selected>ratio</option>\n                  <option value=\"both\">both</option>\n                  <option value=\"width\">width</option>\n                  <option value=\"height\">height</option>\n                </select>\n                </things-editor-angle-input>\n              </div>\n            </fieldset>\n            <fieldset class=\"icon-label\">\n              <legend>\n                <title-with-help topic=\"board-modeller/shapes/print-option\" msgid=\"label.label-print\">Print Option</title-with-help>\n              </legend>\n\n              <div class=\"property-grid\">\n                <label class=\"rotate\"><i18n-msg msgid=\"label.label-rotation\">Label Rotation</i18n-msg></label>\n                <select value-key=\"labelRotation\" .value=${value.labelRotation || 'N'}>\n                  <option value=\"N\" selected>0°</option>\n                  <option value=\"B\">90°</option>\n                  <option value=\"I\">180°</option>\n                  <option value=\"R\">270°</option>\n                </select>\n                </things-editor-angle-input>\n              </div>\n            </fieldset>\n          `\n        : html``}\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    var value = this._getValueFromEventTarget(element)\n\n    if (key.indexOf('bounds.') == 0) {\n      if (isNaN(value)) return\n      this.dispatchEvent(\n        new CustomEvent('bounds-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            [key.substr(7)]: value\n          }\n        })\n      )\n    } else {\n      this._onAfterValueChange(key, value)\n    }\n  }\n\n  _hasTextProperty(selected: Component[]) {\n    for (let i = 0; i < selected.length; i++) {\n      if (!selected[i].hasTextProperty) return false\n    }\n\n    return true\n  }\n\n  _hasProperties(selected: Component[]) {\n    if (!selected || selected.length == 0 || (selected[0] && selected[0].isLayer && selected[0].isLayer())) return false\n\n    return true\n  }\n\n  _isIdentifiable(selected: Component[]) {\n    if (!selected || selected.length == 0 || selected.length > 1 || (selected[0].isLayer && selected[0].isLayer()))\n      return false\n\n    return true\n  }\n\n  _isClassIdentifiable(selected: Component[]) {\n    if (!selected || (selected[0] && selected[0].isLayer())) return false\n\n    return true\n  }\n\n  _isLine(selected: Component[]) {\n    if (!selected || !(selected[0] && selected[0].isLine())) return false\n\n    return true\n  }\n\n  _is3dish(selected: Component[]) {\n    if (!selected || !(selected[0] && selected[0].is3dish())) return false\n\n    return true\n  }\n}\n"]}
+{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/shapes/shapes.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'\nimport '@operato/input/dist/src/ox-buttons-radio'\nimport '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators'\n\nimport { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { BoxPaddingEditorStyles } from './box-padding-editor-styles'\n\n@customElement('property-shape')\nclass PropertyShapes extends AbstractProperty {\n  static styles = [\n    PropertySharedStyle,\n    BoxPaddingEditorStyles,\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    css`\n      .icon-label label {\n        background: url(/assets/images/icon-properties-label.png) 7px -900px no-repeat;\n      }\n\n      .icon-label label.width {\n        background-position: 7px -96px;\n      }\n\n      .icon-label label.height {\n        background-position: 7px 4px;\n      }\n\n      .icon-label label.rotate {\n        background-position: 7px -198px;\n      }\n\n      .icon-label label.twidth {\n        background-position: 7px -296px;\n      }\n\n      .icon-label label.theight {\n        background-position: 7px -396px;\n      }\n\n      .icon-label label.zPos {\n        background-position: 5px -1098px;\n      }\n\n      .icon-label label.depth {\n        background-position: 5px -1198px;\n      }\n\n      .icon-label label.rotationX {\n        background-position: 5px -1296px;\n      }\n\n      .icon-label label.rotationY {\n        background-position: 5px -1396px;\n      }\n\n      .icon-label label.rotationZ {\n        background-position: 5px -1496px;\n      }\n\n      ox-buttons-radio > * {\n        width: 30px;\n        height: 25px;\n        min-width: initial;\n        margin: 0 4px 0 0;\n        padding: 0;\n        border-radius: 0;\n        display: inline-block;\n        border-bottom: 2px solid #fff;\n      }\n\n      ox-buttons-radio div {\n        background: url(/assets/images/icon-properties.png) no-repeat;\n      }\n\n      ox-buttons-radio div[data-value='left'] {\n        background-position: 50% 3px;\n      }\n\n      ox-buttons-radio div[data-value='center'] {\n        background-position: 50% -47px;\n      }\n\n      ox-buttons-radio div[data-value='right'] {\n        background-position: 50% -97px;\n      }\n\n      ox-buttons-radio div[data-value='justify'] {\n        background-position: 50% -147px;\n      }\n\n      ox-buttons-radio div[data-value='top'] {\n        background-position: 50% -197px;\n      }\n\n      ox-buttons-radio div[data-value='middle'] {\n        background-position: 50% -193px;\n      }\n\n      ox-buttons-radio div[data-value='bottom'] {\n        background-position: 50% -188px;\n      }\n\n      ox-buttons-radio div[active] {\n        border-color: #f2471c;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) bounds: BOUNDS | null = null\n  @property({ type: Array }) selected: Component[] = []\n\n  @state() private _3dExpanded: 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>\n        <div class=\"property-grid\">\n          ${this._isIdentifiable(this.selected)\n            ? html`\n                <label> <i18n-msg msgid=\"label.id\">ID</i18n-msg> </label>\n                <input value-key=\"id\" .value=${value.id || ''} />\n              `\n            : html``}\n          ${this._isClassIdentifiable(this.selected)\n            ? html`\n                <label> <i18n-msg msgid=\"label.class\">Class</i18n-msg> </label>\n                <input value-key=\"class\" .value=${value.class || ''} />\n              `\n            : html``}\n          ${this._hasTextProperty(this.selected)\n            ? html`\n                <label> <i18n-msg msgid=\"label.text\">Text</i18n-msg> </label>\n                <input value-key=\"text\" .value=${value.text || ''} />\n                <label> <i18n-msg msgid=\"label.text-format\">Text Format</i18n-msg> </label>\n                <input value-key=\"textFormat\" .value=${value.textFormat || ''} list=\"format-list\" />\n                <datalist id=\"format-list\">\n                  <option value=\"#,###.\"></option>\n                  <option value=\"#,###.#\"></option>\n                  <option value=\"#,###.0\"></option>\n                  <option value=\"#,##0.#\"></option>\n                  <option value=\"#,##0.0\"></option>\n                  <option value=\"#,##0.0%\"></option>\n                </datalist>\n              `\n            : html``}\n          ${this._hasProperties(this.selected)\n            ? html`\n                <div class=\"checkbox-row\">\n                  <input id=\"checkbox-hidden\" value-key=\"hidden\" type=\"checkbox\" .checked=${value.hidden} />\n                  <label for=\"checkbox-hidden\"> <i18n-msg msgid=\"label.item-hidden\">Item Hidden</i18n-msg> </label>\n\n                  <input id=\"checkbox-locked\" value-key=\"locked\" type=\"checkbox\" .checked=${value.locked} />\n                  <label for=\"checkbox-locked\"> <i18n-msg msgid=\"label.locked\">Locked</i18n-msg> </label>\n                </div>\n              `\n            : html``}\n        </div>\n      </fieldset>\n\n      ${!this._isLine(this.selected)\n        ? html`\n            <fieldset class=\"icon-label unit ratio\">\n              <legend>\n                <title-with-help topic=\"board-modeller/shapes/size\" msgid=\"label.size\">size</title-with-help>\n              </legend>\n\n              <div class=\"property-grid\">\n                <label class=\"width\"> <i18n-msg msgid=\"label.width\">width</i18n-msg> </label>\n                <input type=\"number\" value-key=\"bounds.width\" .value=${this.bounds?.width} />\n                <label class=\"height\"> <i18n-msg msgid=\"label.height\">height</i18n-msg> </label>\n                <input type=\"number\" value-key=\"bounds.height\" .value=${this.bounds?.height} />\n\n                ${this.selected.length && this.selected[0].isRootModel()\n                  ? html``\n                  : html`\n                      <label class=\"rotate\"> <i18n-msg msgid=\"label.rotate\">rotate</i18n-msg> </label>\n                      <ox-input-angle value-key=\"rotation\" .radian=${value.rotation}> </ox-input-angle>\n                    `}\n              </div>\n            </fieldset>\n          `\n        : html``}\n      ${this._is3dish(this.selected)\n        ? html`\n            <fieldset class=\"icon-label unit ratio\" collapsable ?collapsed=${!this._3dExpanded}>\n              <legend>\n                <title-with-help topic=\"board-modeller/shapes/3dish\" msgid=\"label.3dish\">3D</title-with-help>\n                <mwc-icon\n                  @click=${(e: Event) => {\n                    this._3dExpanded = !this._3dExpanded\n                  }}\n                  >${this._3dExpanded ? 'expand_less' : 'expand_more'}</mwc-icon\n                >\n              </legend>\n\n              <div class=\"property-grid\">\n                <label class=\"zPos\"> <i18n-msg msgid=\"label.z-pos\">pos. Z</i18n-msg> </label>\n                <input type=\"number\" value-key=\"zPos\" .value=${value.zPos} />\n                <label class=\"depth\"> <i18n-msg msgid=\"label.depth\">depth</i18n-msg> </label>\n                <input type=\"number\" value-key=\"depth\" .value=${value.depth} />\n\n                <label class=\"rotationX\"> <i18n-msg msgid=\"label.rotation-x\">rot. X</i18n-msg> </label>\n                <ox-input-angle value-key=\"rotationX\" .radian=${value.rotationX}> </ox-input-angle>\n\n                <label class=\"rotationY\"> <i18n-msg msgid=\"label.rotation-y\">rot. Y</i18n-msg> </label>\n                <ox-input-angle value-key=\"rotationY\" .radian=${value.rotationY}> </ox-input-angle>\n\n                <label class=\"rotationZ\"> <i18n-msg msgid=\"label.rotation-z\">rot. Z</i18n-msg> </label>\n                <ox-input-angle value-key=\"rotation\" .radian=${value.rotation}> </ox-input-angle>\n              </div>\n            </fieldset>\n          `\n        : html``}\n      ${this._hasTextProperty(this.selected)\n        ? html`\n            <fieldset>\n              <legend>\n                <title-with-help topic=\"board-modeller/shapes/text-box\" msgid=\"label.text-box\"\n                  >text box</title-with-help\n                >\n              </legend>\n\n              <div class=\"property-grid\">\n                <label> <i18n-msg msgid=\"label.horizontal\">horizontal</i18n-msg> </label>\n                <ox-buttons-radio value-key=\"textAlign\" .value=${value.textAlign}>\n                  <div data-value=\"left\"></div>\n                  <div data-value=\"center\"></div>\n                  <div data-value=\"right\"></div>\n                  <div data-value=\"justify\"></div>\n                </ox-buttons-radio>\n\n                <label> <i18n-msg msgid=\"label.vertical\">vertical</i18n-msg> </label>\n                <ox-buttons-radio value-key=\"textBaseline\" .value=${value.textBaseline}>\n                  <div data-value=\"top\"></div>\n                  <div data-value=\"middle\"></div>\n                  <div data-value=\"bottom\"></div>\n                </ox-buttons-radio>\n\n                <div class=\"checkbox-row\">\n                  <input id=\"checkbox-textwrap\" type=\"checkbox\" value-key=\"textWrap\" .checked=${value.textWrap} />\n                  <label for=\"checkbox-textwrap\"> <i18n-msg msgid=\"label.text-wrap\">Text Wrap</i18n-msg> </label>\n                </div>\n\n                <label> <i18n-msg msgid=\"label.padding\">padding</i18n-msg> </label>\n                <table class=\"box-padding\">\n                  <tr>\n                    <td class=\"slide1\"></td>\n                    <td class=\"slide2\"></td>\n                    <td class=\"slide3\"></td>\n                  </tr>\n                  <tr>\n                    <td class=\"slide4\"></td>\n                    <td class=\"slide5\">\n                      <input type=\"number\" value-key=\"paddingTop\" .value=${value.paddingTop} />\n                      <input type=\"number\" value-key=\"paddingLeft\" .value=${value.paddingLeft} />\n                      <input type=\"number\" value-key=\"paddingRight\" .value=${value.paddingRight} />\n                      <input type=\"number\" value-key=\"paddingBottom\" .value=${value.paddingBottom} />\n                    </td>\n                    <td class=\"slide6\"></td>\n                  </tr>\n                  <tr>\n                    <td class=\"slide7\"></td>\n                    <td class=\"slide8\"></td>\n                    <td class=\"slide9\"></td>\n                  </tr>\n                </table>\n              </div>\n            </fieldset>\n          `\n        : html``}\n      ${this.selected.length && this.selected[0].isRootModel()\n        ? html`\n            <fieldset class=\"icon-label\">\n              <legend>\n                <title-with-help topic=\"board-modeller/shapes/viewer-option\" msgid=\"label.viewer-option\"\n                  >Viewer Option</title-with-help\n                >\n              </legend>\n\n              <div class=\"property-grid\">\n                <label><i18n-msg msgid=\"label.fit\">Fit</i18n-msg></label>\n                <select value-key=\"fitMode\" .value=${value.fitMode || 'ratio'}>\n                  <option value=\"none\">none</option>\n                  <option value=\"ratio\" selected>ratio</option>\n                  <option value=\"both\">both</option>\n                  <option value=\"width\">width</option>\n                  <option value=\"height\">height</option>\n                </select>\n              </div>\n            </fieldset>\n            <fieldset class=\"icon-label\">\n              <legend>\n                <title-with-help topic=\"board-modeller/shapes/print-option\" msgid=\"label.label-print\"\n                  >Print Option</title-with-help\n                >\n              </legend>\n\n              <div class=\"property-grid\">\n                <label class=\"rotate\"><i18n-msg msgid=\"label.label-rotation\">Label Rotation</i18n-msg></label>\n                <select value-key=\"labelRotation\" .value=${value.labelRotation || 'N'}>\n                  <option value=\"N\" selected>0°</option>\n                  <option value=\"B\">90°</option>\n                  <option value=\"I\">180°</option>\n                  <option value=\"R\">270°</option>\n                </select>\n              </div>\n            </fieldset>\n          `\n        : html``}\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    var value = this._getValueFromEventTarget(element)\n\n    if (key.indexOf('bounds.') == 0) {\n      if (isNaN(value)) return\n      this.dispatchEvent(\n        new CustomEvent('bounds-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            [key.substr(7)]: value\n          }\n        })\n      )\n    } else {\n      this._onAfterValueChange(key, value)\n    }\n  }\n\n  _hasTextProperty(selected: Component[]) {\n    for (let i = 0; i < selected.length; i++) {\n      if (!selected[i].hasTextProperty) return false\n    }\n\n    return true\n  }\n\n  _hasProperties(selected: Component[]) {\n    if (!selected || selected.length == 0 || (selected[0] && selected[0].isLayer && selected[0].isLayer())) return false\n\n    return true\n  }\n\n  _isIdentifiable(selected: Component[]) {\n    if (!selected || selected.length == 0 || selected.length > 1 || (selected[0].isLayer && selected[0].isLayer()))\n      return false\n\n    return true\n  }\n\n  _isClassIdentifiable(selected: Component[]) {\n    if (!selected || (selected[0] && selected[0].isLayer())) return false\n\n    return true\n  }\n\n  _isLine(selected: Component[]) {\n    if (!selected || !(selected[0] && selected[0].isLine())) return false\n\n    return true\n  }\n\n  _is3dish(selected: Component[]) {\n    if (!selected || !(selected[0] && selected[0].is3dish())) return false\n\n    return true\n  }\n}\n"]}

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

@@ -3,7 +3,6 @@
  */
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
 import '@things-factory/help';
-import '@things-factory/modeller-ui/client/editors/things-editor-angle-input';
 import '@things-factory/modeller-ui/client/editors/things-editor-color';
 import '@things-factory/modeller-ui/client/editors/things-editor-color-style';
 import '@things-factory/modeller-ui/client/editors/things-editor-font-selector';

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

@@ -4,7 +4,6 @@
 import { __decorate } from "tslib";
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
 import '@things-factory/help';
-import '@things-factory/modeller-ui/client/editors/things-editor-angle-input';
 import '@things-factory/modeller-ui/client/editors/things-editor-color';
 import '@things-factory/modeller-ui/client/editors/things-editor-color-style';
 import '@things-factory/modeller-ui/client/editors/things-editor-font-selector';

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/styles/styles.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu'\nimport '@things-factory/help'\nimport '@things-factory/modeller-ui/client/editors/things-editor-angle-input'\nimport '@things-factory/modeller-ui/client/editors/things-editor-color'\nimport '@things-factory/modeller-ui/client/editors/things-editor-color-style'\nimport '@things-factory/modeller-ui/client/editors/things-editor-font-selector'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { Component } from '@hatiolab/things-scene'\nimport { PropertySharedStyle } from '../property-shared-style'\n\n@customElement('property-style')\nclass PropertyStyles extends AbstractProperty {\n  static styles = [\n    PropertySharedStyle,\n    css`\n      paper-slider {\n        width: 100%;\n      }\n\n      .btn-group {\n        height: 24px;\n      }\n\n      .btn-group paper-button {\n        width: 30px;\n        height: 24px;\n        min-width: initial;\n        margin: 0 4px 0 0;\n        padding: 0;\n        border-radius: 0;\n        display: inline-block;\n        border-bottom: 2px solid #fff;\n\n        background: url(/assets/images/icon-properties.png) no-repeat;\n        background-size: 70%;\n      }\n\n      .btn-group paper-button.tbold {\n        background-position: 50% -170px;\n      }\n\n      .btn-group paper-button.titalic {\n        background-position: 50% -205px;\n      }\n\n      .btn-group paper-button.tunderline {\n        background-position: 50% -240px;\n      }\n\n      .btn-group paper-button.tstrikethrough {\n        background-position: 50% -415px;\n      }\n\n      .btn-group paper-button[active] {\n        border-color: #f2471c;\n      }\n\n      .line-type paper-listbox {\n        overflow: hidden;\n        max-width: 100px;\n      }\n      .line-type paper-item {\n        background: url(/assets/images/icon-properties-line-type.png) 50% 0 no-repeat;\n        min-height: 25px;\n        padding: 3px 9px;\n        width: 80px;\n      }\n\n      .line-type paper-item.solid {\n        background-position: 50% 10px;\n      }\n      .line-type paper-item.round-dot {\n        background-position: 50% -40px;\n      }\n      .line-type paper-item.square-dot {\n        background-position: 50% -90px;\n      }\n      .line-type paper-item.dash {\n        background-position: 50% -140px;\n      }\n      .line-type paper-item.dash-dot {\n        background-position: 50% -190px;\n      }\n      .line-type paper-item.long-dash {\n        background-position: 50% -240px;\n      }\n      .line-type paper-item.long-dash-dot {\n        background-position: 50% -290px;\n      }\n      .line-type paper-item.long-dash-dot-dot {\n        background-position: 50% -340px;\n      }\n\n      .line-type .paper-input-container input {\n        background: url(/assets/images/icon-properties-line-type.png) 50% 0 no-repeat !important;\n      }\n      .line-type.solid .paper-input-container input {\n        background-position: 50% 5px !important;\n      }\n      .line-type.round-dot .paper-input-container input {\n        background-position: 50% -45px !important;\n      }\n      .line-type.square-dot .paper-input-container input {\n        background-position: 50% -85px !important;\n      }\n      .line-type.dash .paper-input-container input {\n        background-position: 50% -145px !important;\n      }\n      .line-type.dash-dot .paper-input-container input {\n        background-position: 50% -185px !important;\n      }\n      .line-type.long-dash .paper-input-container input {\n        background-position: 50% -245px !important;\n      }\n      .line-type.long-dash-dot .paper-input-container input {\n        background-position: 50% -285px !important;\n      }\n      .line-type.long-dash-dot-dot .paper-input-container input {\n        background-position: 50% -345px !important;\n      }\n\n      .arrow-type paper-menu {\n        overflow: hidden;\n        max-width: 140px;\n      }\n      .arrow-type paper-item {\n        background: url(/assets/images/icon-properties-arrow-type.png) 50% 0 no-repeat;\n        min-height: 30px;\n        padding: 3px 7px;\n        width: 30px;\n        float: left;\n      }\n      .arrow-type paper-item.begin-no {\n        background-position: 50% 16px;\n      }\n      .arrow-type paper-item.begin-arrow {\n        background-position: 50% -39px;\n      }\n      .arrow-type paper-item.begin-open-arrow {\n        background-position: 50% -89px;\n      }\n      .arrow-type paper-item.begin-stealth-arrow {\n        background-position: 50% -139px;\n      }\n      .arrow-type paper-item.begin-diamond-arrow {\n        background-position: 50% -190px;\n      }\n      .arrow-type paper-item.begin-oval-arrow {\n        background-position: 50% -238px;\n      }\n      .arrow-type paper-item.begin-size1 {\n        background-position: 50% -286px;\n      }\n      .arrow-type paper-item.begin-size2 {\n        background-position: 50% -336px;\n      }\n      .arrow-type paper-item.begin-size3 {\n        background-position: 50% -386px;\n      }\n      .arrow-type paper-item.begin-size4 {\n        background-position: 50% -436px;\n      }\n      .arrow-type paper-item.begin-size5 {\n        background-position: 50% -486px;\n      }\n      .arrow-type paper-item.begin-size6 {\n        background-position: 50% -536px;\n      }\n      .arrow-type paper-item.begin-size7 {\n        background-position: 50% -589px;\n      }\n      .arrow-type paper-item.begin-size8 {\n        background-position: 50% -639px;\n      }\n      .arrow-type paper-item.begin-size9 {\n        background-position: 50% -689px;\n      }\n      .arrow-type paper-item.end-no {\n        background-position: 50% 16px;\n      }\n      .arrow-type paper-item.end-arrow {\n        background-position: 50% -739px;\n      }\n      .arrow-type paper-item.end-open-arrow {\n        background-position: 50% -789px;\n      }\n      .arrow-type paper-item.end-stealth-arrow {\n        background-position: 50% -839px;\n      }\n      .arrow-type paper-item.end-diamond-arrow {\n        background-position: 50% -890px;\n      }\n      .arrow-type paper-item.end-oval-arrow {\n        background-position: 50% -938px;\n      }\n      .arrow-type paper-item.end-size1 {\n        background-position: 50% -986px;\n      }\n      .arrow-type paper-item.end-size2 {\n        background-position: 50% -1036px;\n      }\n      .arrow-type paper-item.end-size3 {\n        background-position: 50% -1086px;\n      }\n      .arrow-type paper-item.end-size4 {\n        background-position: 50% -1136px;\n      }\n      .arrow-type paper-item.end-size5 {\n        background-position: 50% -1186px;\n      }\n      .arrow-type paper-item.end-size6 {\n        background-position: 50% -1236px;\n      }\n      .arrow-type paper-item.end-size7 {\n        background-position: 50% -1289px;\n      }\n      .arrow-type paper-item.end-size8 {\n        background-position: 50% -1339px;\n      }\n      .arrow-type paper-item.end-size9 {\n        background-position: 50% -1389px;\n      }\n\n      .arrow-type .paper-input-container input {\n        background: url(/assets/images/icon-properties-arrow-type.png) 110% 0 no-repeat !important;\n      }\n      .arrow-type.begin-no .paper-input-container input {\n        background-position: 110% 5px !important;\n      }\n      .arrow-type.begin-arrow .paper-input-container input {\n        background-position: 110% -50px !important;\n      }\n      .arrow-type.begin-open-arrow .paper-input-container input {\n        background-position: 110% -100px !important;\n      }\n      .arrow-type.begin-stealth-arrow .paper-input-container input {\n        background-position: 110% -150px !important;\n      }\n      .arrow-type.begin-diamond-arrow .paper-input-container input {\n        background-position: 110% -200px !important;\n      }\n      .arrow-type.begin-oval-arrow .paper-input-container input {\n        background-position: 110% -250px !important;\n      }\n      .arrow-type.begin-size1 .paper-input-container input {\n        background-position: 110% -298px !important;\n      }\n      .arrow-type.begin-size2 .paper-input-container input {\n        background-position: 110% -348px !important;\n      }\n      .arrow-type.begin-size3 .paper-input-container input {\n        background-position: 110% -398px !important;\n      }\n      .arrow-type.begin-size4 .paper-input-container input {\n        background-position: 110% -448px !important;\n      }\n      .arrow-type.begin-size5 .paper-input-container input {\n        background-position: 110% -498px !important;\n      }\n      .arrow-type.begin-size6 .paper-input-container input {\n        background-position: 110% -548px !important;\n      }\n      .arrow-type.begin-size7 .paper-input-container input {\n        background-position: 110% -600px !important;\n      }\n      .arrow-type.begin-size8 .paper-input-container input {\n        background-position: 110% -650px !important;\n      }\n      .arrow-type.begin-size9 .paper-input-container input {\n        background-position: 110% -700px !important;\n      }\n      .arrow-type.end-no .paper-input-container input {\n        background-position: 110% 5px !important;\n      }\n      .arrow-type.end-arrow .paper-input-container input {\n        background-position: 110% -750px !important;\n      }\n      .arrow-type.end-open-arrow .paper-input-container input {\n        background-position: 110% -800px !important;\n      }\n      .arrow-type.end-stealth-arrow .paper-input-container input {\n        background-position: 110% -850px !important;\n      }\n      .arrow-type.end-diamond-arrow .paper-input-container input {\n        background-position: 110% -900px !important;\n      }\n      .arrow-type.end-oval-arrow .paper-input-container input {\n        background-position: 110% -950px !important;\n      }\n      .arrow-type.end-size1 .paper-input-container input {\n        background-position: 110% -998px !important;\n      }\n      .arrow-type.end-size2 .paper-input-container input {\n        background-position: 110% -1048px !important;\n      }\n      .arrow-type.end-size3 .paper-input-container input {\n        background-position: 110% -1098px !important;\n      }\n      .arrow-type.end-size4 .paper-input-container input {\n        background-position: 110% -1148px !important;\n      }\n      .arrow-type.end-size5 .paper-input-container input {\n        background-position: 110% -1198px !important;\n      }\n      .arrow-type.end-size6 .paper-input-container input {\n        background-position: 110% -1248px !important;\n      }\n      .arrow-type.end-size7 .paper-input-container input {\n        background-position: 110% -1300px !important;\n      }\n      .arrow-type.end-size8 .paper-input-container input {\n        background-position: 110% -1350px !important;\n      }\n      .arrow-type.end-size9 .paper-input-container input {\n        background-position: 110% -1400px !important;\n      }\n    `\n  ]\n  @property({ type: Object }) value: any = {}\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) fonts: any[] = []\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var {\n      alpha,\n      fontFamily,\n      fontSize,\n      lineHeight,\n      fontColor,\n      bold,\n      italic,\n      fillStyle,\n      lineWidth,\n      strokeStyle,\n      lineDash,\n      lineCap,\n      lineJoin,\n      begin,\n      beginSize,\n      end,\n      endSize\n    } = this.value\n\n    return html`\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</title-with-help>\n        </legend>\n        <paper-slider min=\"0\" max=\"1\" step=\"0.1\" value-key=\"alpha\" .value=${alpha || 1} editable> </paper-slider>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\"\n            >text style</title-with-help\n          >\n        </legend>\n\n        <div class=\"property-grid\">\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.font-family\">Font Family</i18n-msg>\n          </label>\n\n          <things-editor-font-selector\n            value-key=\"fontFamily\"\n            .value=${fontFamily}\n            class=\"property-full-input\"\n            custom-editor\n          ></things-editor-font-selector>\n\n          <label class=\"property-half-label icon-only-label font-size\"></label>\n          <input type=\"number\" value-key=\"fontSize\" .value=${fontSize} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label lineHeight\"></label>\n          <input type=\"number\" value-key=\"lineHeight\" .value=${lineHeight} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label color\"></label>\n          <things-editor-color value-key=\"fontColor\" .value=${fontColor} class=\"property-half-input\">\n          </things-editor-color>\n\n          <label class=\"property-half-label\"></label>\n          <div class=\"property-half-input btn-group\">\n            <paper-button toggles value-key=\"bold\" ?active=${bold} class=\"tbold\"> </paper-button>\n            <paper-button toggles value-key=\"italic\" ?active=${italic} class=\"titalic\"> </paper-button>\n          </div>\n        </div>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\"\n            >fill style</title-with-help\n          >\n        </legend>\n\n        <things-editor-color-style value-key=\"fillStyle\" .value=${fillStyle}> </things-editor-color-style>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></title-with-help>\n        </legend>\n\n        <div class=\"property-grid\">\n          <label class=\"property-half-label icon-only-label linewidth\"></label>\n          <input type=\"number\" value-key=\"lineWidth\" .value=${lineWidth} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label color\"></label>\n          <things-editor-color value-key=\"strokeStyle\" .value=${strokeStyle} class=\"property-half-input\">\n          </things-editor-color>\n\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.line-type\">line type</i18n-msg>\n          </label>\n          <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input line-type solid\">\n            <!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n            <paper-listbox\n              value-key=\"lineDash\"\n              @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n              slot=\"dropdown-content\"\n              .selected=${lineDash}\n              attr-for-selected=\"name\"\n            >\n              <paper-item class=\"solid\" name=\"solid\"></paper-item>\n              <paper-item class=\"round-dot\" name=\"round-dot\"></paper-item>\n              <paper-item class=\"square-dot\" name=\"square-dot\"></paper-item>\n              <paper-item class=\"dash\" name=\"dash\"></paper-item>\n              <paper-item class=\"dash-dot\" name=\"dash-dot\"></paper-item>\n              <paper-item class=\"long-dash\" name=\"long-dash\"></paper-item>\n              <paper-item class=\"long-dash-dot\" name=\"long-dash-dot\"></paper-item>\n              <paper-item class=\"long-dash-dot-dot\" name=\"long-dash-dot-dot\"></paper-item>\n            </paper-listbox>\n          </paper-dropdown-menu>\n\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.cap-type\">cap type</i18n-msg>\n          </label>\n          <select class=\"property-full-input select-content\" value-key=\"lineCap\" .value=${lineCap}>\n            <option value=\"butt\"><i18n-msg msgid=\"label.square\">square</i18n-msg></option>\n            <option value=\"round\"><i18n-msg msgid=\"label.round\">round</i18n-msg></option>\n          </select>\n\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.join-type\">join type</i18n-msg>\n          </label>\n          <select class=\"property-full-input select-content\" value-key=\"lineJoin\" .value=${lineJoin}>\n            <option value=\"miter\"><i18n-msg msgid=\"label.miter\">miter</i18n-msg></option>\n            <option value=\"round\"><i18n-msg msgid=\"label.round\">round</i18n-msg></option>\n            <option value=\"bevel\"><i18n-msg msgid=\"label.bevel\">bevel</i18n-msg></option>\n          </select>\n\n          ${this._isLine(this.selected)\n            ? html`\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.begin-type\">begin type</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type begin-no\">\n                  <!-- begin-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"begin\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${begin}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"begin-no\" name=\"none\"></paper-item>\n                    <paper-item class=\"begin-arrow\" name=\"arrow\"></paper-item>\n                    <paper-item class=\"begin-open-arrow\" name=\"open-arrow\"></paper-item>\n                    <paper-item class=\"begin-stealth-arrow\" name=\"sharp-arrow\"></paper-item>\n                    <paper-item class=\"begin-diamond-arrow\" name=\"diamond\"></paper-item>\n                    <paper-item class=\"begin-oval-arrow\" name=\"oval\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.begin-size\">begin size</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type begin-size1\">\n                  <!-- begin-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"beginSize\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${beginSize}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"begin-size1\" name=\"size1\"></paper-item>\n                    <paper-item class=\"begin-size2\" name=\"size2\"></paper-item>\n                    <paper-item class=\"begin-size3\" name=\"size3\"></paper-item>\n                    <paper-item class=\"begin-size4\" name=\"size4\"></paper-item>\n                    <paper-item class=\"begin-size5\" name=\"size5\"></paper-item>\n                    <paper-item class=\"begin-size6\" name=\"size6\"></paper-item>\n                    <paper-item class=\"begin-size7\" name=\"size7\"></paper-item>\n                    <paper-item class=\"begin-size8\" name=\"size8\"></paper-item>\n                    <paper-item class=\"begin-size9\" name=\"size9\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.end-type\">end type</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type end-no\">\n                  <!-- end-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"end\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${end}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"end-no\" name=\"none\"></paper-item>\n                    <paper-item class=\"end-arrow\" name=\"arrow\"></paper-item>\n                    <paper-item class=\"end-open-arrow\" name=\"open-arrow\"></paper-item>\n                    <paper-item class=\"end-stealth-arrow\" name=\"sharp-arrow\"></paper-item>\n                    <paper-item class=\"end-diamond-arrow\" name=\"diamond\"></paper-item>\n                    <paper-item class=\"end-oval-arrow\" name=\"oval\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.end-size\">end size</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type end-size1\">\n                  <!-- end-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"endSize\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${endSize}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"end-size1\" name=\"size1\"></paper-item>\n                    <paper-item class=\"end-size2\" name=\"size2\"></paper-item>\n                    <paper-item class=\"end-size3\" name=\"size3\"></paper-item>\n                    <paper-item class=\"end-size4\" name=\"size4\"></paper-item>\n                    <paper-item class=\"end-size5\" name=\"size5\"></paper-item>\n                    <paper-item class=\"end-size6\" name=\"size6\"></paper-item>\n                    <paper-item class=\"end-size7\" name=\"size7\"></paper-item>\n                    <paper-item class=\"end-size8\" name=\"size8\"></paper-item>\n                    <paper-item class=\"end-size9\" name=\"size9\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n              `\n            : html``}\n        </div>\n      </fieldset>\n    `\n  }\n\n  _isLine(selected: Component[]) {\n    var isLine = false\n\n    for (var i = 0; i < selected.length; i++) {\n      var comp = selected[i]\n\n      if (!comp.isLine || !comp.isLine()) {\n        isLine = false\n        return isLine\n      }\n\n      isLine = true\n    }\n\n    return isLine\n  }\n}\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/styles/styles.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu'\nimport '@things-factory/help'\nimport '@things-factory/modeller-ui/client/editors/things-editor-color'\nimport '@things-factory/modeller-ui/client/editors/things-editor-color-style'\nimport '@things-factory/modeller-ui/client/editors/things-editor-font-selector'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Component } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\n\n@customElement('property-style')\nclass PropertyStyles extends AbstractProperty {\n  static styles = [\n    PropertySharedStyle,\n    css`\n      paper-slider {\n        width: 100%;\n      }\n\n      .btn-group {\n        height: 24px;\n      }\n\n      .btn-group paper-button {\n        width: 30px;\n        height: 24px;\n        min-width: initial;\n        margin: 0 4px 0 0;\n        padding: 0;\n        border-radius: 0;\n        display: inline-block;\n        border-bottom: 2px solid #fff;\n\n        background: url(/assets/images/icon-properties.png) no-repeat;\n        background-size: 70%;\n      }\n\n      .btn-group paper-button.tbold {\n        background-position: 50% -170px;\n      }\n\n      .btn-group paper-button.titalic {\n        background-position: 50% -205px;\n      }\n\n      .btn-group paper-button.tunderline {\n        background-position: 50% -240px;\n      }\n\n      .btn-group paper-button.tstrikethrough {\n        background-position: 50% -415px;\n      }\n\n      .btn-group paper-button[active] {\n        border-color: #f2471c;\n      }\n\n      .line-type paper-listbox {\n        overflow: hidden;\n        max-width: 100px;\n      }\n      .line-type paper-item {\n        background: url(/assets/images/icon-properties-line-type.png) 50% 0 no-repeat;\n        min-height: 25px;\n        padding: 3px 9px;\n        width: 80px;\n      }\n\n      .line-type paper-item.solid {\n        background-position: 50% 10px;\n      }\n      .line-type paper-item.round-dot {\n        background-position: 50% -40px;\n      }\n      .line-type paper-item.square-dot {\n        background-position: 50% -90px;\n      }\n      .line-type paper-item.dash {\n        background-position: 50% -140px;\n      }\n      .line-type paper-item.dash-dot {\n        background-position: 50% -190px;\n      }\n      .line-type paper-item.long-dash {\n        background-position: 50% -240px;\n      }\n      .line-type paper-item.long-dash-dot {\n        background-position: 50% -290px;\n      }\n      .line-type paper-item.long-dash-dot-dot {\n        background-position: 50% -340px;\n      }\n\n      .line-type .paper-input-container input {\n        background: url(/assets/images/icon-properties-line-type.png) 50% 0 no-repeat !important;\n      }\n      .line-type.solid .paper-input-container input {\n        background-position: 50% 5px !important;\n      }\n      .line-type.round-dot .paper-input-container input {\n        background-position: 50% -45px !important;\n      }\n      .line-type.square-dot .paper-input-container input {\n        background-position: 50% -85px !important;\n      }\n      .line-type.dash .paper-input-container input {\n        background-position: 50% -145px !important;\n      }\n      .line-type.dash-dot .paper-input-container input {\n        background-position: 50% -185px !important;\n      }\n      .line-type.long-dash .paper-input-container input {\n        background-position: 50% -245px !important;\n      }\n      .line-type.long-dash-dot .paper-input-container input {\n        background-position: 50% -285px !important;\n      }\n      .line-type.long-dash-dot-dot .paper-input-container input {\n        background-position: 50% -345px !important;\n      }\n\n      .arrow-type paper-menu {\n        overflow: hidden;\n        max-width: 140px;\n      }\n      .arrow-type paper-item {\n        background: url(/assets/images/icon-properties-arrow-type.png) 50% 0 no-repeat;\n        min-height: 30px;\n        padding: 3px 7px;\n        width: 30px;\n        float: left;\n      }\n      .arrow-type paper-item.begin-no {\n        background-position: 50% 16px;\n      }\n      .arrow-type paper-item.begin-arrow {\n        background-position: 50% -39px;\n      }\n      .arrow-type paper-item.begin-open-arrow {\n        background-position: 50% -89px;\n      }\n      .arrow-type paper-item.begin-stealth-arrow {\n        background-position: 50% -139px;\n      }\n      .arrow-type paper-item.begin-diamond-arrow {\n        background-position: 50% -190px;\n      }\n      .arrow-type paper-item.begin-oval-arrow {\n        background-position: 50% -238px;\n      }\n      .arrow-type paper-item.begin-size1 {\n        background-position: 50% -286px;\n      }\n      .arrow-type paper-item.begin-size2 {\n        background-position: 50% -336px;\n      }\n      .arrow-type paper-item.begin-size3 {\n        background-position: 50% -386px;\n      }\n      .arrow-type paper-item.begin-size4 {\n        background-position: 50% -436px;\n      }\n      .arrow-type paper-item.begin-size5 {\n        background-position: 50% -486px;\n      }\n      .arrow-type paper-item.begin-size6 {\n        background-position: 50% -536px;\n      }\n      .arrow-type paper-item.begin-size7 {\n        background-position: 50% -589px;\n      }\n      .arrow-type paper-item.begin-size8 {\n        background-position: 50% -639px;\n      }\n      .arrow-type paper-item.begin-size9 {\n        background-position: 50% -689px;\n      }\n      .arrow-type paper-item.end-no {\n        background-position: 50% 16px;\n      }\n      .arrow-type paper-item.end-arrow {\n        background-position: 50% -739px;\n      }\n      .arrow-type paper-item.end-open-arrow {\n        background-position: 50% -789px;\n      }\n      .arrow-type paper-item.end-stealth-arrow {\n        background-position: 50% -839px;\n      }\n      .arrow-type paper-item.end-diamond-arrow {\n        background-position: 50% -890px;\n      }\n      .arrow-type paper-item.end-oval-arrow {\n        background-position: 50% -938px;\n      }\n      .arrow-type paper-item.end-size1 {\n        background-position: 50% -986px;\n      }\n      .arrow-type paper-item.end-size2 {\n        background-position: 50% -1036px;\n      }\n      .arrow-type paper-item.end-size3 {\n        background-position: 50% -1086px;\n      }\n      .arrow-type paper-item.end-size4 {\n        background-position: 50% -1136px;\n      }\n      .arrow-type paper-item.end-size5 {\n        background-position: 50% -1186px;\n      }\n      .arrow-type paper-item.end-size6 {\n        background-position: 50% -1236px;\n      }\n      .arrow-type paper-item.end-size7 {\n        background-position: 50% -1289px;\n      }\n      .arrow-type paper-item.end-size8 {\n        background-position: 50% -1339px;\n      }\n      .arrow-type paper-item.end-size9 {\n        background-position: 50% -1389px;\n      }\n\n      .arrow-type .paper-input-container input {\n        background: url(/assets/images/icon-properties-arrow-type.png) 110% 0 no-repeat !important;\n      }\n      .arrow-type.begin-no .paper-input-container input {\n        background-position: 110% 5px !important;\n      }\n      .arrow-type.begin-arrow .paper-input-container input {\n        background-position: 110% -50px !important;\n      }\n      .arrow-type.begin-open-arrow .paper-input-container input {\n        background-position: 110% -100px !important;\n      }\n      .arrow-type.begin-stealth-arrow .paper-input-container input {\n        background-position: 110% -150px !important;\n      }\n      .arrow-type.begin-diamond-arrow .paper-input-container input {\n        background-position: 110% -200px !important;\n      }\n      .arrow-type.begin-oval-arrow .paper-input-container input {\n        background-position: 110% -250px !important;\n      }\n      .arrow-type.begin-size1 .paper-input-container input {\n        background-position: 110% -298px !important;\n      }\n      .arrow-type.begin-size2 .paper-input-container input {\n        background-position: 110% -348px !important;\n      }\n      .arrow-type.begin-size3 .paper-input-container input {\n        background-position: 110% -398px !important;\n      }\n      .arrow-type.begin-size4 .paper-input-container input {\n        background-position: 110% -448px !important;\n      }\n      .arrow-type.begin-size5 .paper-input-container input {\n        background-position: 110% -498px !important;\n      }\n      .arrow-type.begin-size6 .paper-input-container input {\n        background-position: 110% -548px !important;\n      }\n      .arrow-type.begin-size7 .paper-input-container input {\n        background-position: 110% -600px !important;\n      }\n      .arrow-type.begin-size8 .paper-input-container input {\n        background-position: 110% -650px !important;\n      }\n      .arrow-type.begin-size9 .paper-input-container input {\n        background-position: 110% -700px !important;\n      }\n      .arrow-type.end-no .paper-input-container input {\n        background-position: 110% 5px !important;\n      }\n      .arrow-type.end-arrow .paper-input-container input {\n        background-position: 110% -750px !important;\n      }\n      .arrow-type.end-open-arrow .paper-input-container input {\n        background-position: 110% -800px !important;\n      }\n      .arrow-type.end-stealth-arrow .paper-input-container input {\n        background-position: 110% -850px !important;\n      }\n      .arrow-type.end-diamond-arrow .paper-input-container input {\n        background-position: 110% -900px !important;\n      }\n      .arrow-type.end-oval-arrow .paper-input-container input {\n        background-position: 110% -950px !important;\n      }\n      .arrow-type.end-size1 .paper-input-container input {\n        background-position: 110% -998px !important;\n      }\n      .arrow-type.end-size2 .paper-input-container input {\n        background-position: 110% -1048px !important;\n      }\n      .arrow-type.end-size3 .paper-input-container input {\n        background-position: 110% -1098px !important;\n      }\n      .arrow-type.end-size4 .paper-input-container input {\n        background-position: 110% -1148px !important;\n      }\n      .arrow-type.end-size5 .paper-input-container input {\n        background-position: 110% -1198px !important;\n      }\n      .arrow-type.end-size6 .paper-input-container input {\n        background-position: 110% -1248px !important;\n      }\n      .arrow-type.end-size7 .paper-input-container input {\n        background-position: 110% -1300px !important;\n      }\n      .arrow-type.end-size8 .paper-input-container input {\n        background-position: 110% -1350px !important;\n      }\n      .arrow-type.end-size9 .paper-input-container input {\n        background-position: 110% -1400px !important;\n      }\n    `\n  ]\n  @property({ type: Object }) value: any = {}\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) fonts: any[] = []\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var {\n      alpha,\n      fontFamily,\n      fontSize,\n      lineHeight,\n      fontColor,\n      bold,\n      italic,\n      fillStyle,\n      lineWidth,\n      strokeStyle,\n      lineDash,\n      lineCap,\n      lineJoin,\n      begin,\n      beginSize,\n      end,\n      endSize\n    } = this.value\n\n    return html`\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</title-with-help>\n        </legend>\n        <paper-slider min=\"0\" max=\"1\" step=\"0.1\" value-key=\"alpha\" .value=${alpha || 1} editable> </paper-slider>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\"\n            >text style</title-with-help\n          >\n        </legend>\n\n        <div class=\"property-grid\">\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.font-family\">Font Family</i18n-msg>\n          </label>\n\n          <things-editor-font-selector\n            value-key=\"fontFamily\"\n            .value=${fontFamily}\n            class=\"property-full-input\"\n            custom-editor\n          ></things-editor-font-selector>\n\n          <label class=\"property-half-label icon-only-label font-size\"></label>\n          <input type=\"number\" value-key=\"fontSize\" .value=${fontSize} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label lineHeight\"></label>\n          <input type=\"number\" value-key=\"lineHeight\" .value=${lineHeight} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label color\"></label>\n          <things-editor-color value-key=\"fontColor\" .value=${fontColor} class=\"property-half-input\">\n          </things-editor-color>\n\n          <label class=\"property-half-label\"></label>\n          <div class=\"property-half-input btn-group\">\n            <paper-button toggles value-key=\"bold\" ?active=${bold} class=\"tbold\"> </paper-button>\n            <paper-button toggles value-key=\"italic\" ?active=${italic} class=\"titalic\"> </paper-button>\n          </div>\n        </div>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\"\n            >fill style</title-with-help\n          >\n        </legend>\n\n        <things-editor-color-style value-key=\"fillStyle\" .value=${fillStyle}> </things-editor-color-style>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></title-with-help>\n        </legend>\n\n        <div class=\"property-grid\">\n          <label class=\"property-half-label icon-only-label linewidth\"></label>\n          <input type=\"number\" value-key=\"lineWidth\" .value=${lineWidth} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label color\"></label>\n          <things-editor-color value-key=\"strokeStyle\" .value=${strokeStyle} class=\"property-half-input\">\n          </things-editor-color>\n\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.line-type\">line type</i18n-msg>\n          </label>\n          <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input line-type solid\">\n            <!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n            <paper-listbox\n              value-key=\"lineDash\"\n              @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n              slot=\"dropdown-content\"\n              .selected=${lineDash}\n              attr-for-selected=\"name\"\n            >\n              <paper-item class=\"solid\" name=\"solid\"></paper-item>\n              <paper-item class=\"round-dot\" name=\"round-dot\"></paper-item>\n              <paper-item class=\"square-dot\" name=\"square-dot\"></paper-item>\n              <paper-item class=\"dash\" name=\"dash\"></paper-item>\n              <paper-item class=\"dash-dot\" name=\"dash-dot\"></paper-item>\n              <paper-item class=\"long-dash\" name=\"long-dash\"></paper-item>\n              <paper-item class=\"long-dash-dot\" name=\"long-dash-dot\"></paper-item>\n              <paper-item class=\"long-dash-dot-dot\" name=\"long-dash-dot-dot\"></paper-item>\n            </paper-listbox>\n          </paper-dropdown-menu>\n\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.cap-type\">cap type</i18n-msg>\n          </label>\n          <select class=\"property-full-input select-content\" value-key=\"lineCap\" .value=${lineCap}>\n            <option value=\"butt\"><i18n-msg msgid=\"label.square\">square</i18n-msg></option>\n            <option value=\"round\"><i18n-msg msgid=\"label.round\">round</i18n-msg></option>\n          </select>\n\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.join-type\">join type</i18n-msg>\n          </label>\n          <select class=\"property-full-input select-content\" value-key=\"lineJoin\" .value=${lineJoin}>\n            <option value=\"miter\"><i18n-msg msgid=\"label.miter\">miter</i18n-msg></option>\n            <option value=\"round\"><i18n-msg msgid=\"label.round\">round</i18n-msg></option>\n            <option value=\"bevel\"><i18n-msg msgid=\"label.bevel\">bevel</i18n-msg></option>\n          </select>\n\n          ${this._isLine(this.selected)\n            ? html`\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.begin-type\">begin type</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type begin-no\">\n                  <!-- begin-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"begin\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${begin}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"begin-no\" name=\"none\"></paper-item>\n                    <paper-item class=\"begin-arrow\" name=\"arrow\"></paper-item>\n                    <paper-item class=\"begin-open-arrow\" name=\"open-arrow\"></paper-item>\n                    <paper-item class=\"begin-stealth-arrow\" name=\"sharp-arrow\"></paper-item>\n                    <paper-item class=\"begin-diamond-arrow\" name=\"diamond\"></paper-item>\n                    <paper-item class=\"begin-oval-arrow\" name=\"oval\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.begin-size\">begin size</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type begin-size1\">\n                  <!-- begin-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"beginSize\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${beginSize}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"begin-size1\" name=\"size1\"></paper-item>\n                    <paper-item class=\"begin-size2\" name=\"size2\"></paper-item>\n                    <paper-item class=\"begin-size3\" name=\"size3\"></paper-item>\n                    <paper-item class=\"begin-size4\" name=\"size4\"></paper-item>\n                    <paper-item class=\"begin-size5\" name=\"size5\"></paper-item>\n                    <paper-item class=\"begin-size6\" name=\"size6\"></paper-item>\n                    <paper-item class=\"begin-size7\" name=\"size7\"></paper-item>\n                    <paper-item class=\"begin-size8\" name=\"size8\"></paper-item>\n                    <paper-item class=\"begin-size9\" name=\"size9\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.end-type\">end type</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type end-no\">\n                  <!-- end-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"end\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${end}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"end-no\" name=\"none\"></paper-item>\n                    <paper-item class=\"end-arrow\" name=\"arrow\"></paper-item>\n                    <paper-item class=\"end-open-arrow\" name=\"open-arrow\"></paper-item>\n                    <paper-item class=\"end-stealth-arrow\" name=\"sharp-arrow\"></paper-item>\n                    <paper-item class=\"end-diamond-arrow\" name=\"diamond\"></paper-item>\n                    <paper-item class=\"end-oval-arrow\" name=\"oval\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.end-size\">end size</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type end-size1\">\n                  <!-- end-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"endSize\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${endSize}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"end-size1\" name=\"size1\"></paper-item>\n                    <paper-item class=\"end-size2\" name=\"size2\"></paper-item>\n                    <paper-item class=\"end-size3\" name=\"size3\"></paper-item>\n                    <paper-item class=\"end-size4\" name=\"size4\"></paper-item>\n                    <paper-item class=\"end-size5\" name=\"size5\"></paper-item>\n                    <paper-item class=\"end-size6\" name=\"size6\"></paper-item>\n                    <paper-item class=\"end-size7\" name=\"size7\"></paper-item>\n                    <paper-item class=\"end-size8\" name=\"size8\"></paper-item>\n                    <paper-item class=\"end-size9\" name=\"size9\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n              `\n            : html``}\n        </div>\n      </fieldset>\n    `\n  }\n\n  _isLine(selected: Component[]) {\n    var isLine = false\n\n    for (var i = 0; i < selected.length; i++) {\n      var comp = selected[i]\n\n      if (!comp.isLine || !comp.isLine()) {\n        isLine = false\n        return isLine\n      }\n\n      isLine = true\n    }\n\n    return isLine\n  }\n}\n"]}