@operato/app 1.0.0-alpha.19 → 1.0.0-alpha.21

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 (11) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/src/input/ox-input-fill-style.d.ts +2 -3
  3. package/dist/src/input/ox-input-fill-style.js +1 -1
  4. package/dist/src/input/ox-input-fill-style.js.map +1 -1
  5. package/dist/tsconfig.tsbuildinfo +1 -1
  6. package/package.json +14 -15
  7. package/src/input/ox-input-fill-style.ts +2 -3
  8. package/dist/src/input/ox-input-color-gradient.d.ts +0 -25
  9. package/dist/src/input/ox-input-color-gradient.js +0 -318
  10. package/dist/src/input/ox-input-color-gradient.js.map +0 -1
  11. package/src/input/ox-input-color-gradient.ts +0 -341
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "WebApplication production supporting components following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "heartyoh",
6
- "version": "1.0.0-alpha.19",
6
+ "version": "1.0.0-alpha.21",
7
7
  "main": "dist/src/index.js",
8
8
  "module": "dist/src/index.js",
9
9
  "exports": {
@@ -18,7 +18,6 @@
18
18
  "./grist/parameters-editor.js": "./dist/src/grist/parameters-editor.js",
19
19
  "./input/ox-input-graphql.js": "./dist/src/input/ox-input-graphql.js",
20
20
  "./input/ox-input-background-pattern.js": "./dist/src/input/ox-input-background-pattern.js",
21
- "./input/ox-input-color-gradient.js": "./dist/src/input/ox-input-color-gradient.js",
22
21
  "./input/ox-input-fill-style.js": "./dist/src/input/ox-input-fill-style.js",
23
22
  "./property-editor/ox-property-editor-graphql.js": "./dist/src/property-editor/ox-property-editor-graphql.js"
24
23
  },
@@ -50,18 +49,18 @@
50
49
  "@material/mwc-button": "^0.25.3",
51
50
  "@material/mwc-icon": "^0.25.3",
52
51
  "@material/mwc-icon-button": "^0.25.3",
53
- "@operato/attachment": "^1.0.0-alpha.19",
54
- "@operato/data-grist": "^1.0.0-alpha.19",
55
- "@operato/font": "^1.0.0-alpha.19",
56
- "@operato/form": "^1.0.0-alpha.19",
57
- "@operato/graphql": "^1.0.0-alpha.19",
58
- "@operato/i18n": "^1.0.0-alpha.19",
59
- "@operato/input": "^1.0.0-alpha.19",
60
- "@operato/layout": "^1.0.0-alpha.19",
61
- "@operato/property-editor": "^1.0.0-alpha.19",
62
- "@operato/shell": "^1.0.0-alpha.19",
63
- "@operato/styles": "^1.0.0-alpha.19",
64
- "@operato/utils": "^1.0.0-alpha.19",
52
+ "@operato/attachment": "^1.0.0-alpha.21",
53
+ "@operato/data-grist": "^1.0.0-alpha.21",
54
+ "@operato/font": "^1.0.0-alpha.21",
55
+ "@operato/form": "^1.0.0-alpha.21",
56
+ "@operato/graphql": "^1.0.0-alpha.21",
57
+ "@operato/i18n": "^1.0.0-alpha.21",
58
+ "@operato/input": "^1.0.0-alpha.21",
59
+ "@operato/layout": "^1.0.0-alpha.21",
60
+ "@operato/property-editor": "^1.0.0-alpha.21",
61
+ "@operato/shell": "^1.0.0-alpha.21",
62
+ "@operato/styles": "^1.0.0-alpha.21",
63
+ "@operato/utils": "^1.0.0-alpha.21",
65
64
  "codemirror": "^5.59.1",
66
65
  "codemirror-graphql": "^0.15.2",
67
66
  "cross-fetch": "^3.1.5",
@@ -101,5 +100,5 @@
101
100
  "prettier --write"
102
101
  ]
103
102
  },
104
- "gitHead": "eb6ae5b51dbca63256143602b3487397c8208873"
103
+ "gitHead": "7f0823771e6442e68eff668ca44420744c1cd230"
105
104
  }
package/src/input/ox-input-fill-style.ts CHANGED
@@ -5,12 +5,11 @@
5
5
  import '@operato/i18n/ox-i18n.js'
6
6
  import '@operato/input/ox-input-color.js'
7
7
  import '@operato/input/ox-input-color-stops.js'
8
- import './ox-input-color-gradient.js'
8
+ import '@operato/input/ox-input-color-gradient.js'
9
9
  import './ox-input-background-pattern.js'
10
10
 
11
11
  import { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.js'
12
- import { ColorStop, OxFormField } from '@operato/input'
13
- import { GradientOption, OxInputColorGradient } from './ox-input-color-gradient.js'
12
+ import { ColorStop, GradientOption, OxFormField, OxInputColorGradient } from '@operato/input'
14
13
  import { PropertyValues, css, html } from 'lit'
15
14
  import { customElement, property, query } from 'lit/decorators.js'
16
15
 
package/dist/src/input/ox-input-color-gradient.d.ts DELETED
@@ -1,25 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
- import '@operato/i18n/ox-i18n.js';
5
- import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
6
- import '@polymer/paper-listbox/paper-listbox';
7
- import '@polymer/paper-item/paper-item';
8
- import '@operato/input/ox-input-angle.js';
9
- import '@operato/input/ox-input-color-stops.js';
10
- import { ColorStop, OxFormField } from '@operato/input';
11
- export declare type GradientOption = {
12
- type: 'linear' | 'radial';
13
- rotation: number;
14
- direction?: 'left-to-right' | 'lefttop-to-rightbottom' | 'top-to-bottom' | 'righttop-to-leftbottom' | 'right-to-left' | 'rightbottom-to-lefttop' | 'bottom-to-top' | 'leftbottom-to-righttop' | 'left-to-right' | 'center-to-corner';
15
- center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom';
16
- colorStops?: ColorStop[];
17
- };
18
- export declare class OxInputColorGradient extends OxFormField {
19
- static styles: import("lit").CSSResult;
20
- value: GradientOption;
21
- firstUpdated(): void;
22
- _onChange(e: Event): void;
23
- render(): import("lit-html").TemplateResult<1>;
24
- _convertDirectionToRotation(direction: string): number;
25
- }
package/dist/src/input/ox-input-color-gradient.js DELETED
@@ -1,318 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
- import { __decorate } from "tslib";
5
- import '@operato/i18n/ox-i18n.js';
6
- import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
7
- import '@polymer/paper-listbox/paper-listbox';
8
- import '@polymer/paper-item/paper-item';
9
- import '@operato/input/ox-input-angle.js';
10
- import '@operato/input/ox-input-color-stops.js';
11
- import { OxFormField } from '@operato/input';
12
- import { css, html } from 'lit';
13
- import { customElement, property } from 'lit/decorators.js';
14
- let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
15
- constructor() {
16
- super(...arguments);
17
- this.value = {
18
- type: 'linear',
19
- direction: 'left-to-right',
20
- rotation: 0
21
- };
22
- }
23
- firstUpdated() {
24
- this.renderRoot.addEventListener('change', this._onChange.bind(this));
25
- }
26
- _onChange(e) {
27
- var element = e.target;
28
- var key = element.getAttribute('value-key');
29
- if (!key) {
30
- return;
31
- }
32
- var value;
33
- switch (element.tagName) {
34
- case 'INPUT':
35
- switch (element.type) {
36
- case 'checkbox':
37
- value = element.checked;
38
- break;
39
- case 'number':
40
- value = Number(element.value) || 0;
41
- break;
42
- case 'text':
43
- value = String(element.value);
44
- }
45
- break;
46
- case 'PAPER-BUTTON':
47
- value = element.active;
48
- break;
49
- case 'PAPER-LISTBOX':
50
- value = element.selected;
51
- break;
52
- default:
53
- value = element.value;
54
- break;
55
- }
56
- if (key === 'rotation') {
57
- this.value = {
58
- ...this.value,
59
- rotation: value,
60
- direction: undefined
61
- };
62
- }
63
- else if (key === 'direction') {
64
- if (value) {
65
- this.value = {
66
- ...this.value,
67
- direction: value,
68
- rotation: this._convertDirectionToRotation(value)
69
- };
70
- }
71
- }
72
- else {
73
- this.value = {
74
- ...this.value,
75
- [key]: value
76
- };
77
- }
78
- this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
79
- }
80
- render() {
81
- var selector = (this.value && this.value.type) || 'linear';
82
- var value = this.value || {};
83
- return html `
84
- <label> <ox-i18n msgid="label.type">type</ox-i18n> </label>
85
- <select value-key="type" .value=${value.type || 'linear'}>
86
- <option>linear</option>
87
- <option>radial</option>
88
- </select>
89
-
90
- <label class="icon-only-label color"></label>
91
- <ox-input-angle value-key="rotation" .value=${value.rotation || 0}> </ox-input-angle>
92
-
93
- <label> <ox-i18n msgid="label.direction">direction</ox-i18n> </label>
94
- <div editors>
95
- <paper-dropdown-menu no-label-float="true" ?active-selector=${selector == 'linear'} .value=${value.direction}>
96
- <paper-listbox
97
- @selected-changed=${(e) => this._onChange(e)}
98
- value-key="direction"
99
- slot="dropdown-content"
100
- gradient-direction
101
- .selected=${value.direction}
102
- attr-for-selected="name"
103
- >
104
- <paper-item name="lefttop-to-rightbottom"></paper-item>
105
- <paper-item name="top-to-bottom"></paper-item>
106
- <paper-item name="righttop-to-leftbottom"></paper-item>
107
- <paper-item name="right-to-left"></paper-item>
108
- <paper-item name="rightbottom-to-lefttop"></paper-item>
109
- <paper-item name="bottom-to-top"></paper-item>
110
- <paper-item name="leftbottom-to-righttop"></paper-item>
111
- <paper-item name="left-to-right"></paper-item>
112
- <paper-item name="center-to-corner"></paper-item>
113
- </paper-listbox>
114
- </paper-dropdown-menu>
115
-
116
- <paper-dropdown-menu no-label-float="true" ?active-selector=${selector == 'radial'} .value=${value.center}>
117
- <paper-listbox
118
- @selected-changed=${(e) => this._onChange(e)}
119
- value-key="center"
120
- slot="dropdown-content"
121
- gradient-direction
122
- .selected=${value.center || 'center'}
123
- attr-for-selected="name"
124
- >
125
- <paper-item name="center"></paper-item>
126
- <paper-item name="left-top"></paper-item>
127
- <paper-item name="right-top"></paper-item>
128
- <paper-item name="right-bottom"></paper-item>
129
- <paper-item name="left-bottom"></paper-item>
130
- </paper-listbox>
131
- </paper-dropdown-menu>
132
- </div>
133
-
134
- <ox-input-color-stops value-key="colorStops" type="gradient" .value=${value.colorStops}> </ox-input-color-stops>
135
- `;
136
- }
137
- _convertDirectionToRotation(direction) {
138
- var rotation;
139
- switch (direction) {
140
- case 'lefttop-to-rightbottom':
141
- rotation = 45;
142
- break;
143
- case 'top-to-bottom':
144
- rotation = 90;
145
- break;
146
- case 'righttop-to-leftbottom':
147
- rotation = 135;
148
- break;
149
- case 'right-to-left':
150
- rotation = 180;
151
- break;
152
- case 'rightbottom-to-lefttop':
153
- rotation = 215;
154
- break;
155
- case 'bottom-to-top':
156
- rotation = 270;
157
- break;
158
- case 'leftbottom-to-righttop':
159
- rotation = 315;
160
- break;
161
- case 'left-to-right':
162
- default:
163
- rotation = 0;
164
- break;
165
- }
166
- return (rotation / 360) * Math.PI * 2;
167
- }
168
- };
169
- OxInputColorGradient.styles = css `
170
- :host {
171
- display: grid;
172
-
173
- grid-template-columns: repeat(10, 1fr);
174
- grid-gap: 5px;
175
- grid-auto-rows: minmax(24px, auto);
176
-
177
- align-items: center;
178
- }
179
-
180
- :host > * {
181
- align-self: stretch;
182
- }
183
-
184
- :host > label {
185
- grid-column: span 2;
186
- text-align: right;
187
- text-transform: capitalize;
188
- align-self: center;
189
- }
190
-
191
- :host > .icon-only-label {
192
- grid-column: span 1;
193
- }
194
-
195
- :host > input,
196
- :host > [editors] {
197
- grid-column: span 8;
198
- }
199
-
200
- :host > select {
201
- grid-column: span 4;
202
- height: 100%;
203
- border: 1px solid rgba(0, 0, 0, 0.2);
204
- }
205
-
206
- :host > ox-input-angle {
207
- grid-column: span 3;
208
- }
209
-
210
- ox-input-color-stops {
211
- grid-column: span 10;
212
- }
213
-
214
- .host > input[type='checkbox'] {
215
- grid-column: 3 / 4;
216
- }
217
-
218
- .host > input[type='checkbox'] ~ label {
219
- grid-column: span 7;
220
- text-align: left;
221
- }
222
-
223
- [editors] > :not([active-selector]) {
224
- display: none;
225
- }
226
-
227
- [gradient-direction] {
228
- overflow: hidden;
229
- max-width: 210px;
230
- }
231
-
232
- [gradient-direction] paper-item {
233
- background: url(/assets/images/icon-editor-gradient-direction.png) 50% 0 no-repeat;
234
- min-height: 32px;
235
- padding: 3px 5px;
236
- width: 30px;
237
- float: left;
238
- }
239
-
240
- [gradient-direction] [name='lefttop-to-rightbottom'] {
241
- background-position: 50% 4px;
242
- }
243
-
244
- [gradient-direction] [name='left-top'] {
245
- background-position: 50% 4px;
246
- }
247
-
248
- [gradient-direction] [name='top-to-bottom'] {
249
- background-position: 50% -46px;
250
- }
251
-
252
- [gradient-direction] [name='righttop-to-leftbottom'] {
253
- background-position: 50% -96px;
254
- }
255
-
256
- [gradient-direction] [name='right-top'] {
257
- background-position: 50% -96px;
258
- }
259
-
260
- [gradient-direction] [name='right-to-left'] {
261
- background-position: 50% -146px;
262
- }
263
-
264
- [gradient-direction] [name='rightbottom-to-lefttop'] {
265
- background-position: 50% -196px;
266
- }
267
-
268
- [gradient-direction] [name='right-bottom'] {
269
- background-position: 50% -196px;
270
- }
271
-
272
- [gradient-direction] [name='bottom-to-top'] {
273
- background-position: 50% -246px;
274
- }
275
-
276
- [gradient-direction] [name='leftbottom-to-righttop'] {
277
- background-position: 50% -296px;
278
- }
279
-
280
- [gradient-direction] [name='left-bottom'] {
281
- background-position: 50% -296px;
282
- }
283
-
284
- [gradient-direction] [name='left-to-right'] {
285
- background-position: 50% -346px;
286
- }
287
-
288
- [gradient-direction] [name='center-to-corner'] {
289
- background-position: 50% -396px;
290
- }
291
-
292
- [gradient-direction] [name='center'] {
293
- background-position: 50% -396px;
294
- }
295
-
296
- [gradient-direction] paper-item[focused] {
297
- background-color: rgba(255, 246, 143, 0.5);
298
- }
299
-
300
- .icon-only-label {
301
- top: 0 !important;
302
- width: 30px !important;
303
- height: 24px;
304
- background: url(/assets/images/icon-properties-label.png) no-repeat;
305
- }
306
-
307
- .icon-only-label.color {
308
- background-position: 70% -198px;
309
- }
310
- `;
311
- __decorate([
312
- property({ type: Object })
313
- ], OxInputColorGradient.prototype, "value", void 0);
314
- OxInputColorGradient = __decorate([
315
- customElement('ox-input-color-gradient')
316
- ], OxInputColorGradient);
317
- export { OxInputColorGradient };
318
- //# sourceMappingURL=ox-input-color-gradient.js.map
package/dist/src/input/ox-input-color-gradient.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-input-color-gradient.js","sourceRoot":"","sources":["../../../src/input/ox-input-color-gradient.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu'\nimport '@polymer/paper-listbox/paper-listbox'\nimport '@polymer/paper-item/paper-item'\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/input/ox-input-color-stops.js'\n\nimport { ColorStop, OxFormField } from '@operato/input'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport type GradientOption = {\n type: 'linear' | 'radial'\n rotation: number\n direction?:\n | 'left-to-right'\n | 'lefttop-to-rightbottom'\n | 'top-to-bottom'\n | 'righttop-to-leftbottom'\n | 'right-to-left'\n | 'rightbottom-to-lefttop'\n | 'bottom-to-top'\n | 'leftbottom-to-righttop'\n | 'left-to-right'\n | 'center-to-corner'\n center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'\n colorStops?: ColorStop[]\n}\n\n@customElement('ox-input-color-gradient')\nexport class OxInputColorGradient extends OxFormField {\n static styles = css`\n :host {\n display: grid;\n\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 :host > * {\n align-self: stretch;\n }\n\n :host > label {\n grid-column: span 2;\n text-align: right;\n text-transform: capitalize;\n align-self: center;\n }\n\n :host > .icon-only-label {\n grid-column: span 1;\n }\n\n :host > input,\n :host > [editors] {\n grid-column: span 8;\n }\n\n :host > select {\n grid-column: span 4;\n height: 100%;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n\n :host > ox-input-angle {\n grid-column: span 3;\n }\n\n ox-input-color-stops {\n grid-column: span 10;\n }\n\n .host > input[type='checkbox'] {\n grid-column: 3 / 4;\n }\n\n .host > input[type='checkbox'] ~ label {\n grid-column: span 7;\n text-align: left;\n }\n\n [editors] > :not([active-selector]) {\n display: none;\n }\n\n [gradient-direction] {\n overflow: hidden;\n max-width: 210px;\n }\n\n [gradient-direction] paper-item {\n background: url(/assets/images/icon-editor-gradient-direction.png) 50% 0 no-repeat;\n min-height: 32px;\n padding: 3px 5px;\n width: 30px;\n float: left;\n }\n\n [gradient-direction] [name='lefttop-to-rightbottom'] {\n background-position: 50% 4px;\n }\n\n [gradient-direction] [name='left-top'] {\n background-position: 50% 4px;\n }\n\n [gradient-direction] [name='top-to-bottom'] {\n background-position: 50% -46px;\n }\n\n [gradient-direction] [name='righttop-to-leftbottom'] {\n background-position: 50% -96px;\n }\n\n [gradient-direction] [name='right-top'] {\n background-position: 50% -96px;\n }\n\n [gradient-direction] [name='right-to-left'] {\n background-position: 50% -146px;\n }\n\n [gradient-direction] [name='rightbottom-to-lefttop'] {\n background-position: 50% -196px;\n }\n\n [gradient-direction] [name='right-bottom'] {\n background-position: 50% -196px;\n }\n\n [gradient-direction] [name='bottom-to-top'] {\n background-position: 50% -246px;\n }\n\n [gradient-direction] [name='leftbottom-to-righttop'] {\n background-position: 50% -296px;\n }\n\n [gradient-direction] [name='left-bottom'] {\n background-position: 50% -296px;\n }\n\n [gradient-direction] [name='left-to-right'] {\n background-position: 50% -346px;\n }\n\n [gradient-direction] [name='center-to-corner'] {\n background-position: 50% -396px;\n }\n\n [gradient-direction] [name='center'] {\n background-position: 50% -396px;\n }\n\n [gradient-direction] paper-item[focused] {\n background-color: rgba(255, 246, 143, 0.5);\n }\n\n .icon-only-label {\n top: 0 !important;\n width: 30px !important;\n height: 24px;\n background: url(/assets/images/icon-properties-label.png) no-repeat;\n }\n\n .icon-only-label.color {\n background-position: 70% -198px;\n }\n `\n\n @property({ type: Object }) value: GradientOption = {\n type: 'linear',\n direction: 'left-to-right',\n rotation: 0\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onChange.bind(this))\n }\n\n _onChange(e: Event) {\n var element = e.target as HTMLElement & { type: string }\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n var value\n\n switch (element.tagName) {\n case 'INPUT':\n switch (element.type) {\n case 'checkbox':\n value = (element as HTMLInputElement).checked\n break\n case 'number':\n value = Number((element as HTMLInputElement).value) || 0\n break\n case 'text':\n value = String((element as HTMLInputElement).value)\n }\n break\n\n case 'PAPER-BUTTON':\n value = (element as any).active\n break\n\n case 'PAPER-LISTBOX':\n value = (element as any).selected\n break\n\n default:\n value = (element as HTMLInputElement).value\n break\n }\n\n if (key === 'rotation') {\n this.value = {\n ...this.value,\n rotation: value,\n direction: undefined\n }\n } else if (key === 'direction') {\n if (value) {\n this.value = {\n ...this.value,\n direction: value,\n rotation: this._convertDirectionToRotation(value)\n }\n }\n } else {\n this.value = {\n ...this.value,\n [key]: value\n }\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n render() {\n var selector = (this.value && this.value.type) || 'linear'\n var value = this.value || {}\n\n return html`\n <label> <ox-i18n msgid=\"label.type\">type</ox-i18n> </label>\n <select value-key=\"type\" .value=${value.type || 'linear'}>\n <option>linear</option>\n <option>radial</option>\n </select>\n\n <label class=\"icon-only-label color\"></label>\n <ox-input-angle value-key=\"rotation\" .value=${value.rotation || 0}> </ox-input-angle>\n\n <label> <ox-i18n msgid=\"label.direction\">direction</ox-i18n> </label>\n <div editors>\n <paper-dropdown-menu no-label-float=\"true\" ?active-selector=${selector == 'linear'} .value=${value.direction}>\n <paper-listbox\n @selected-changed=${(e: Event) => this._onChange(e)}\n value-key=\"direction\"\n slot=\"dropdown-content\"\n gradient-direction\n .selected=${value.direction}\n attr-for-selected=\"name\"\n >\n <paper-item name=\"lefttop-to-rightbottom\"></paper-item>\n <paper-item name=\"top-to-bottom\"></paper-item>\n <paper-item name=\"righttop-to-leftbottom\"></paper-item>\n <paper-item name=\"right-to-left\"></paper-item>\n <paper-item name=\"rightbottom-to-lefttop\"></paper-item>\n <paper-item name=\"bottom-to-top\"></paper-item>\n <paper-item name=\"leftbottom-to-righttop\"></paper-item>\n <paper-item name=\"left-to-right\"></paper-item>\n <paper-item name=\"center-to-corner\"></paper-item>\n </paper-listbox>\n </paper-dropdown-menu>\n\n <paper-dropdown-menu no-label-float=\"true\" ?active-selector=${selector == 'radial'} .value=${value.center}>\n <paper-listbox\n @selected-changed=${(e: Event) => this._onChange(e)}\n value-key=\"center\"\n slot=\"dropdown-content\"\n gradient-direction\n .selected=${value.center || 'center'}\n attr-for-selected=\"name\"\n >\n <paper-item name=\"center\"></paper-item>\n <paper-item name=\"left-top\"></paper-item>\n <paper-item name=\"right-top\"></paper-item>\n <paper-item name=\"right-bottom\"></paper-item>\n <paper-item name=\"left-bottom\"></paper-item>\n </paper-listbox>\n </paper-dropdown-menu>\n </div>\n\n <ox-input-color-stops value-key=\"colorStops\" type=\"gradient\" .value=${value.colorStops}> </ox-input-color-stops>\n `\n }\n\n _convertDirectionToRotation(direction: string): number {\n var rotation\n switch (direction) {\n case 'lefttop-to-rightbottom':\n rotation = 45\n break\n case 'top-to-bottom':\n rotation = 90\n break\n case 'righttop-to-leftbottom':\n rotation = 135\n break\n case 'right-to-left':\n rotation = 180\n break\n case 'rightbottom-to-lefttop':\n rotation = 215\n break\n case 'bottom-to-top':\n rotation = 270\n break\n case 'leftbottom-to-righttop':\n rotation = 315\n break\n case 'left-to-right':\n default:\n rotation = 0\n break\n }\n\n return (rotation / 360) * Math.PI * 2\n }\n}\n"]}