@operato/input 9.0.0-beta.15 → 9.0.0-beta.18
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.
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,23 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [9.0.0-beta.18](https://github.com/hatiolab/operato/compare/v9.0.0-beta.17...v9.0.0-beta.18) (2025-01-27)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/input
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [9.0.0-beta.16](https://github.com/hatiolab/operato/compare/v9.0.0-beta.15...v9.0.0-beta.16) (2025-01-27)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### :rocket: New Features
|
|
18
|
+
|
|
19
|
+
* module property-panel ([eaa45f9](https://github.com/hatiolab/operato/commit/eaa45f98e3f4349732f2d0d9d346eef8093be3e8))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
6
23
|
## [9.0.0-beta.15](https://github.com/hatiolab/operato/compare/v9.0.0-beta.14...v9.0.0-beta.15) (2025-01-27)
|
|
7
24
|
|
|
8
25
|
**Note:** Version bump only for package @operato/input
|
|
@@ -8,10 +8,11 @@ import './ox-input-angle.js';
|
|
|
8
8
|
import './ox-input-color-stops.js';
|
|
9
9
|
import { OxFormField } from './ox-form-field.js';
|
|
10
10
|
import { ColorStop } from './ox-input-color-stops.js';
|
|
11
|
+
type GradientDirection = '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';
|
|
11
12
|
export type GradientOption = {
|
|
12
13
|
type: 'linear' | 'radial';
|
|
13
14
|
rotation: number;
|
|
14
|
-
direction?:
|
|
15
|
+
direction?: GradientDirection;
|
|
15
16
|
center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom';
|
|
16
17
|
colorStops?: ColorStop[];
|
|
17
18
|
};
|
|
@@ -22,4 +23,6 @@ export declare class OxInputColorGradient extends OxFormField {
|
|
|
22
23
|
render(): import("lit-html").TemplateResult<1>;
|
|
23
24
|
private onChange;
|
|
24
25
|
private convertDirectionToRotation;
|
|
26
|
+
private convertRotationToDirection;
|
|
25
27
|
}
|
|
28
|
+
export {};
|
|
@@ -39,7 +39,8 @@ let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
|
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
41
|
var selector = (this.value && this.value.type) || 'linear';
|
|
42
|
-
var { type = 'linear',
|
|
42
|
+
var { type = 'linear', center = 'center', rotation = 0, colorStops } = this.value || {};
|
|
43
|
+
var direction = type == 'linear' ? this.convertRotationToDirection(rotation) : '';
|
|
43
44
|
return html `
|
|
44
45
|
<div class="property-grid">
|
|
45
46
|
<label> <ox-i18n msgid="label.type">type</ox-i18n> </label>
|
|
@@ -125,7 +126,7 @@ let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
|
|
|
125
126
|
this.value = {
|
|
126
127
|
...this.value,
|
|
127
128
|
rotation: Number(value || 0),
|
|
128
|
-
direction:
|
|
129
|
+
direction: this.convertRotationToDirection(Number(value))
|
|
129
130
|
};
|
|
130
131
|
}
|
|
131
132
|
else if (key === 'direction') {
|
|
@@ -176,6 +177,24 @@ let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
|
|
|
176
177
|
}
|
|
177
178
|
return (rotation / 360) * Math.PI * 2;
|
|
178
179
|
}
|
|
180
|
+
convertRotationToDirection(rotation) {
|
|
181
|
+
var degrees = (rotation / (Math.PI * 2)) * 360;
|
|
182
|
+
if (Math.abs(degrees - 45) <= 10)
|
|
183
|
+
return 'lefttop-to-rightbottom';
|
|
184
|
+
if (Math.abs(degrees - 90) <= 10)
|
|
185
|
+
return 'top-to-bottom';
|
|
186
|
+
if (Math.abs(degrees - 135) <= 10)
|
|
187
|
+
return 'righttop-to-leftbottom';
|
|
188
|
+
if (Math.abs(degrees - 180) <= 10)
|
|
189
|
+
return 'right-to-left';
|
|
190
|
+
if (Math.abs(degrees - 215) <= 10)
|
|
191
|
+
return 'rightbottom-to-lefttop';
|
|
192
|
+
if (Math.abs(degrees - 270) <= 10)
|
|
193
|
+
return 'bottom-to-top';
|
|
194
|
+
if (Math.abs(degrees - 315) <= 10)
|
|
195
|
+
return 'leftbottom-to-righttop';
|
|
196
|
+
return 'left-to-right';
|
|
197
|
+
}
|
|
179
198
|
};
|
|
180
199
|
__decorate([
|
|
181
200
|
property({ type: Object })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-color-gradient.js","sourceRoot":"","sources":["../../src/ox-input-color-gradient.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-select.js'\nimport './ox-input-angle.js'\nimport './ox-input-color-stops.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { GradientDirectionStyles } from '@operato/styles/gradient-direction-styles.js'\n\nimport { ColorStop } from './ox-input-color-stops.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 = [\n PropertyGridStyles,\n GradientDirectionStyles,\n css`\n :host {\n display: flex;\n }\n\n [editors] > :not([active-selector]) {\n display: none;\n }\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 render() {\n var selector = (this.value && this.value.type) || 'linear'\n var { type = 'linear', direction = 'left-to-right', center = 'center', rotation = 0, colorStops } = this.value || {}\n\n return html`\n <div class=\"property-grid\">\n <label> <ox-i18n msgid=\"label.type\">type</ox-i18n> </label>\n <select value-key=\"type\" .value=${type || 'linear'} ?disabled=${this.disabled}>\n <option>linear</option>\n <option>radial</option>\n </select>\n\n <label><md-icon>format_color_fill</md-icon></label>\n <ox-input-angle value-key=\"rotation\" .value=${rotation || 0} ?disabled=${this.disabled}> </ox-input-angle>\n\n <label> <ox-i18n msgid=\"label.direction\">direction</ox-i18n> </label>\n <div class=\"custom-editor\" editors>\n <ox-select ?active-selector=${selector == 'linear'} .value=${direction} value-key=\"direction\">\n <div class=\"gradient-direction\" value=${String(direction || '')} slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${GradientDirectionStyles.cssText}\n </style>\n <div class=\"gradient-direction\" value=\"lefttop-to-rightbottom\" option></div>\n <div class=\"gradient-direction\" value=\"top-to-bottom\" option></div>\n <div class=\"gradient-direction\" value=\"righttop-to-leftbottom\" option></div>\n <div class=\"gradient-direction\" value=\"right-to-left\" option></div>\n <div class=\"gradient-direction\" value=\"rightbottom-to-lefttop\" option></div>\n <div class=\"gradient-direction\" value=\"bottom-to-top\" option></div>\n <div class=\"gradient-direction\" value=\"leftbottom-to-righttop\" option></div>\n <div class=\"gradient-direction\" value=\"left-to-right\" option></div>\n <div class=\"gradient-direction\" value=\"center-to-corner\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <ox-select ?active-selector=${selector == 'radial'} .value=${center} value-key=\"center\">\n <div class=\"gradient-direction\" value=${String(center || '')} slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${GradientDirectionStyles.cssText}\n </style>\n <div class=\"gradient-direction\" value=\"center\" option></div>\n <div class=\"gradient-direction\" value=\"left-top\" option></div>\n <div class=\"gradient-direction\" value=\"right-top\" option></div>\n <div class=\"gradient-direction\" value=\"right-bottom\" option></div>\n <div class=\"gradient-direction\" value=\"left-bottom\" option></div>\n </ox-popup-list>\n </ox-select>\n </div>\n\n <ox-input-color-stops\n value-key=\"colorStops\"\n type=\"gradient\"\n .value=${colorStops}\n ?disabled=${this.disabled}\n class=\"property-full-bleed\"\n >\n </ox-input-color-stops>\n </div>\n `\n }\n\n private 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 default:\n value = (element as HTMLInputElement).value\n break\n }\n\n if (key === 'rotation') {\n this.value = {\n ...this.value,\n rotation: Number(value || 0),\n direction: undefined\n }\n } else if (key === 'direction') {\n if (value) {\n this.value = {\n ...this.value,\n direction: value as any,\n rotation: this.convertDirectionToRotation(String(value || 'left-to-right'))\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 private 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"]}
|
|
1
|
+
{"version":3,"file":"ox-input-color-gradient.js","sourceRoot":"","sources":["../../src/ox-input-color-gradient.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-select.js'\nimport './ox-input-angle.js'\nimport './ox-input-color-stops.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { GradientDirectionStyles } from '@operato/styles/gradient-direction-styles.js'\n\nimport { ColorStop } from './ox-input-color-stops.js'\n\ntype GradientDirection =\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\nexport type GradientOption = {\n type: 'linear' | 'radial'\n rotation: number\n direction?: GradientDirection\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 = [\n PropertyGridStyles,\n GradientDirectionStyles,\n css`\n :host {\n display: flex;\n }\n\n [editors] > :not([active-selector]) {\n display: none;\n }\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 render() {\n var selector = (this.value && this.value.type) || 'linear'\n var { type = 'linear', center = 'center', rotation = 0, colorStops } = this.value || {}\n var direction = type == 'linear' ? this.convertRotationToDirection(rotation) : ''\n\n return html`\n <div class=\"property-grid\">\n <label> <ox-i18n msgid=\"label.type\">type</ox-i18n> </label>\n <select value-key=\"type\" .value=${type || 'linear'} ?disabled=${this.disabled}>\n <option>linear</option>\n <option>radial</option>\n </select>\n\n <label><md-icon>format_color_fill</md-icon></label>\n <ox-input-angle value-key=\"rotation\" .value=${rotation || 0} ?disabled=${this.disabled}> </ox-input-angle>\n\n <label> <ox-i18n msgid=\"label.direction\">direction</ox-i18n> </label>\n <div class=\"custom-editor\" editors>\n <ox-select ?active-selector=${selector == 'linear'} .value=${direction} value-key=\"direction\">\n <div class=\"gradient-direction\" value=${String(direction || '')} slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${GradientDirectionStyles.cssText}\n </style>\n <div class=\"gradient-direction\" value=\"lefttop-to-rightbottom\" option></div>\n <div class=\"gradient-direction\" value=\"top-to-bottom\" option></div>\n <div class=\"gradient-direction\" value=\"righttop-to-leftbottom\" option></div>\n <div class=\"gradient-direction\" value=\"right-to-left\" option></div>\n <div class=\"gradient-direction\" value=\"rightbottom-to-lefttop\" option></div>\n <div class=\"gradient-direction\" value=\"bottom-to-top\" option></div>\n <div class=\"gradient-direction\" value=\"leftbottom-to-righttop\" option></div>\n <div class=\"gradient-direction\" value=\"left-to-right\" option></div>\n <div class=\"gradient-direction\" value=\"center-to-corner\" option></div>\n </ox-popup-list>\n </ox-select>\n\n <ox-select ?active-selector=${selector == 'radial'} .value=${center} value-key=\"center\">\n <div class=\"gradient-direction\" value=${String(center || '')} slot=\"label\"></div>\n <ox-popup-list align-left nowrap>\n <style>\n ${GradientDirectionStyles.cssText}\n </style>\n <div class=\"gradient-direction\" value=\"center\" option></div>\n <div class=\"gradient-direction\" value=\"left-top\" option></div>\n <div class=\"gradient-direction\" value=\"right-top\" option></div>\n <div class=\"gradient-direction\" value=\"right-bottom\" option></div>\n <div class=\"gradient-direction\" value=\"left-bottom\" option></div>\n </ox-popup-list>\n </ox-select>\n </div>\n\n <ox-input-color-stops\n value-key=\"colorStops\"\n type=\"gradient\"\n .value=${colorStops}\n ?disabled=${this.disabled}\n class=\"property-full-bleed\"\n >\n </ox-input-color-stops>\n </div>\n `\n }\n\n private 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 default:\n value = (element as HTMLInputElement).value\n break\n }\n\n if (key === 'rotation') {\n this.value = {\n ...this.value,\n rotation: Number(value || 0),\n direction: this.convertRotationToDirection(Number(value))\n }\n } else if (key === 'direction') {\n if (value) {\n this.value = {\n ...this.value,\n direction: value as any,\n rotation: this.convertDirectionToRotation(String(value || 'left-to-right'))\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 private 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 private convertRotationToDirection(rotation: number): GradientDirection {\n var degrees = (rotation / (Math.PI * 2)) * 360\n if (Math.abs(degrees - 45) <= 10) return 'lefttop-to-rightbottom'\n if (Math.abs(degrees - 90) <= 10) return 'top-to-bottom'\n if (Math.abs(degrees - 135) <= 10) return 'righttop-to-leftbottom'\n if (Math.abs(degrees - 180) <= 10) return 'right-to-left'\n if (Math.abs(degrees - 215) <= 10) return 'rightbottom-to-lefttop'\n if (Math.abs(degrees - 270) <= 10) return 'bottom-to-top'\n if (Math.abs(degrees - 315) <= 10) return 'leftbottom-to-righttop'\n return 'left-to-right'\n }\n}\n"]}
|