@operato/board 0.2.45 → 0.2.46

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

@@ -0,0 +1,78 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@things-factory/help';
+import './specific-properties-builder';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PropertySharedStyle } from '../property-shared-style';
+let PropertySpecific = class PropertySpecific extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.scene = null;
+        this.selected = [];
+        this.props = [];
+        this.propertyEditor = [];
+        this.boundINeedSelected = this._onINeedSelected.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('i-need-selected', this.boundINeedSelected);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('i-need-selected', this.boundINeedSelected);
+    }
+    render() {
+        var _a;
+        const selected = this.selected && this.selected[0];
+        const value = this.value || {};
+        return html `
+      <label>${value.type}<help-icon .topic=${(_a = selected === null || selected === void 0 ? void 0 : selected.nature) === null || _a === void 0 ? void 0 : _a.help}></help-icon></label>
+
+      <specific-properties-builder .value=${value} .props=${this.props} .propertyEditor=${this.propertyEditor}>
+      </specific-properties-builder>
+    `;
+    }
+    _onINeedSelected(e) {
+        e.stopPropagation();
+        var { callback } = e.detail;
+        this.scene.undoableChange(() => {
+            callback.call(null, this.selected);
+        });
+    }
+};
+PropertySpecific.styles = [
+    PropertySharedStyle,
+    css `
+      label {
+        display: block;
+        margin: 10px;
+
+        text-align: right;
+        font: bold 14px var(--theme-font);
+        color: var(--primary-color);
+        text-transform: capitalize;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], PropertySpecific.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], PropertySpecific.prototype, "scene", void 0);
+__decorate([
+    property({ type: Array })
+], PropertySpecific.prototype, "selected", void 0);
+__decorate([
+    property({ type: Array })
+], PropertySpecific.prototype, "props", void 0);
+__decorate([
+    property({ type: Array })
+], PropertySpecific.prototype, "propertyEditor", void 0);
+PropertySpecific = __decorate([
+    customElement('property-specific')
+], PropertySpecific);
+//# sourceMappingURL=specifics.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"specifics.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/specifics/specifics.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,sBAAsB,CAAA;AAC7B,OAAO,+BAA+B,CAAA;AAGtC,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAG9D,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAiB8B,UAAK,GAAiB,IAAI,CAAA;QAC3B,aAAQ,GAAgB,EAAE,CAAA;QAC1B,UAAK,GAAU,EAAE,CAAA;QACjB,mBAAc,GAAU,EAAE,CAAA;QAE7C,uBAAkB,GAAQ,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAmCpE,CAAC;IAjCC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAA;IACnE,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAA;IACtE,CAAC;IAED,MAAM;;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;QAClD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;eACA,KAAK,CAAC,IAAI,qBAAqB,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,0CAAE,IAAI;;4CAExB,KAAK,WAAW,IAAI,CAAC,KAAK,oBAAoB,IAAI,CAAC,cAAc;;KAExG,CAAA;IACH,CAAC;IAED,gBAAgB,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;QAE3B,IAAI,CAAC,KAAM,CAAC,cAAc,CAAC,GAAG,EAAE;YAC9B,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QACpC,CAAC,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AAxDQ,uBAAM,GAAG;IACd,mBAAmB;IACnB,GAAG,CAAA;;;;;;;;;;KAUF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAA2B;AAC3B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAA2B;AAC1B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wDAA2B;AApBjD,gBAAgB;IADrB,aAAa,CAAC,mBAAmB,CAAC;GAC7B,gBAAgB,CAyDrB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/help'\nimport './specific-properties-builder'\n\nimport { Component, Scene } from '@hatiolab/things-scene'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { PropertySharedStyle } from '../property-shared-style'\n\n@customElement('property-specific')\nclass PropertySpecific extends LitElement {\n  static styles = [\n    PropertySharedStyle,\n    css`\n      label {\n        display: block;\n        margin: 10px;\n\n        text-align: right;\n        font: bold 14px var(--theme-font);\n        color: var(--primary-color);\n        text-transform: capitalize;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) props: any[] = []\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  private boundINeedSelected: any = this._onINeedSelected.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.addEventListener('i-need-selected', this.boundINeedSelected)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.removeEventListener('i-need-selected', this.boundINeedSelected)\n  }\n\n  render() {\n    const selected = this.selected && this.selected[0]\n    const value = this.value || {}\n\n    return html`\n      <label>${value.type}<help-icon .topic=${selected?.nature?.help}></help-icon></label>\n\n      <specific-properties-builder .value=${value} .props=${this.props} .propertyEditor=${this.propertyEditor}>\n      </specific-properties-builder>\n    `\n  }\n\n  _onINeedSelected(e: CustomEvent) {\n    e.stopPropagation()\n\n    var { callback } = e.detail\n\n    this.scene!.undoableChange(() => {\n      callback.call(null, this.selected)\n    })\n  }\n}\n"]}

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

@@ -0,0 +1,9 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+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

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