@fmsim/board 2.0.0-beta.3 → 2.0.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/custom-elements.json +1426 -1422
  2. package/dist/src/modeller/property-sidebar/property-sidebar.js +3 -16
  3. package/dist/src/modeller/property-sidebar/property-sidebar.js.map +1 -1
  4. package/dist/src/modeller/property-sidebar/styles/styles.d.ts +6 -4
  5. package/dist/src/modeller/property-sidebar/styles/styles.js +139 -436
  6. package/dist/src/modeller/property-sidebar/styles/styles.js.map +1 -1
  7. package/dist/tsconfig.tsbuildinfo +1 -1
  8. package/package.json +3 -6
package/dist/src/modeller/property-sidebar/styles/styles.js CHANGED
@@ -2,16 +2,19 @@
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
4
  import { __decorate } from "tslib";
5
- import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
5
+ import '@operato/popup/ox-popup-list.js';
6
6
  import '@operato/input/ox-input-color.js';
7
7
  import '@operato/input/ox-input-range.js';
8
8
  import '@operato/input/ox-input-fill-style.js';
9
+ import '@operato/input/ox-select.js';
9
10
  import '@operato/i18n/ox-i18n.js';
11
+ import '@material/web/icon/icon.js';
10
12
  import '../../../component/restful-input-fill-style.js';
11
- import { css, html } from 'lit';
12
- import { property, state } from 'lit/decorators.js';
13
+ import { css, html, nothing } from 'lit';
14
+ import { property } from 'lit/decorators.js';
15
+ import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
16
+ import { LineStyles } from '@operato/styles/line-styles.js';
13
17
  import { AbstractProperty } from '../abstract-property.js';
14
- import { PropertySharedStyle } from '../property-shared-style.js';
15
18
  import { isRestfulAvailable } from '@fmsim/api';
16
19
  export class PropertyStyles extends AbstractProperty {
17
20
  constructor() {
@@ -19,14 +22,23 @@ export class PropertyStyles extends AbstractProperty {
19
22
  this.value = {};
20
23
  this.selected = [];
21
24
  this.fonts = [];
22
- this.fontAvailable = false;
23
25
  }
24
- firstUpdated() {
25
- this.fontAvailable = !sessionStorage.getItem('ThingsFactory-UseExternServer');
26
+ connectedCallback() {
27
+ super.connectedCallback();
26
28
  this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
27
29
  }
30
+ onButtonGroupClick(e) {
31
+ const target = e.target;
32
+ if (target.hasAttribute('value-key')) {
33
+ target.toggleAttribute('active');
34
+ target.dispatchEvent(new CustomEvent('change', {
35
+ bubbles: true,
36
+ composed: true
37
+ }));
38
+ }
39
+ }
28
40
  render() {
29
- var { alpha = 1, fontFamily, fontSize, lineHeight, letterSpacing, fontColor, bold, italic, fillStyle, lineWidth, strokeStyle, lineDash, lineCap, lineJoin, begin, beginSize, end, endSize } = this.value || {};
41
+ 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 || {};
30
42
  return html `
31
43
  <fieldset>
32
44
  <legend>
@@ -41,39 +53,27 @@ export class PropertyStyles extends AbstractProperty {
41
53
  </legend>
42
54
 
43
55
  <div class="property-grid">
44
- ${this.fontAvailable
45
- ? html `
46
- <label class="property-full-label">
47
- <ox-i18n msgid="label.font-family">Font Family</ox-i18n>
48
- </label>
56
+ <label>
57
+ <ox-i18n msgid="label.font-family">Font Family</ox-i18n>
58
+ </label>
49
59
 
50
- <ox-font-selector
51
- value-key="fontFamily"
52
- .value=${fontFamily}
53
- class="property-full-input"
54
- custom-editor
55
- ></ox-font-selector>
56
- `
57
- : html ``}
60
+ <ox-font-selector class="custom-editor" value-key="fontFamily" .value=${fontFamily}></ox-font-selector>
58
61
 
59
- <label class="property-half-label icon-only-label font-size"></label>
60
- <input type="number" value-key="fontSize" .value=${fontSize} class="property-half-input" />
62
+ <label class="onethird-label icon-only-label"><md-icon>format_size</md-icon></label>
63
+ <input type="number" value-key="fontSize" .value=${fontSize} class="onethird-editor" />
61
64
 
62
- <label class="property-half-label icon-only-label lineHeight"></label>
63
- <input type="number" value-key="lineHeight" .value=${lineHeight} class="property-half-input" />
65
+ <label class="onethird-label icon-only-label"><md-icon>format_line_spacing</md-icon></label>
66
+ <input type="number" value-key="lineHeight" .value=${lineHeight} class="onethird-editor" />
64
67
 
65
- <label class="property-half-label icon-only-label letterSpacing"></label>
66
- <input type="number" value-key="letterSpacing" .value=${letterSpacing} class="property-half-input" />
68
+ <label class="onethird-label icon-only-label"><md-icon>format_letter_spacing</md-icon></label>
69
+ <input type="number" value-key="letterSpacing" .value=${letterSpacing} class="onethird-editor" />
67
70
 
68
- <label class="property-half-label icon-only-label color"></label>
69
- <ox-input-color value-key="fontColor" .value=${fontColor} class="property-half-input"> </ox-input-color>
71
+ <label class="twothird-label icon-only-label"><md-icon>format_color_text</md-icon></label>
72
+ <ox-input-color value-key="fontColor" .value=${fontColor} class="twothird-editor"> </ox-input-color>
70
73
 
71
- <label class="property-full-label">
72
- <ox-i18n msgid="label.text-formatting">Text Formatting</ox-i18n>
73
- </label>
74
- <div class="property-full-input btn-group">
75
- <paper-button toggles value-key="bold" ?active=${bold} class="tbold"> </paper-button>
76
- <paper-button toggles value-key="italic" ?active=${italic} class="titalic"> </paper-button>
74
+ <div class="onethird-full btn-group" @click=${this.onButtonGroupClick}>
75
+ <md-icon value-key="bold" ?active=${bold}>format_bold</md-icon>
76
+ <md-icon value-key="italic" ?active=${italic}>format_italic</md-icon>
77
77
  </div>
78
78
  </div>
79
79
  </fieldset>
@@ -94,47 +94,44 @@ export class PropertyStyles extends AbstractProperty {
94
94
  </legend>
95
95
 
96
96
  <div class="property-grid">
97
- <label class="property-half-label icon-only-label linewidth"></label>
98
- <input type="number" value-key="lineWidth" .value=${lineWidth} class="property-half-input" />
97
+ <label class="half-label icon-only-label"><md-icon>line_weight</md-icon></label>
98
+ <input type="number" value-key="lineWidth" .value=${lineWidth} class="half-editor" />
99
99
 
100
- <label class="property-half-label icon-only-label color"></label>
101
- <ox-input-color value-key="strokeStyle" .value=${strokeStyle} class="property-half-input"> </ox-input-color>
100
+ <label class="half-label icon-only-label"><md-icon>border_color</md-icon></label>
101
+ <ox-input-color value-key="strokeStyle" .value=${strokeStyle} class="half-editor"> </ox-input-color>
102
102
 
103
- <label class="property-full-label">
103
+ <label>
104
104
  <ox-i18n msgid="label.line-type">line type</ox-i18n>
105
105
  </label>
106
- <paper-dropdown-menu no-label-float="true" class="property-full-input line-type solid">
107
- <!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
108
- <paper-listbox
109
- value-key="lineDash"
110
- @selected-changed=${(e) => this._onValueChange(e)}
111
- slot="dropdown-content"
112
- .selected=${lineDash}
113
- attr-for-selected="name"
114
- >
115
- <paper-item class="solid" name="solid"></paper-item>
116
- <paper-item class="round-dot" name="round-dot"></paper-item>
117
- <paper-item class="square-dot" name="square-dot"></paper-item>
118
- <paper-item class="dash" name="dash"></paper-item>
119
- <paper-item class="dash-dot" name="dash-dot"></paper-item>
120
- <paper-item class="long-dash" name="long-dash"></paper-item>
121
- <paper-item class="long-dash-dot" name="long-dash-dot"></paper-item>
122
- <paper-item class="long-dash-dot-dot" name="long-dash-dot-dot"></paper-item>
123
- </paper-listbox>
124
- </paper-dropdown-menu>
125
-
126
- <label class="property-full-label">
106
+ <ox-select value-key="lineDash" .value=${lineDash} class="custom-editor">
107
+ <div class="line-type ${lineDash}" slot="label"></div>
108
+ <ox-popup-list align-left nowrap>
109
+ <style>
110
+ ${LineStyles.cssText}
111
+ </style>
112
+ <div class="line-type solid" value="solid" option></div>
113
+ <div class="line-type round-dot" value="round-dot" option></div>
114
+ <div class="line-type square-dot" value="square-dot" option></div>
115
+ <div class="line-type dash" value="dash" option></div>
116
+ <div class="line-type dash-dot" value="dash-dot" option></div>
117
+ <div class="line-type long-dash" value="long-dash" option></div>
118
+ <div class="line-type long-dash-dot" value="long-dash-dot" option></div>
119
+ <div class="line-type long-dash-dot-dot" value="long-dash-dot-dot" option></div>
120
+ </ox-popup-list>
121
+ </ox-select>
122
+
123
+ <label>
127
124
  <ox-i18n msgid="label.cap-type">cap type</ox-i18n>
128
125
  </label>
129
- <select class="property-full-input select-content" value-key="lineCap" .value=${lineCap}>
126
+ <select value-key="lineCap" .value=${lineCap}>
130
127
  <option value="butt"><ox-i18n msgid="label.square">square</ox-i18n></option>
131
128
  <option value="round"><ox-i18n msgid="label.round">round</ox-i18n></option>
132
129
  </select>
133
130
 
134
- <label class="property-full-label">
131
+ <label>
135
132
  <ox-i18n msgid="label.join-type">join type</ox-i18n>
136
133
  </label>
137
- <select class="property-full-input select-content" value-key="lineJoin" .value=${lineJoin}>
134
+ <select value-key="lineJoin" .value=${lineJoin}>
138
135
  <option value="miter"><ox-i18n msgid="label.miter">miter</ox-i18n></option>
139
136
  <option value="round"><ox-i18n msgid="label.round">round</ox-i18n></option>
140
137
  <option value="bevel"><ox-i18n msgid="label.bevel">bevel</ox-i18n></option>
@@ -142,95 +139,83 @@ export class PropertyStyles extends AbstractProperty {
142
139
 
143
140
  ${this._isLine(this.selected)
144
141
  ? html `
145
- <label class="property-full-label">
142
+ <label>
146
143
  <ox-i18n msgid="label.begin-type">begin type</ox-i18n>
147
144
  </label>
148
- <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type begin-no">
149
- <!-- begin-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
150
- <paper-listbox
151
- value-key="begin"
152
- @selected-changed=${(e) => this._onValueChange(e)}
153
- slot="dropdown-content"
154
- .selected=${begin}
155
- attr-for-selected="name"
156
- >
157
- <paper-item class="begin-no" name="none"></paper-item>
158
- <paper-item class="begin-arrow" name="arrow"></paper-item>
159
- <paper-item class="begin-open-arrow" name="open-arrow"></paper-item>
160
- <paper-item class="begin-stealth-arrow" name="sharp-arrow"></paper-item>
161
- <paper-item class="begin-diamond-arrow" name="diamond"></paper-item>
162
- <paper-item class="begin-oval-arrow" name="oval"></paper-item>
163
- </paper-listbox>
164
- </paper-dropdown-menu>
165
-
166
- <label class="property-full-label">
145
+ <ox-select value-key="begin" .value=${begin} class="custom-editor">
146
+ <div class="arrow-type ${begin ? `begin-${begin}` : nothing}" slot="label"></div>
147
+ <ox-popup-list align-left nowrap>
148
+ <style>
149
+ ${LineStyles.cssText}
150
+ </style>
151
+ <div class="arrow-type begin-none" value="none" option></div>
152
+ <div class="arrow-type begin-arrow" value="arrow" option></div>
153
+ <div class="arrow-type begin-open-arrow" value="open-arrow" option></div>
154
+ <div class="arrow-type begin-sharp-arrow" value="sharp-arrow" option></div>
155
+ <div class="arrow-type begin-diamond" value="diamond" option></div>
156
+ <div class="arrow-type begin-oval" value="oval" option></div>
157
+ </ox-popup-list>
158
+ </ox-select>
159
+
160
+ <label>
167
161
  <ox-i18n msgid="label.begin-size">begin size</ox-i18n>
168
162
  </label>
169
- <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type begin-size1">
170
- <!-- begin-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
171
- <paper-listbox
172
- value-key="beginSize"
173
- @selected-changed=${(e) => this._onValueChange(e)}
174
- slot="dropdown-content"
175
- .selected=${beginSize}
176
- attr-for-selected="name"
177
- >
178
- <paper-item class="begin-size1" name="size1"></paper-item>
179
- <paper-item class="begin-size2" name="size2"></paper-item>
180
- <paper-item class="begin-size3" name="size3"></paper-item>
181
- <paper-item class="begin-size4" name="size4"></paper-item>
182
- <paper-item class="begin-size5" name="size5"></paper-item>
183
- <paper-item class="begin-size6" name="size6"></paper-item>
184
- <paper-item class="begin-size7" name="size7"></paper-item>
185
- <paper-item class="begin-size8" name="size8"></paper-item>
186
- <paper-item class="begin-size9" name="size9"></paper-item>
187
- </paper-listbox>
188
- </paper-dropdown-menu>
189
-
190
- <label class="property-full-label">
163
+ <ox-select value-key="beginSize" .value=${beginSize} class="custom-editor">
164
+ <div class="arrow-type ${beginSize ? `begin-${beginSize}` : nothing}" slot="label"></div>
165
+ <ox-popup-list align-left nowrap>
166
+ <style>
167
+ ${LineStyles.cssText}
168
+ </style>
169
+ <div class="arrow-type begin-size1" value="size1" option></div>
170
+ <div class="arrow-type begin-size2" value="size2" option></div>
171
+ <div class="arrow-type begin-size3" value="size3" option></div>
172
+ <div class="arrow-type begin-size4" value="size4" option></div>
173
+ <div class="arrow-type begin-size5" value="size5" option></div>
174
+ <div class="arrow-type begin-size6" value="size6" option></div>
175
+ <div class="arrow-type begin-size7" value="size7" option></div>
176
+ <div class="arrow-type begin-size8" value="size8" option></div>
177
+ <div class="arrow-type begin-size9" value="size9" option></div>
178
+ </ox-popup-list>
179
+ </ox-select>
180
+
181
+ <label>
191
182
  <ox-i18n msgid="label.end-type">end type</ox-i18n>
192
183
  </label>
193
- <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type end-no">
194
- <!-- end-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
195
- <paper-listbox
196
- value-key="end"
197
- @selected-changed=${(e) => this._onValueChange(e)}
198
- slot="dropdown-content"
199
- .selected=${end}
200
- attr-for-selected="name"
201
- >
202
- <paper-item class="end-no" name="none"></paper-item>
203
- <paper-item class="end-arrow" name="arrow"></paper-item>
204
- <paper-item class="end-open-arrow" name="open-arrow"></paper-item>
205
- <paper-item class="end-stealth-arrow" name="sharp-arrow"></paper-item>
206
- <paper-item class="end-diamond-arrow" name="diamond"></paper-item>
207
- <paper-item class="end-oval-arrow" name="oval"></paper-item>
208
- </paper-listbox>
209
- </paper-dropdown-menu>
210
-
211
- <label class="property-full-label">
184
+ <ox-select value-key="end" .value=${end} class="custom-editor">
185
+ <div class="arrow-type ${end ? `end-${end}` : nothing}" slot="label"></div>
186
+ <ox-popup-list align-left nowrap>
187
+ <style>
188
+ ${LineStyles.cssText}
189
+ </style>
190
+ <div class="arrow-type end-none" value="none" option></div>
191
+ <div class="arrow-type end-arrow" value="arrow" option></div>
192
+ <div class="arrow-type end-open-arrow" value="open-arrow" option></div>
193
+ <div class="arrow-type end-sharp-arrow" value="sharp-arrow" option></div>
194
+ <div class="arrow-type end-diamond" value="diamond" option></div>
195
+ <div class="arrow-type end-oval" value="oval" option></div>
196
+ </ox-popup-list>
197
+ </ox-select>
198
+
199
+ <label>
212
200
  <ox-i18n msgid="label.end-size">end size</ox-i18n>
213
201
  </label>
214
- <paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type end-size1">
215
- <!-- end-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
216
- <paper-listbox
217
- value-key="endSize"
218
- @selected-changed=${(e) => this._onValueChange(e)}
219
- slot="dropdown-content"
220
- .selected=${endSize}
221
- attr-for-selected="name"
222
- >
223
- <paper-item class="end-size1" name="size1"></paper-item>
224
- <paper-item class="end-size2" name="size2"></paper-item>
225
- <paper-item class="end-size3" name="size3"></paper-item>
226
- <paper-item class="end-size4" name="size4"></paper-item>
227
- <paper-item class="end-size5" name="size5"></paper-item>
228
- <paper-item class="end-size6" name="size6"></paper-item>
229
- <paper-item class="end-size7" name="size7"></paper-item>
230
- <paper-item class="end-size8" name="size8"></paper-item>
231
- <paper-item class="end-size9" name="size9"></paper-item>
232
- </paper-listbox>
233
- </paper-dropdown-menu>
202
+ <ox-select value-key="endSize" .value=${endSize} class="custom-editor">
203
+ <div class="arrow-type ${endSize ? `end-${endSize}` : nothing}" slot="label"></div>
204
+ <ox-popup-list align-left nowrap>
205
+ <style>
206
+ ${LineStyles.cssText}
207
+ </style>
208
+ <div class="arrow-type end-size1" value="size1" option></div>
209
+ <div class="arrow-type end-size2" value="size2" option></div>
210
+ <div class="arrow-type end-size3" value="size3" option></div>
211
+ <div class="arrow-type end-size4" value="size4" option></div>
212
+ <div class="arrow-type end-size5" value="size5" option></div>
213
+ <div class="arrow-type end-size6" value="size6" option></div>
214
+ <div class="arrow-type end-size7" value="size7" option></div>
215
+ <div class="arrow-type end-size8" value="size8" option></div>
216
+ <div class="arrow-type end-size9" value="size9" option></div>
217
+ </ox-popup-list>
218
+ </ox-select>
234
219
  `
235
220
  : html ``}
236
221
  </div>
@@ -251,308 +236,29 @@ export class PropertyStyles extends AbstractProperty {
251
236
  }
252
237
  }
253
238
  PropertyStyles.styles = [
254
- PropertySharedStyle,
239
+ PropertyGridStyles,
240
+ LineStyles,
255
241
  css `
256
242
  ox-input-range {
257
243
  width: 100%;
258
244
  }
259
245
 
260
246
  .btn-group {
261
- height: 24px;
247
+ display: flex;
248
+ align-items: center;
249
+ justify-content: center;
250
+ gap: var(--spacing-medium, 8px);
262
251
  }
263
252
 
264
- .btn-group paper-button {
253
+ .btn-group * {
265
254
  width: 30px;
266
- height: 24px;
267
255
  min-width: initial;
268
- margin: 0 4px 0 0;
269
- padding: 0;
270
256
  border-radius: 0;
271
- display: inline-block;
272
257
  border-bottom: 2px solid #fff;
273
-
274
- background: var(--url-icon-properties) no-repeat;
275
- background-size: 70%;
276
- }
277
-
278
- .btn-group paper-button.tbold {
279
- background-position: 50% -170px;
280
- }
281
-
282
- .btn-group paper-button.titalic {
283
- background-position: 50% -205px;
284
- }
285
-
286
- .btn-group paper-button.tunderline {
287
- background-position: 50% -240px;
288
- }
289
-
290
- .btn-group paper-button.tstrikethrough {
291
- background-position: 50% -415px;
292
- }
293
-
294
- .btn-group paper-button[active] {
295
- border-color: #f2471c;
296
- }
297
-
298
- .line-type paper-listbox {
299
- overflow: hidden;
300
- max-width: 100px;
301
- }
302
- .line-type paper-item {
303
- background: var(--url-icon-properties-line-type) 50% 0 no-repeat;
304
- min-height: 25px;
305
- padding: 3px 9px;
306
- width: 80px;
307
- }
308
-
309
- .line-type paper-item.solid {
310
- background-position: 50% 10px;
311
- }
312
- .line-type paper-item.round-dot {
313
- background-position: 50% -40px;
314
- }
315
- .line-type paper-item.square-dot {
316
- background-position: 50% -90px;
317
- }
318
- .line-type paper-item.dash {
319
- background-position: 50% -140px;
320
- }
321
- .line-type paper-item.dash-dot {
322
- background-position: 50% -190px;
323
- }
324
- .line-type paper-item.long-dash {
325
- background-position: 50% -240px;
326
- }
327
- .line-type paper-item.long-dash-dot {
328
- background-position: 50% -290px;
329
- }
330
- .line-type paper-item.long-dash-dot-dot {
331
- background-position: 50% -340px;
332
- }
333
-
334
- .line-type .paper-input-container input {
335
- background: var(--url-icon-properties-line-type) 50% 0 no-repeat !important;
336
- }
337
- .line-type.solid .paper-input-container input {
338
- background-position: 50% 5px !important;
339
- }
340
- .line-type.round-dot .paper-input-container input {
341
- background-position: 50% -45px !important;
342
- }
343
- .line-type.square-dot .paper-input-container input {
344
- background-position: 50% -85px !important;
345
- }
346
- .line-type.dash .paper-input-container input {
347
- background-position: 50% -145px !important;
348
- }
349
- .line-type.dash-dot .paper-input-container input {
350
- background-position: 50% -185px !important;
351
- }
352
- .line-type.long-dash .paper-input-container input {
353
- background-position: 50% -245px !important;
354
- }
355
- .line-type.long-dash-dot .paper-input-container input {
356
- background-position: 50% -285px !important;
357
- }
358
- .line-type.long-dash-dot-dot .paper-input-container input {
359
- background-position: 50% -345px !important;
360
- }
361
-
362
- .arrow-type paper-menu {
363
- overflow: hidden;
364
- max-width: 140px;
365
- }
366
- .arrow-type paper-item {
367
- background: var(--url-icon-properties-arrow-type) 50% 0 no-repeat;
368
- min-height: 30px;
369
- padding: 3px 7px;
370
- width: 30px;
371
- float: left;
372
- }
373
- .arrow-type paper-item.begin-no {
374
- background-position: 50% 16px;
375
- }
376
- .arrow-type paper-item.begin-arrow {
377
- background-position: 50% -39px;
378
- }
379
- .arrow-type paper-item.begin-open-arrow {
380
- background-position: 50% -89px;
381
- }
382
- .arrow-type paper-item.begin-stealth-arrow {
383
- background-position: 50% -139px;
384
- }
385
- .arrow-type paper-item.begin-diamond-arrow {
386
- background-position: 50% -190px;
387
- }
388
- .arrow-type paper-item.begin-oval-arrow {
389
- background-position: 50% -238px;
390
- }
391
- .arrow-type paper-item.begin-size1 {
392
- background-position: 50% -286px;
393
- }
394
- .arrow-type paper-item.begin-size2 {
395
- background-position: 50% -336px;
396
- }
397
- .arrow-type paper-item.begin-size3 {
398
- background-position: 50% -386px;
399
- }
400
- .arrow-type paper-item.begin-size4 {
401
- background-position: 50% -436px;
402
- }
403
- .arrow-type paper-item.begin-size5 {
404
- background-position: 50% -486px;
405
- }
406
- .arrow-type paper-item.begin-size6 {
407
- background-position: 50% -536px;
408
- }
409
- .arrow-type paper-item.begin-size7 {
410
- background-position: 50% -589px;
411
- }
412
- .arrow-type paper-item.begin-size8 {
413
- background-position: 50% -639px;
414
- }
415
- .arrow-type paper-item.begin-size9 {
416
- background-position: 50% -689px;
417
- }
418
- .arrow-type paper-item.end-no {
419
- background-position: 50% 16px;
420
- }
421
- .arrow-type paper-item.end-arrow {
422
- background-position: 50% -739px;
423
- }
424
- .arrow-type paper-item.end-open-arrow {
425
- background-position: 50% -789px;
426
- }
427
- .arrow-type paper-item.end-stealth-arrow {
428
- background-position: 50% -839px;
429
- }
430
- .arrow-type paper-item.end-diamond-arrow {
431
- background-position: 50% -890px;
432
- }
433
- .arrow-type paper-item.end-oval-arrow {
434
- background-position: 50% -938px;
435
- }
436
- .arrow-type paper-item.end-size1 {
437
- background-position: 50% -986px;
438
- }
439
- .arrow-type paper-item.end-size2 {
440
- background-position: 50% -1036px;
441
- }
442
- .arrow-type paper-item.end-size3 {
443
- background-position: 50% -1086px;
444
- }
445
- .arrow-type paper-item.end-size4 {
446
- background-position: 50% -1136px;
447
- }
448
- .arrow-type paper-item.end-size5 {
449
- background-position: 50% -1186px;
450
- }
451
- .arrow-type paper-item.end-size6 {
452
- background-position: 50% -1236px;
453
- }
454
- .arrow-type paper-item.end-size7 {
455
- background-position: 50% -1289px;
456
- }
457
- .arrow-type paper-item.end-size8 {
458
- background-position: 50% -1339px;
459
- }
460
- .arrow-type paper-item.end-size9 {
461
- background-position: 50% -1389px;
462
258
  }
463
259
 
464
- .arrow-type .paper-input-container input {
465
- background: var(--url-icon-properties-arrow-type) 110% 0 no-repeat !important;
466
- }
467
- .arrow-type.begin-no .paper-input-container input {
468
- background-position: 110% 5px !important;
469
- }
470
- .arrow-type.begin-arrow .paper-input-container input {
471
- background-position: 110% -50px !important;
472
- }
473
- .arrow-type.begin-open-arrow .paper-input-container input {
474
- background-position: 110% -100px !important;
475
- }
476
- .arrow-type.begin-stealth-arrow .paper-input-container input {
477
- background-position: 110% -150px !important;
478
- }
479
- .arrow-type.begin-diamond-arrow .paper-input-container input {
480
- background-position: 110% -200px !important;
481
- }
482
- .arrow-type.begin-oval-arrow .paper-input-container input {
483
- background-position: 110% -250px !important;
484
- }
485
- .arrow-type.begin-size1 .paper-input-container input {
486
- background-position: 110% -298px !important;
487
- }
488
- .arrow-type.begin-size2 .paper-input-container input {
489
- background-position: 110% -348px !important;
490
- }
491
- .arrow-type.begin-size3 .paper-input-container input {
492
- background-position: 110% -398px !important;
493
- }
494
- .arrow-type.begin-size4 .paper-input-container input {
495
- background-position: 110% -448px !important;
496
- }
497
- .arrow-type.begin-size5 .paper-input-container input {
498
- background-position: 110% -498px !important;
499
- }
500
- .arrow-type.begin-size6 .paper-input-container input {
501
- background-position: 110% -548px !important;
502
- }
503
- .arrow-type.begin-size7 .paper-input-container input {
504
- background-position: 110% -600px !important;
505
- }
506
- .arrow-type.begin-size8 .paper-input-container input {
507
- background-position: 110% -650px !important;
508
- }
509
- .arrow-type.begin-size9 .paper-input-container input {
510
- background-position: 110% -700px !important;
511
- }
512
- .arrow-type.end-no .paper-input-container input {
513
- background-position: 110% 5px !important;
514
- }
515
- .arrow-type.end-arrow .paper-input-container input {
516
- background-position: 110% -750px !important;
517
- }
518
- .arrow-type.end-open-arrow .paper-input-container input {
519
- background-position: 110% -800px !important;
520
- }
521
- .arrow-type.end-stealth-arrow .paper-input-container input {
522
- background-position: 110% -850px !important;
523
- }
524
- .arrow-type.end-diamond-arrow .paper-input-container input {
525
- background-position: 110% -900px !important;
526
- }
527
- .arrow-type.end-oval-arrow .paper-input-container input {
528
- background-position: 110% -950px !important;
529
- }
530
- .arrow-type.end-size1 .paper-input-container input {
531
- background-position: 110% -998px !important;
532
- }
533
- .arrow-type.end-size2 .paper-input-container input {
534
- background-position: 110% -1048px !important;
535
- }
536
- .arrow-type.end-size3 .paper-input-container input {
537
- background-position: 110% -1098px !important;
538
- }
539
- .arrow-type.end-size4 .paper-input-container input {
540
- background-position: 110% -1148px !important;
541
- }
542
- .arrow-type.end-size5 .paper-input-container input {
543
- background-position: 110% -1198px !important;
544
- }
545
- .arrow-type.end-size6 .paper-input-container input {
546
- background-position: 110% -1248px !important;
547
- }
548
- .arrow-type.end-size7 .paper-input-container input {
549
- background-position: 110% -1300px !important;
550
- }
551
- .arrow-type.end-size8 .paper-input-container input {
552
- background-position: 110% -1350px !important;
553
- }
554
- .arrow-type.end-size9 .paper-input-container input {
555
- background-position: 110% -1400px !important;
260
+ .btn-group [active] {
261
+ border-bottom: 2px solid #f2471c;
556
262
  }
557
263
  `
558
264
  ];
@@ -565,7 +271,4 @@ __decorate([
565
271
  __decorate([
566
272
  property({ type: Array })
567
273
  ], PropertyStyles.prototype, "fonts", void 0);
568
- __decorate([
569
- state()
570
- ], PropertyStyles.prototype, "fontAvailable", void 0);
571
274
  //# sourceMappingURL=styles.js.map