@fmsim/board 1.0.87 → 2.0.0-beta.10

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

@@ -2,16 +2,19 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
+import '@operato/popup/ox-popup-list.js';
 import '@operato/input/ox-input-color.js';
 import '@operato/input/ox-input-range.js';
-import '@operato/app/input/ox-input-fill-style.js';
+import '@operato/input/ox-input-fill-style.js';
+import '@operato/input/ox-select.js';
 import '@operato/i18n/ox-i18n.js';
+import '@material/web/icon/icon.js';
 import '../../../component/restful-input-fill-style.js';
-import { css, html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { css, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
+import { LineStyles } from '@operato/styles/line-styles.js';
 import { AbstractProperty } from '../abstract-property.js';
-import { PropertySharedStyle } from '../property-shared-style.js';
 import { isRestfulAvailable } from '@fmsim/api';
 export class PropertyStyles extends AbstractProperty {
     constructor() {
@@ -19,14 +22,23 @@ export class PropertyStyles extends AbstractProperty {
         this.value = {};
         this.selected = [];
         this.fonts = [];
-        this.fontAvailable = false;
     }
-    firstUpdated() {
-        this.fontAvailable = !sessionStorage.getItem('ThingsFactory-UseExternServer');
+    connectedCallback() {
+        super.connectedCallback();
         this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
     }
+    onButtonGroupClick(e) {
+        const target = e.target;
+        if (target.hasAttribute('value-key')) {
+            target.toggleAttribute('active');
+            target.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true
+            }));
+        }
+    }
     render() {
-        var { alpha = 1, fontFamily, fontSize, lineHeight, letterSpacing, fontColor, bold, italic, fillStyle, lineWidth, strokeStyle, lineDash, lineCap, lineJoin, begin, beginSize, end, endSize } = this.value || {};
+        var { alpha = 1, fontFamily, fontSize, lineHeight, letterSpacing, fontColor, bold, italic, fillStyle, lineWidth, strokeStyle, lineDash = 'solid', lineCap, lineJoin, begin = 'none', beginSize = 'size1', end = 'none', endSize = 'size1' } = this.value || {};
         return html `
       <fieldset>
         <legend>
@@ -41,39 +53,27 @@ export class PropertyStyles extends AbstractProperty {
         </legend>
 
         <div class="property-grid">
-          ${this.fontAvailable
-            ? html `
-                <label class="property-full-label">
-                  <ox-i18n msgid="label.font-family">Font Family</ox-i18n>
-                </label>
+          <label>
+            <ox-i18n msgid="label.font-family">Font Family</ox-i18n>
+          </label>
 
-                <ox-font-selector
-                  value-key="fontFamily"
-                  .value=${fontFamily}
-                  class="property-full-input"
-                  custom-editor
-                ></ox-font-selector>
-              `
-            : html ``}
+          <ox-font-selector class="custom-editor" value-key="fontFamily" .value=${fontFamily}></ox-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="onethird-label icon-only-label"><md-icon>format_size</md-icon></label>
+          <input type="number" value-key="fontSize" .value=${fontSize} class="onethird-editor" />
 
-          <label class="property-half-label icon-only-label lineHeight"></label>
-          <input type="number" value-key="lineHeight" .value=${lineHeight} class="property-half-input" />
+          <label class="onethird-label icon-only-label"><md-icon>format_line_spacing</md-icon></label>
+          <input type="number" value-key="lineHeight" .value=${lineHeight} class="onethird-editor" />
 
-          <label class="property-half-label icon-only-label letterSpacing"></label>
-          <input type="number" value-key="letterSpacing" .value=${letterSpacing} class="property-half-input" />
+          <label class="onethird-label icon-only-label"><md-icon>format_letter_spacing</md-icon></label>
+          <input type="number" value-key="letterSpacing" .value=${letterSpacing} class="onethird-editor" />
 
-          <label class="property-half-label icon-only-label color"></label>
-          <ox-input-color value-key="fontColor" .value=${fontColor} class="property-half-input"> </ox-input-color>
+          <label class="twothird-label icon-only-label"><md-icon>format_color_text</md-icon></label>
+          <ox-input-color value-key="fontColor" .value=${fontColor} class="twothird-editor"> </ox-input-color>
 
-          <label class="property-full-label">
-            <ox-i18n msgid="label.text-formatting">Text Formatting</ox-i18n>
-          </label>
-          <div class="property-full-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 class="onethird-full btn-group" @click=${this.onButtonGroupClick}>
+            <md-icon value-key="bold" ?active=${bold}>format_bold</md-icon>
+            <md-icon value-key="italic" ?active=${italic}>format_italic</md-icon>
           </div>
         </div>
       </fieldset>
@@ -94,47 +94,44 @@ export class PropertyStyles extends AbstractProperty {
         </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="half-label icon-only-label"><md-icon>line_weight</md-icon></label>
+          <input type="number" value-key="lineWidth" .value=${lineWidth} class="half-editor" />
 
-          <label class="property-half-label icon-only-label color"></label>
-          <ox-input-color value-key="strokeStyle" .value=${strokeStyle} class="property-half-input"> </ox-input-color>
+          <label class="half-label icon-only-label"><md-icon>border_color</md-icon></label>
+          <ox-input-color value-key="strokeStyle" .value=${strokeStyle} class="half-editor"> </ox-input-color>
 
-          <label class="property-full-label">
+          <label>
             <ox-i18n msgid="label.line-type">line type</ox-i18n>
           </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">
+          <ox-select value-key="lineDash" .value=${lineDash} class="custom-editor">
+            <div class="line-type ${lineDash}" slot="label"></div>
+            <ox-popup-list align-left nowrap>
+              <style>
+                ${LineStyles.cssText}
+              </style>
+              <div class="line-type solid" value="solid" option></div>
+              <div class="line-type round-dot" value="round-dot" option></div>
+              <div class="line-type square-dot" value="square-dot" option></div>
+              <div class="line-type dash" value="dash" option></div>
+              <div class="line-type dash-dot" value="dash-dot" option></div>
+              <div class="line-type long-dash" value="long-dash" option></div>
+              <div class="line-type long-dash-dot" value="long-dash-dot" option></div>
+              <div class="line-type long-dash-dot-dot" value="long-dash-dot-dot" option></div>
+            </ox-popup-list>
+          </ox-select>
+
+          <label>
             <ox-i18n msgid="label.cap-type">cap type</ox-i18n>
           </label>
-          <select class="property-full-input select-content" value-key="lineCap" .value=${lineCap}>
+          <select value-key="lineCap" .value=${lineCap}>
             <option value="butt"><ox-i18n msgid="label.square">square</ox-i18n></option>
             <option value="round"><ox-i18n msgid="label.round">round</ox-i18n></option>
           </select>
 
-          <label class="property-full-label">
+          <label>
             <ox-i18n msgid="label.join-type">join type</ox-i18n>
           </label>
-          <select class="property-full-input select-content" value-key="lineJoin" .value=${lineJoin}>
+          <select value-key="lineJoin" .value=${lineJoin}>
             <option value="miter"><ox-i18n msgid="label.miter">miter</ox-i18n></option>
             <option value="round"><ox-i18n msgid="label.round">round</ox-i18n></option>
             <option value="bevel"><ox-i18n msgid="label.bevel">bevel</ox-i18n></option>
@@ -142,95 +139,83 @@ export class PropertyStyles extends AbstractProperty {
 
           ${this._isLine(this.selected)
             ? html `
-                <label class="property-full-label">
+                <label>
                   <ox-i18n msgid="label.begin-type">begin type</ox-i18n>
                 </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">
+                <ox-select value-key="begin" .value=${begin} class="custom-editor">
+                  <div class="arrow-type ${begin ? `begin-${begin}` : nothing}" slot="label"></div>
+                  <ox-popup-list align-left nowrap>
+                    <style>
+                      ${LineStyles.cssText}
+                    </style>
+                    <div class="arrow-type begin-none" value="none" option></div>
+                    <div class="arrow-type begin-arrow" value="arrow" option></div>
+                    <div class="arrow-type begin-open-arrow" value="open-arrow" option></div>
+                    <div class="arrow-type begin-sharp-arrow" value="sharp-arrow" option></div>
+                    <div class="arrow-type begin-diamond" value="diamond" option></div>
+                    <div class="arrow-type begin-oval" value="oval" option></div>
+                  </ox-popup-list>
+                </ox-select>
+
+                <label>
                   <ox-i18n msgid="label.begin-size">begin size</ox-i18n>
                 </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">
+                <ox-select value-key="beginSize" .value=${beginSize} class="custom-editor">
+                  <div class="arrow-type ${beginSize ? `begin-${beginSize}` : nothing}" slot="label"></div>
+                  <ox-popup-list align-left nowrap>
+                    <style>
+                      ${LineStyles.cssText}
+                    </style>
+                    <div class="arrow-type begin-size1" value="size1" option></div>
+                    <div class="arrow-type begin-size2" value="size2" option></div>
+                    <div class="arrow-type begin-size3" value="size3" option></div>
+                    <div class="arrow-type begin-size4" value="size4" option></div>
+                    <div class="arrow-type begin-size5" value="size5" option></div>
+                    <div class="arrow-type begin-size6" value="size6" option></div>
+                    <div class="arrow-type begin-size7" value="size7" option></div>
+                    <div class="arrow-type begin-size8" value="size8" option></div>
+                    <div class="arrow-type begin-size9" value="size9" option></div>
+                  </ox-popup-list>
+                </ox-select>
+
+                <label>
                   <ox-i18n msgid="label.end-type">end type</ox-i18n>
                 </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">
+                <ox-select value-key="end" .value=${end} class="custom-editor">
+                  <div class="arrow-type ${end ? `end-${end}` : nothing}" slot="label"></div>
+                  <ox-popup-list align-left nowrap>
+                    <style>
+                      ${LineStyles.cssText}
+                    </style>
+                    <div class="arrow-type end-none" value="none" option></div>
+                    <div class="arrow-type end-arrow" value="arrow" option></div>
+                    <div class="arrow-type end-open-arrow" value="open-arrow" option></div>
+                    <div class="arrow-type end-sharp-arrow" value="sharp-arrow" option></div>
+                    <div class="arrow-type end-diamond" value="diamond" option></div>
+                    <div class="arrow-type end-oval" value="oval" option></div>
+                  </ox-popup-list>
+                </ox-select>
+
+                <label>
                   <ox-i18n msgid="label.end-size">end size</ox-i18n>
                 </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>
+                <ox-select value-key="endSize" .value=${endSize} class="custom-editor">
+                  <div class="arrow-type ${endSize ? `end-${endSize}` : nothing}" slot="label"></div>
+                  <ox-popup-list align-left nowrap>
+                    <style>
+                      ${LineStyles.cssText}
+                    </style>
+                    <div class="arrow-type end-size1" value="size1" option></div>
+                    <div class="arrow-type end-size2" value="size2" option></div>
+                    <div class="arrow-type end-size3" value="size3" option></div>
+                    <div class="arrow-type end-size4" value="size4" option></div>
+                    <div class="arrow-type end-size5" value="size5" option></div>
+                    <div class="arrow-type end-size6" value="size6" option></div>
+                    <div class="arrow-type end-size7" value="size7" option></div>
+                    <div class="arrow-type end-size8" value="size8" option></div>
+                    <div class="arrow-type end-size9" value="size9" option></div>
+                  </ox-popup-list>
+                </ox-select>
               `
             : html ``}
         </div>
@@ -251,308 +236,29 @@ export class PropertyStyles extends AbstractProperty {
     }
 }
 PropertyStyles.styles = [
-    PropertySharedStyle,
+    PropertyGridStyles,
+    LineStyles,
     css `
       ox-input-range {
         width: 100%;
       }
 
       .btn-group {
-        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--spacing-medium, 8px);
       }
 
-      .btn-group paper-button {
+      .btn-group * {
         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: var(--url-icon-properties) 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: var(--url-icon-properties-line-type) 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: var(--url-icon-properties-line-type) 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: var(--url-icon-properties-arrow-type) 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: var(--url-icon-properties-arrow-type) 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;
+      .btn-group [active] {
+        border-bottom: 2px solid #f2471c;
       }
     `
 ];
@@ -565,7 +271,4 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], PropertyStyles.prototype, "fonts", void 0);
-__decorate([
-    state()
-], PropertyStyles.prototype, "fontAvailable", void 0);
 //# sourceMappingURL=styles.js.map