@operato/input 9.0.0-beta.21 → 9.0.0-beta.29

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 (12) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/src/ox-input-color-gradient.js +1 -1
  3. package/dist/src/ox-input-color-gradient.js.map +1 -1
  4. package/dist/src/ox-input-color-stops.js +5 -5
  5. package/dist/src/ox-input-color-stops.js.map +1 -1
  6. package/dist/src/ox-input-color.d.ts +11 -4
  7. package/dist/src/ox-input-color.js +118 -60
  8. package/dist/src/ox-input-color.js.map +1 -1
  9. package/dist/src/ox-input-table.js +4 -4
  10. package/dist/src/ox-input-table.js.map +1 -1
  11. package/dist/tsconfig.tsbuildinfo +1 -1
  12. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,24 @@
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.29](https://github.com/hatiolab/operato/compare/v9.0.0-beta.28...v9.0.0-beta.29) (2025-01-30)
7
+
8
+
9
+ ### :rocket: New Features
10
+
11
+ * upgrade ox-input-color ([5405d0b](https://github.com/hatiolab/operato/commit/5405d0ba3dc07051f54251d17c1eaac6b491aad9))
12
+
13
+
14
+
15
+ ## [9.0.0-beta.28](https://github.com/hatiolab/operato/compare/v9.0.0-beta.27...v9.0.0-beta.28) (2025-01-28)
16
+
17
+
18
+ ### :rocket: New Features
19
+
20
+ * module property-panel ([d3dd184](https://github.com/hatiolab/operato/commit/d3dd18461756814dc17e33157a397d8d679650a6))
21
+
22
+
23
+
6
24
  ## [9.0.0-beta.21](https://github.com/hatiolab/operato/compare/v9.0.0-beta.20...v9.0.0-beta.21) (2025-01-28)
7
25
 
8
26
 
package/dist/src/ox-input-color-gradient.js CHANGED
@@ -92,7 +92,7 @@ let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
92
92
  type="gradient"
93
93
  .value=${colorStops}
94
94
  ?disabled=${this.disabled}
95
- class="property-full-bleed"
95
+ class="fullwidth"
96
96
  >
97
97
  </ox-input-color-stops>
98
98
  </div>
package/dist/src/ox-input-color-gradient.js.map CHANGED
@@ -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\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>reset_iso</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"]}
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>reset_iso</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=\"fullwidth\"\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"]}
package/dist/src/ox-input-color-stops.js CHANGED
@@ -145,7 +145,7 @@ let OxInputColorStops = class OxInputColorStops extends OxFormField {
145
145
  render() {
146
146
  return html `
147
147
  <div class="property-grid">
148
- <div id="color-stops" class="property-full-bleed">
148
+ <div id="color-stops" class="fullwidth">
149
149
  <div id="colorbar" @dblclick=${(e) => this._onDblClickColorbar(e)}>
150
150
  <div
151
151
  id="markers"
@@ -166,17 +166,17 @@ let OxInputColorStops = class OxInputColorStops extends OxFormField {
166
166
  </div>
167
167
  </div>
168
168
 
169
- <label class="icon-only-label property-twothird-label"><md-icon>format_color_fill</md-icon></label>
169
+ <label class="icon-only-label twothird-label"><md-icon>format_color_fill</md-icon></label>
170
170
  <ox-input-color
171
171
  id="color-editor"
172
172
  .value=${this.focused && this.focused.color}
173
173
  @change=${(e) => this._onChangeSubComponent(e)}
174
174
  ?disabled=${this.disabled}
175
- class="property-twothird-input"
175
+ class="twothird-editor"
176
176
  >
177
177
  </ox-input-color>
178
178
 
179
- <label class="icon-only-label property-twothird-label"><md-icon>arrows_outward</md-icon></label>
179
+ <label class="icon-only-label twothird-label"><md-icon>arrows_outward</md-icon></label>
180
180
  <input
181
181
  type="number"
182
182
  id="color-position"
@@ -184,7 +184,7 @@ let OxInputColorStops = class OxInputColorStops extends OxFormField {
184
184
  @change=${(e) => this._onChangeSubComponent(e)}
185
185
  step="0.01"
186
186
  ?disabled=${this.disabled}
187
- class="property-onethird-input"
187
+ class="onethird-editor"
188
188
  />
189
189
  </div>
190
190
  `;
package/dist/src/ox-input-color-stops.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-color-stops.js","sourceRoot":"","sources":["../../src/ox-input-color-stops.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 './ox-input-color.js'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport deepEquals from 'lodash-es/isEqual.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\n\nexport type ColorStop = {\n color: string\n position: number\n}\n\n/**\n * This component allows editing an array of color sets (position and color) within a range.\n *\n * The preview bar shows the color sets in gradient or solid form.\n *\n * To add a new color set, double-click the preview bar.\n * To remove a color set, drag the color set marker downward.\n * To move the position of a color set, drag the color set marker left or right, or select the color set marker with the mouse and directly edit the position in the position input editor.\n * To change the color of a color set, double-click the color set marker to pop up the color palette and select a color, or directly edit the color in the color input editor.\n *\n * Example:\n *\n * <ox-input-color-stops type=\"gradient\" .value=${gradient.colorStops}>\n * </ox-input-color-stops>\n */\n@customElement('ox-input-color-stops')\nexport class OxInputColorStops extends OxFormField {\n static styles = [\n PropertyGridStyles,\n css`\n :host {\n display: flex;\n }\n\n #color-stops {\n clear: both;\n margin-bottom: -3px;\n }\n\n #colorbar {\n width: 95%;\n height: 12px;\n margin: auto;\n margin-bottom: 25px;\n border: 1px solid #ccc;\n }\n\n #markers {\n position: relative;\n top: 30px;\n }\n\n #markers div {\n width: 10px;\n height: 10px;\n margin-top: -15px;\n position: absolute;\n border: 2px solid #fff;\n cursor: pointer;\n -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n }\n\n #markers div::before {\n border-bottom: 6px solid #fff;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n content: '';\n width: 0;\n height: 0;\n left: -2px;\n position: absolute;\n top: -8px;\n }\n\n #markers div[focused] {\n border-color: var(--things-editor-colorbar-marker-focused-color, #585858);\n }\n\n #markers div[focused]:before {\n border-bottom: 7px solid var(--things-editor-colorbar-marker-focused-color, #585858);\n }\n `\n ]\n\n /**\n * `type` indicates how the color-stop bar is displayed.\n * - 'solid': Fills with solid color from one color stop to the next.\n * - 'gradient': Fills with gradient color from one color stop to the next.\n */\n @property({ type: String }) type: 'solid' | 'gradient' = 'solid'\n /**\n * `min` indicates the minimum value of the color-stop bar's position range.\n */\n @property({ type: Number }) min: number = 0\n /**\n * `max` indicates the maximum value of the color-stop bar's position range.\n */\n @property({ type: Number }) max: number = 1\n /**\n * `value` maintains the array of color stops created by the color-stops.\n */\n @property({ type: Array }) value?: ColorStop[] = undefined\n /**\n * Represents the focused state of the input component.\n * This property can be of any type.\n */\n @property({ type: Object }) focused: any\n\n @query('#colorbar') colorbar!: HTMLElement\n @query('#color-editor') colorEditor!: OxInputColor\n\n private _dragImage?: HTMLImageElement\n\n connectedCallback() {\n super.connectedCallback()\n\n this._dragImage = new Image()\n this._dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='\n }\n\n firstUpdated() {\n window.addEventListener('resize', () => {\n this.requestUpdate()\n })\n }\n\n updated(changes: PropertyValues<this>) {\n var needRerenderColorBar = false\n\n if (changes.has('value') && this.value instanceof Array) {\n var oldValue = changes.get('value')\n if (\n this.focused &&\n (!oldValue ||\n this.value.findIndex(v => v.position == this.focused.position && v.color == this.focused.color) == -1)\n ) {\n /* Clear focused if there was no previous value.\n * Even if there was a previous value, focused can only be selected and modified within this editor, so if there is no value with the same position, it is considered that a new editor has started and focused is cleared.\n */\n this.focused = null\n }\n\n if (!deepEquals(oldValue, this.value)) {\n needRerenderColorBar = true\n }\n }\n\n if (needRerenderColorBar || changes.has('min') || changes.has('max')) {\n if (!this.value) {\n this.value = [\n { color: 'white', position: this.min },\n { color: 'white', position: this.max }\n ]\n }\n\n this._renderColorBar(this.min, this.max, this.type)\n this.requestUpdate()\n }\n }\n\n render() {\n return html`\n <div class=\"property-grid\">\n <div id=\"color-stops\" class=\"property-full-bleed\">\n <div id=\"colorbar\" @dblclick=${(e: MouseEvent) => this._onDblClickColorbar(e)}>\n <div\n id=\"markers\"\n @dblclick=${(e: MouseEvent) => this._onDblClickMarkers(e)}\n @pointerdown=${(e: PointerEvent) => this._onPointerDown(e)}\n @dragstart=${(e: DragEvent) => this._onDragStart(e)}\n @drag=${this._throttled(100, this._onDrag.bind(this))}\n @dragend=${(e: DragEvent) => this._onDragEnd(e)}\n >\n ${this._refinedValue(this.value).map(\n (item, index) => html`\n <div\n .style=\"background-color:${item.color};margin-left:${this._calculatePosition(\n item.position,\n this.min,\n this.max\n )}px;\"\n marker-index=${index}\n draggable=\"true\"\n ></div>\n `\n )}\n </div>\n </div>\n </div>\n\n <label class=\"icon-only-label property-twothird-label\"><md-icon>format_color_fill</md-icon></label>\n <ox-input-color\n id=\"color-editor\"\n .value=${this.focused && this.focused.color}\n @change=${(e: Event) => this._onChangeSubComponent(e)}\n ?disabled=${this.disabled}\n class=\"property-twothird-input\"\n >\n </ox-input-color>\n\n <label class=\"icon-only-label property-twothird-label\"><md-icon>arrows_outward</md-icon></label>\n <input\n type=\"number\"\n id=\"color-position\"\n .value=${this.focused && this.focused.position}\n @change=${(e: Event) => this._onChangeSubComponent(e)}\n step=\"0.01\"\n ?disabled=${this.disabled}\n class=\"property-onethird-input\"\n />\n </div>\n `\n }\n\n _refinedValue(value: any) {\n return value instanceof Array ? value : []\n }\n\n _setFocused(index: number) {\n if (this.focused && this.focused.index === index) {\n return\n }\n\n var marker = this.renderRoot.querySelector(`#markers div[marker-index='${index}']`) as HTMLElement\n var olds = this.renderRoot.querySelectorAll('#markers div[focused]')\n olds.length > 0 && olds.forEach(old => old.removeAttribute('focused'))\n marker && marker.setAttribute('focused', '')\n\n if (!marker) {\n this.focused = null\n return\n }\n\n var colorStop = this.value![index]\n\n this._changeFocused({\n index: index,\n color: colorStop.color,\n position: Math.max(this.min, Math.min(colorStop.position, this.max))\n })\n }\n\n _changeFocused(focused: any) {\n if (!focused) {\n this._setFocused(-1) // clear focused marker\n\n return\n }\n\n this.focused = focused\n\n this.value = this.value!.map((colorStop, index): ColorStop => {\n if (index != focused.index) {\n return colorStop\n }\n\n return {\n color: focused.color,\n position: focused.position\n }\n }).sort((a: ColorStop, b: ColorStop) => {\n return b.position < a.position ? 1 : -1\n })\n\n var colorStop = this.value[focused.index]\n\n if (focused.position != colorStop.position || focused.color != colorStop.color) {\n var index = -1\n for (var i = 0; i < this.value.length; i++) {\n colorStop = this.value[i]\n if (focused.position == colorStop.position && focused.color == colorStop.color) {\n index = i\n break\n }\n }\n\n this._setFocused(index)\n }\n }\n\n _renderColorBar(min: number, max: number, type: 'solid' | 'gradient') {\n var value = this._refinedValue(this.value)\n var gradient = ''\n\n if (value instanceof Array && value.length > 0) {\n if (this.type == 'gradient') {\n var stopsStrings = (value || []).map(function (stop) {\n var position = (stop.position - min) / (max - min)\n return `${stop.color} ${position * 100}%`\n })\n } else {\n var stops = value || []\n var last: ColorStop | undefined\n var last_position = 0\n var stopsStrings = stops.map(function (stop) {\n var stop_position = (stop.position - min) / (max - min)\n if (last) {\n last_position = (last.position - min) / (max - min)\n var step = `${stop.color} ${last_position * 100}%, ${stop.color} ${stop_position * 100}%`\n } else {\n var step = `${stop.color} ${stop_position * 100}%`\n }\n last = stop\n return step\n })\n if (last) {\n last_position = (last.position - min) / (max - min)\n stopsStrings.push(`${last.color} ${last_position * 100}%, white ${last_position * 100}%, white 100%`)\n }\n }\n\n gradient = stopsStrings.join(',')\n } else {\n gradient = 'black 0%, black 100%'\n }\n\n this.colorbar!.style.background = `linear-gradient(to right, ${gradient})`\n /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */\n }\n\n _onChangeSubComponent(e: Event) {\n var element = e.target as HTMLInputElement\n var id = element.id\n\n if (!this.focused) {\n return\n }\n\n switch (id) {\n case 'color-editor':\n this._changeFocused({\n ...this.focused,\n color: element.value\n })\n break\n case 'color-position':\n this._changeFocused({\n ...this.focused,\n position: Math.max(this.min, Math.min(Number(element.value), this.max))\n })\n break\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onDblClickColorbar(e: MouseEvent) {\n if (this.disabled) {\n return\n }\n\n /* Filter out cases where the marker is clicked. */\n if (e.target !== this.colorbar) return\n\n var width = this.colorbar.offsetWidth\n var position = this.min + (this.max - this.min) * (e.offsetX / width)\n var colorStops = this.value ? this.value.slice() : []\n\n for (var i = 0; i < colorStops.length; i++) {\n if (colorStops[i].position > position) break\n }\n\n colorStops.splice(i, 0, {\n position: position,\n color: '#fff'\n })\n\n this.value = colorStops\n\n this.focused = null\n this._setFocused(i)\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onDblClickMarkers(e: MouseEvent) {\n if (this.disabled) {\n return\n }\n\n this.colorEditor.showPicker()\n }\n\n _onPointerDown(e: PointerEvent) {\n if (this.disabled) {\n return\n }\n\n var marker = e.target as HTMLElement\n var index = marker.getAttribute('marker-index')\n\n this._setFocused(Number(index))\n }\n\n private dragstart: { position: number; x: number; y: number } = { position: 0, x: 0, y: 0 }\n\n _onDragStart(e: DragEvent) {\n if (this.disabled) {\n return\n }\n\n /* Prevent ghost image from appearing during drag */\n e.dataTransfer?.setDragImage(this._dragImage!, 0, 0)\n\n this.dragstart = {\n position: this.focused.position,\n x: e.clientX,\n y: e.clientY\n }\n }\n\n // TODO onDrag event keeps occurring, causing performance degradation. So throttling is applied.\n _throttled(delay: number, fn: (...args: any[]) => any) {\n let lastCall = 0\n return function (...args: any[]) {\n const now = new Date().getTime()\n if (now - lastCall < delay) {\n return\n }\n lastCall = now\n return fn(...args)\n }\n }\n\n _onDrag(e: DragEvent) {\n if (this.disabled) {\n return\n }\n\n if (e.clientX <= 0) {\n return\n }\n\n var width = this.colorbar.offsetWidth\n var position = this.dragstart.position + ((e.clientX - this.dragstart.x) / width) * (this.max - this.min)\n\n if (position != this.focused.position) {\n this._changeFocused({\n ...this.focused,\n position: Math.max(this.min, Math.min(position, this.max))\n })\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n _onDragEnd(e: DragEvent) {\n if (this.disabled) {\n return\n }\n\n if (e.clientY - this.dragstart.y > 40) {\n this.value!.splice(this.focused.index, 1)\n this.value = this.value!.slice()\n\n this._setFocused(-1)\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n _calculatePosition(position: number, min: number, max: number) {\n /* TODO 7 ==> Should be calculated as half the marker width. */\n var calculated = position\n\n if (calculated > this.max) calculated = this.max\n else if (calculated < this.min) calculated = this.min\n\n var width = (this.colorbar && this.colorbar.offsetWidth) || 0\n\n return ((calculated - this.min) / (this.max - this.min)) * width - 7\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n if (!this.name) return\n\n const value = this.value\n\n formData.append(\n this.name!,\n typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n )\n }\n}\n"]}
1
+ {"version":3,"file":"ox-input-color-stops.js","sourceRoot":"","sources":["../../src/ox-input-color-stops.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,UAAU,MAAM,sBAAsB,CAAA;AAE7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAQhD;;;;;;;;;;;;;;GAcG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QA4DL;;;;WAIG;QACyB,SAAI,GAAyB,OAAO,CAAA;QAChE;;WAEG;QACyB,QAAG,GAAW,CAAC,CAAA;QAC3C;;WAEG;QACyB,QAAG,GAAW,CAAC,CAAA;QAC3C;;WAEG;QACwB,UAAK,GAAiB,SAAS,CAAA;QAqSlD,cAAS,GAA+C,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;IAyF7F,CAAC;aA1cQ,WAAM,GAAG;QACd,kBAAkB;QAClB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsDF;KACF,AAzDY,CAyDZ;IA+BD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,UAAU,GAAG,IAAI,KAAK,EAAE,CAAA;QAC7B,IAAI,CAAC,UAAU,CAAC,GAAG,GAAG,oFAAoF,CAAA;IAC5G,CAAC;IAED,YAAY;QACV,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,oBAAoB,GAAG,KAAK,CAAA;QAEhC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,YAAY,KAAK,EAAE,CAAC;YACxD,IAAI,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;YACnC,IACE,IAAI,CAAC,OAAO;gBACZ,CAAC,CAAC,QAAQ;oBACR,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EACxG,CAAC;gBACD;;mBAEG;gBACH,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;YACrB,CAAC;YAED,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBACtC,oBAAoB,GAAG,IAAI,CAAA;YAC7B,CAAC;QACH,CAAC;QAED,IAAI,oBAAoB,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACrE,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAChB,IAAI,CAAC,KAAK,GAAG;oBACX,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,EAAE;oBACtC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,EAAE;iBACvC,CAAA;YACH,CAAC;YAED,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;YACnD,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;yCAG0B,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;;;0BAG7D,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;6BAC1C,CAAC,CAAe,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;2BAC7C,CAAC,CAAY,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;sBAC3C,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;yBAC1C,CAAC,CAAY,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;;gBAE7C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAClC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;+CAEU,IAAI,CAAC,KAAK,gBAAgB,IAAI,CAAC,kBAAkB,CAC1E,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,GAAG,EACR,IAAI,CAAC,GAAG,CACT;mCACc,KAAK;;;iBAGvB,CACF;;;;;;;;mBAQI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK;oBACjC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC;sBACzC,IAAI,CAAC,QAAQ;;;;;;;;;mBAShB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ;oBACpC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC;;sBAEzC,IAAI,CAAC,QAAQ;;;;KAI9B,CAAA;IACH,CAAC;IAED,aAAa,CAAC,KAAU;QACtB,OAAO,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAC5C,CAAC;IAED,WAAW,CAAC,KAAa;QACvB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YACjD,OAAM;QACR,CAAC;QAED,IAAI,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,8BAA8B,KAAK,IAAI,CAAgB,CAAA;QAClG,IAAI,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAA;QACpE,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAA;QACtE,MAAM,IAAI,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;QAE5C,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;YACnB,OAAM;QACR,CAAC;QAED,IAAI,SAAS,GAAG,IAAI,CAAC,KAAM,CAAC,KAAK,CAAC,CAAA;QAElC,IAAI,CAAC,cAAc,CAAC;YAClB,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,SAAS,CAAC,KAAK;YACtB,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;SACrE,CAAC,CAAA;IACJ,CAAC;IAED,cAAc,CAAC,OAAY;QACzB,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA,CAAC,uBAAuB;YAE5C,OAAM;QACR,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QAEtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAa,EAAE;YAC3D,IAAI,KAAK,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC;gBAC3B,OAAO,SAAS,CAAA;YAClB,CAAC;YAED,OAAO;gBACL,KAAK,EAAE,OAAO,CAAC,KAAK;gBACpB,QAAQ,EAAE,OAAO,CAAC,QAAQ;aAC3B,CAAA;QACH,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAY,EAAE,CAAY,EAAE,EAAE;YACrC,OAAO,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACzC,CAAC,CAAC,CAAA;QAEF,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QAEzC,IAAI,OAAO,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ,IAAI,OAAO,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;YAC/E,IAAI,KAAK,GAAG,CAAC,CAAC,CAAA;YACd,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC3C,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;gBACzB,IAAI,OAAO,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ,IAAI,OAAO,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;oBAC/E,KAAK,GAAG,CAAC,CAAA;oBACT,MAAK;gBACP,CAAC;YACH,CAAC;YAED,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;QACzB,CAAC;IACH,CAAC;IAED,eAAe,CAAC,GAAW,EAAE,GAAW,EAAE,IAA0B;QAClE,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC1C,IAAI,QAAQ,GAAG,EAAE,CAAA;QAEjB,IAAI,KAAK,YAAY,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC/C,IAAI,IAAI,CAAC,IAAI,IAAI,UAAU,EAAE,CAAC;gBAC5B,IAAI,YAAY,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,UAAU,IAAI;oBACjD,IAAI,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;oBAClD,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,QAAQ,GAAG,GAAG,GAAG,CAAA;gBAC3C,CAAC,CAAC,CAAA;YACJ,CAAC;iBAAM,CAAC;gBACN,IAAI,KAAK,GAAG,KAAK,IAAI,EAAE,CAAA;gBACvB,IAAI,IAA2B,CAAA;gBAC/B,IAAI,aAAa,GAAG,CAAC,CAAA;gBACrB,IAAI,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,UAAU,IAAI;oBACzC,IAAI,aAAa,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;oBACvD,IAAI,IAAI,EAAE,CAAC;wBACT,aAAa,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;wBACnD,IAAI,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,aAAa,GAAG,GAAG,MAAM,IAAI,CAAC,KAAK,IAAI,aAAa,GAAG,GAAG,GAAG,CAAA;oBAC3F,CAAC;yBAAM,CAAC;wBACN,IAAI,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,aAAa,GAAG,GAAG,GAAG,CAAA;oBACpD,CAAC;oBACD,IAAI,GAAG,IAAI,CAAA;oBACX,OAAO,IAAI,CAAA;gBACb,CAAC,CAAC,CAAA;gBACF,IAAI,IAAI,EAAE,CAAC;oBACT,aAAa,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;oBACnD,YAAY,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,aAAa,GAAG,GAAG,YAAY,aAAa,GAAG,GAAG,eAAe,CAAC,CAAA;gBACvG,CAAC;YACH,CAAC;YAED,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACnC,CAAC;aAAM,CAAC;YACN,QAAQ,GAAG,sBAAsB,CAAA;QACnC,CAAC;QAED,IAAI,CAAC,QAAS,CAAC,KAAK,CAAC,UAAU,GAAG,6BAA6B,QAAQ,GAAG,CAAA;QAC1E,sDAAsD;IACxD,CAAC;IAED,qBAAqB,CAAC,CAAQ;QAC5B,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,EAAE,GAAG,OAAO,CAAC,EAAE,CAAA;QAEnB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,QAAQ,EAAE,EAAE,CAAC;YACX,KAAK,cAAc;gBACjB,IAAI,CAAC,cAAc,CAAC;oBAClB,GAAG,IAAI,CAAC,OAAO;oBACf,KAAK,EAAE,OAAO,CAAC,KAAK;iBACrB,CAAC,CAAA;gBACF,MAAK;YACP,KAAK,gBAAgB;gBACnB,IAAI,CAAC,cAAc,CAAC;oBAClB,GAAG,IAAI,CAAC,OAAO;oBACf,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;iBACxE,CAAC,CAAA;gBACF,MAAK;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,mBAAmB,CAAC,CAAa;QAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,mDAAmD;QACnD,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,QAAQ;YAAE,OAAM;QAEtC,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAA;QACrC,IAAI,QAAQ,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC,CAAA;QACrE,IAAI,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;QAErD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3C,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,QAAQ;gBAAE,MAAK;QAC9C,CAAC;QAED,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE;YACtB,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,MAAM;SACd,CAAC,CAAA;QAEF,IAAI,CAAC,KAAK,GAAG,UAAU,CAAA;QAEvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACnB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;QAEnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,kBAAkB,CAAC,CAAa;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAA;IAC/B,CAAC;IAED,cAAc,CAAC,CAAe;QAC5B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,IAAI,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;QACpC,IAAI,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;QAE/C,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;IACjC,CAAC;IAID,YAAY,CAAC,CAAY;QACvB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,oDAAoD;QACpD,CAAC,CAAC,YAAY,EAAE,YAAY,CAAC,IAAI,CAAC,UAAW,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QAEpD,IAAI,CAAC,SAAS,GAAG;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ;YAC/B,CAAC,EAAE,CAAC,CAAC,OAAO;YACZ,CAAC,EAAE,CAAC,CAAC,OAAO;SACb,CAAA;IACH,CAAC;IAED,gGAAgG;IAChG,UAAU,CAAC,KAAa,EAAE,EAA2B;QACnD,IAAI,QAAQ,GAAG,CAAC,CAAA;QAChB,OAAO,UAAU,GAAG,IAAW;YAC7B,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAA;YAChC,IAAI,GAAG,GAAG,QAAQ,GAAG,KAAK,EAAE,CAAC;gBAC3B,OAAM;YACR,CAAC;YACD,QAAQ,GAAG,GAAG,CAAA;YACd,OAAO,EAAE,CAAC,GAAG,IAAI,CAAC,CAAA;QACpB,CAAC,CAAA;IACH,CAAC;IAED,OAAO,CAAC,CAAY;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC;YACnB,OAAM;QACR,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAA;QACrC,IAAI,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAA;QAEzG,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;YACtC,IAAI,CAAC,cAAc,CAAC;gBAClB,GAAG,IAAI,CAAC,OAAO;gBACf,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;aAC3D,CAAC,CAAA;YAEF,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;IACH,CAAC;IAED,UAAU,CAAC,CAAY;QACrB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC;YACtC,IAAI,CAAC,KAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;YACzC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC,KAAK,EAAE,CAAA;YAEhC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;YAEpB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;IACH,CAAC;IAED,kBAAkB,CAAC,QAAgB,EAAE,GAAW,EAAE,GAAW;QAC3D,+DAA+D;QAC/D,IAAI,UAAU,GAAG,QAAQ,CAAA;QAEzB,IAAI,UAAU,GAAG,IAAI,CAAC,GAAG;YAAE,UAAU,GAAG,IAAI,CAAC,GAAG,CAAA;aAC3C,IAAI,UAAU,GAAG,IAAI,CAAC,GAAG;YAAE,UAAU,GAAG,IAAI,CAAC,GAAG,CAAA;QAErD,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;QAE7D,OAAO,CAAC,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,CAAA;IACtE,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,QAAQ,CAAC,MAAM,CACb,IAAI,CAAC,IAAK,EACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CACvG,CAAA;IACH,CAAC;;AAzY2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAqC;AAIpC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AAIf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AAIhB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAAgC;AAK9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAa;AAEpB;IAAnB,KAAK,CAAC,WAAW,CAAC;mDAAuB;AAClB;IAAvB,KAAK,CAAC,eAAe,CAAC;sDAA2B;AArFvC,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CA2c7B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport './ox-input-color.js'\n\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport deepEquals from 'lodash-es/isEqual.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\n\nexport type ColorStop = {\n color: string\n position: number\n}\n\n/**\n * This component allows editing an array of color sets (position and color) within a range.\n *\n * The preview bar shows the color sets in gradient or solid form.\n *\n * To add a new color set, double-click the preview bar.\n * To remove a color set, drag the color set marker downward.\n * To move the position of a color set, drag the color set marker left or right, or select the color set marker with the mouse and directly edit the position in the position input editor.\n * To change the color of a color set, double-click the color set marker to pop up the color palette and select a color, or directly edit the color in the color input editor.\n *\n * Example:\n *\n * <ox-input-color-stops type=\"gradient\" .value=${gradient.colorStops}>\n * </ox-input-color-stops>\n */\n@customElement('ox-input-color-stops')\nexport class OxInputColorStops extends OxFormField {\n static styles = [\n PropertyGridStyles,\n css`\n :host {\n display: flex;\n }\n\n #color-stops {\n clear: both;\n margin-bottom: -3px;\n }\n\n #colorbar {\n width: 95%;\n height: 12px;\n margin: auto;\n margin-bottom: 25px;\n border: 1px solid #ccc;\n }\n\n #markers {\n position: relative;\n top: 30px;\n }\n\n #markers div {\n width: 10px;\n height: 10px;\n margin-top: -15px;\n position: absolute;\n border: 2px solid #fff;\n cursor: pointer;\n -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n }\n\n #markers div::before {\n border-bottom: 6px solid #fff;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n content: '';\n width: 0;\n height: 0;\n left: -2px;\n position: absolute;\n top: -8px;\n }\n\n #markers div[focused] {\n border-color: var(--things-editor-colorbar-marker-focused-color, #585858);\n }\n\n #markers div[focused]:before {\n border-bottom: 7px solid var(--things-editor-colorbar-marker-focused-color, #585858);\n }\n `\n ]\n\n /**\n * `type` indicates how the color-stop bar is displayed.\n * - 'solid': Fills with solid color from one color stop to the next.\n * - 'gradient': Fills with gradient color from one color stop to the next.\n */\n @property({ type: String }) type: 'solid' | 'gradient' = 'solid'\n /**\n * `min` indicates the minimum value of the color-stop bar's position range.\n */\n @property({ type: Number }) min: number = 0\n /**\n * `max` indicates the maximum value of the color-stop bar's position range.\n */\n @property({ type: Number }) max: number = 1\n /**\n * `value` maintains the array of color stops created by the color-stops.\n */\n @property({ type: Array }) value?: ColorStop[] = undefined\n /**\n * Represents the focused state of the input component.\n * This property can be of any type.\n */\n @property({ type: Object }) focused: any\n\n @query('#colorbar') colorbar!: HTMLElement\n @query('#color-editor') colorEditor!: OxInputColor\n\n private _dragImage?: HTMLImageElement\n\n connectedCallback() {\n super.connectedCallback()\n\n this._dragImage = new Image()\n this._dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='\n }\n\n firstUpdated() {\n window.addEventListener('resize', () => {\n this.requestUpdate()\n })\n }\n\n updated(changes: PropertyValues<this>) {\n var needRerenderColorBar = false\n\n if (changes.has('value') && this.value instanceof Array) {\n var oldValue = changes.get('value')\n if (\n this.focused &&\n (!oldValue ||\n this.value.findIndex(v => v.position == this.focused.position && v.color == this.focused.color) == -1)\n ) {\n /* Clear focused if there was no previous value.\n * Even if there was a previous value, focused can only be selected and modified within this editor, so if there is no value with the same position, it is considered that a new editor has started and focused is cleared.\n */\n this.focused = null\n }\n\n if (!deepEquals(oldValue, this.value)) {\n needRerenderColorBar = true\n }\n }\n\n if (needRerenderColorBar || changes.has('min') || changes.has('max')) {\n if (!this.value) {\n this.value = [\n { color: 'white', position: this.min },\n { color: 'white', position: this.max }\n ]\n }\n\n this._renderColorBar(this.min, this.max, this.type)\n this.requestUpdate()\n }\n }\n\n render() {\n return html`\n <div class=\"property-grid\">\n <div id=\"color-stops\" class=\"fullwidth\">\n <div id=\"colorbar\" @dblclick=${(e: MouseEvent) => this._onDblClickColorbar(e)}>\n <div\n id=\"markers\"\n @dblclick=${(e: MouseEvent) => this._onDblClickMarkers(e)}\n @pointerdown=${(e: PointerEvent) => this._onPointerDown(e)}\n @dragstart=${(e: DragEvent) => this._onDragStart(e)}\n @drag=${this._throttled(100, this._onDrag.bind(this))}\n @dragend=${(e: DragEvent) => this._onDragEnd(e)}\n >\n ${this._refinedValue(this.value).map(\n (item, index) => html`\n <div\n .style=\"background-color:${item.color};margin-left:${this._calculatePosition(\n item.position,\n this.min,\n this.max\n )}px;\"\n marker-index=${index}\n draggable=\"true\"\n ></div>\n `\n )}\n </div>\n </div>\n </div>\n\n <label class=\"icon-only-label twothird-label\"><md-icon>format_color_fill</md-icon></label>\n <ox-input-color\n id=\"color-editor\"\n .value=${this.focused && this.focused.color}\n @change=${(e: Event) => this._onChangeSubComponent(e)}\n ?disabled=${this.disabled}\n class=\"twothird-editor\"\n >\n </ox-input-color>\n\n <label class=\"icon-only-label twothird-label\"><md-icon>arrows_outward</md-icon></label>\n <input\n type=\"number\"\n id=\"color-position\"\n .value=${this.focused && this.focused.position}\n @change=${(e: Event) => this._onChangeSubComponent(e)}\n step=\"0.01\"\n ?disabled=${this.disabled}\n class=\"onethird-editor\"\n />\n </div>\n `\n }\n\n _refinedValue(value: any) {\n return value instanceof Array ? value : []\n }\n\n _setFocused(index: number) {\n if (this.focused && this.focused.index === index) {\n return\n }\n\n var marker = this.renderRoot.querySelector(`#markers div[marker-index='${index}']`) as HTMLElement\n var olds = this.renderRoot.querySelectorAll('#markers div[focused]')\n olds.length > 0 && olds.forEach(old => old.removeAttribute('focused'))\n marker && marker.setAttribute('focused', '')\n\n if (!marker) {\n this.focused = null\n return\n }\n\n var colorStop = this.value![index]\n\n this._changeFocused({\n index: index,\n color: colorStop.color,\n position: Math.max(this.min, Math.min(colorStop.position, this.max))\n })\n }\n\n _changeFocused(focused: any) {\n if (!focused) {\n this._setFocused(-1) // clear focused marker\n\n return\n }\n\n this.focused = focused\n\n this.value = this.value!.map((colorStop, index): ColorStop => {\n if (index != focused.index) {\n return colorStop\n }\n\n return {\n color: focused.color,\n position: focused.position\n }\n }).sort((a: ColorStop, b: ColorStop) => {\n return b.position < a.position ? 1 : -1\n })\n\n var colorStop = this.value[focused.index]\n\n if (focused.position != colorStop.position || focused.color != colorStop.color) {\n var index = -1\n for (var i = 0; i < this.value.length; i++) {\n colorStop = this.value[i]\n if (focused.position == colorStop.position && focused.color == colorStop.color) {\n index = i\n break\n }\n }\n\n this._setFocused(index)\n }\n }\n\n _renderColorBar(min: number, max: number, type: 'solid' | 'gradient') {\n var value = this._refinedValue(this.value)\n var gradient = ''\n\n if (value instanceof Array && value.length > 0) {\n if (this.type == 'gradient') {\n var stopsStrings = (value || []).map(function (stop) {\n var position = (stop.position - min) / (max - min)\n return `${stop.color} ${position * 100}%`\n })\n } else {\n var stops = value || []\n var last: ColorStop | undefined\n var last_position = 0\n var stopsStrings = stops.map(function (stop) {\n var stop_position = (stop.position - min) / (max - min)\n if (last) {\n last_position = (last.position - min) / (max - min)\n var step = `${stop.color} ${last_position * 100}%, ${stop.color} ${stop_position * 100}%`\n } else {\n var step = `${stop.color} ${stop_position * 100}%`\n }\n last = stop\n return step\n })\n if (last) {\n last_position = (last.position - min) / (max - min)\n stopsStrings.push(`${last.color} ${last_position * 100}%, white ${last_position * 100}%, white 100%`)\n }\n }\n\n gradient = stopsStrings.join(',')\n } else {\n gradient = 'black 0%, black 100%'\n }\n\n this.colorbar!.style.background = `linear-gradient(to right, ${gradient})`\n /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */\n }\n\n _onChangeSubComponent(e: Event) {\n var element = e.target as HTMLInputElement\n var id = element.id\n\n if (!this.focused) {\n return\n }\n\n switch (id) {\n case 'color-editor':\n this._changeFocused({\n ...this.focused,\n color: element.value\n })\n break\n case 'color-position':\n this._changeFocused({\n ...this.focused,\n position: Math.max(this.min, Math.min(Number(element.value), this.max))\n })\n break\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onDblClickColorbar(e: MouseEvent) {\n if (this.disabled) {\n return\n }\n\n /* Filter out cases where the marker is clicked. */\n if (e.target !== this.colorbar) return\n\n var width = this.colorbar.offsetWidth\n var position = this.min + (this.max - this.min) * (e.offsetX / width)\n var colorStops = this.value ? this.value.slice() : []\n\n for (var i = 0; i < colorStops.length; i++) {\n if (colorStops[i].position > position) break\n }\n\n colorStops.splice(i, 0, {\n position: position,\n color: '#fff'\n })\n\n this.value = colorStops\n\n this.focused = null\n this._setFocused(i)\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _onDblClickMarkers(e: MouseEvent) {\n if (this.disabled) {\n return\n }\n\n this.colorEditor.showPicker()\n }\n\n _onPointerDown(e: PointerEvent) {\n if (this.disabled) {\n return\n }\n\n var marker = e.target as HTMLElement\n var index = marker.getAttribute('marker-index')\n\n this._setFocused(Number(index))\n }\n\n private dragstart: { position: number; x: number; y: number } = { position: 0, x: 0, y: 0 }\n\n _onDragStart(e: DragEvent) {\n if (this.disabled) {\n return\n }\n\n /* Prevent ghost image from appearing during drag */\n e.dataTransfer?.setDragImage(this._dragImage!, 0, 0)\n\n this.dragstart = {\n position: this.focused.position,\n x: e.clientX,\n y: e.clientY\n }\n }\n\n // TODO onDrag event keeps occurring, causing performance degradation. So throttling is applied.\n _throttled(delay: number, fn: (...args: any[]) => any) {\n let lastCall = 0\n return function (...args: any[]) {\n const now = new Date().getTime()\n if (now - lastCall < delay) {\n return\n }\n lastCall = now\n return fn(...args)\n }\n }\n\n _onDrag(e: DragEvent) {\n if (this.disabled) {\n return\n }\n\n if (e.clientX <= 0) {\n return\n }\n\n var width = this.colorbar.offsetWidth\n var position = this.dragstart.position + ((e.clientX - this.dragstart.x) / width) * (this.max - this.min)\n\n if (position != this.focused.position) {\n this._changeFocused({\n ...this.focused,\n position: Math.max(this.min, Math.min(position, this.max))\n })\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n _onDragEnd(e: DragEvent) {\n if (this.disabled) {\n return\n }\n\n if (e.clientY - this.dragstart.y > 40) {\n this.value!.splice(this.focused.index, 1)\n this.value = this.value!.slice()\n\n this._setFocused(-1)\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n _calculatePosition(position: number, min: number, max: number) {\n /* TODO 7 ==> Should be calculated as half the marker width. */\n var calculated = position\n\n if (calculated > this.max) calculated = this.max\n else if (calculated < this.min) calculated = this.min\n\n var width = (this.colorbar && this.colorbar.offsetWidth) || 0\n\n return ((calculated - this.min) / (this.max - this.min)) * width - 7\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n if (!this.name) return\n\n const value = this.value\n\n formData.append(\n this.name!,\n typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n )\n }\n}\n"]}
package/dist/src/ox-input-color.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  /**
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
- import '@operato/color-picker/paper-color-picker.js';
4
+ import '@simonwep/pickr/dist/themes/classic.min.css';
5
+ import { PropertyValues } from 'lit';
5
6
  import { OxFormField } from './ox-form-field.js';
6
7
  /**
7
8
  색상을 입력하는데 사용되는 입력 컴포넌트이다.
@@ -165,10 +166,16 @@ export declare class OxInputColor extends OxFormField {
165
166
  static styles: import("lit").CSSResult;
166
167
  value?: string;
167
168
  properties: any;
169
+ defaultColor: string;
170
+ pickrElement: HTMLAnchorElement;
171
+ pickrButton?: HTMLButtonElement;
172
+ private pickr;
168
173
  render(): import("lit-html").TemplateResult<1>;
169
- set colorString(colorString: string);
170
- _thumbnail(): string;
171
- _onInputChanged(e: Event): void;
174
+ disconnectedCallback(): void;
175
+ connectedCallback(): void;
176
+ updated(changed: PropertyValues<this>): void;
177
+ private setColorString;
178
+ private onInputChanged;
172
179
  /**
173
180
  * 외부에서 호출 가능한 메쏘드임.
174
181
  */
package/dist/src/ox-input-color.js CHANGED
@@ -1,11 +1,12 @@
1
+ import { __decorate } from "tslib";
1
2
  /**
2
3
  * @license Copyright © HatioLab Inc. All rights reserved.
3
4
  */
4
- import { __decorate } from "tslib";
5
- import '@operato/color-picker/paper-color-picker.js';
5
+ import '@simonwep/pickr/dist/themes/classic.min.css'; // important!
6
6
  import { css, html } from 'lit';
7
- import { customElement, property } from 'lit/decorators.js';
7
+ import { customElement, property, query } from 'lit/decorators.js';
8
8
  import tinycolor from 'tinycolor2';
9
+ import Pickr from '@simonwep/pickr';
9
10
  import { OxFormField } from './ox-form-field.js';
10
11
  /**
11
12
  색상을 입력하는데 사용되는 입력 컴포넌트이다.
@@ -169,6 +170,8 @@ let OxInputColor = class OxInputColor extends OxFormField {
169
170
  constructor() {
170
171
  super(...arguments);
171
172
  this.value = undefined;
173
+ this.defaultColor = 'black';
174
+ this.pickr = null;
172
175
  }
173
176
  static { this.styles = css `
174
177
  :host {
@@ -186,6 +189,8 @@ let OxInputColor = class OxInputColor extends OxFormField {
186
189
  font: var(--input-font);
187
190
  color: var(--md-sys-color-on-primary-container);
188
191
  padding-right: 26px;
192
+ border-radius: inherit;
193
+ background-color: inherit;
189
194
  }
190
195
 
191
196
  input:focus {
@@ -193,7 +198,7 @@ let OxInputColor = class OxInputColor extends OxFormField {
193
198
  border-color: var(--md-sys-color-secondary-fixed-dim);
194
199
  }
195
200
 
196
- a {
201
+ div {
197
202
  -webkit-appearance: none;
198
203
  display: flex;
199
204
  position: absolute;
@@ -204,21 +209,40 @@ let OxInputColor = class OxInputColor extends OxFormField {
204
209
  justify-content: center;
205
210
  }
206
211
 
207
- span {
212
+ div > button {
213
+ position: relative;
208
214
  width: 60%;
209
215
  height: 60%;
210
216
  border: 0.5px solid rgba(0, 0, 0, 0.3);
211
- border-radius: var(--border-radius);
217
+ padding: 0;
218
+ color: white;
219
+ outline: none;
220
+ cursor: pointer;
221
+ }
222
+
223
+ div > button::before {
224
+ position: absolute;
225
+ top: 0;
226
+ left: 0;
227
+ width: 100%;
228
+ height: 100%;
229
+ background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
230
+ content: '';
231
+ background-size: 0.5em;
232
+ border-radius: 0.15em;
233
+ z-index: -1;
212
234
  }
213
235
 
214
- span.transparent {
215
- background-color: #fefefe;
216
- background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
217
- linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);
218
- background-position:
219
- 0 0,
220
- 9px 9px;
221
- background-size: 18px 18px;
236
+ div > button::after {
237
+ position: absolute;
238
+ content: '';
239
+ top: 0;
240
+ left: 0;
241
+ height: 100%;
242
+ width: 100%;
243
+ transition: background 0.3s;
244
+ background: var(--pcr-color);
245
+ border-radius: 0.15em;
222
246
  }
223
247
  `; }
224
248
  render() {
@@ -227,18 +251,80 @@ let OxInputColor = class OxInputColor extends OxFormField {
227
251
  id="text"
228
252
  type="text"
229
253
  .value=${this.value || ''}
230
- @change=${(e) => this._onInputChanged(e)}
254
+ @change=${(e) => this.onInputChanged(e)}
231
255
  .placeholder=${this.getAttribute('placeholder') || ''}
232
256
  ?disabled=${this.disabled}
233
257
  />
234
258
 
235
- <a @click=${(e) => this.showPicker()}>
236
- <span id="color-thumbnail" .style="background-color:${this._thumbnail()}" class=${this._thumbnail()}> </span>
237
- </a>
259
+ <div class="pickr"></div>
238
260
  `;
239
261
  }
240
- set colorString(colorString) {
241
- var color = tinycolor(colorString, {});
262
+ disconnectedCallback() {
263
+ super.disconnectedCallback();
264
+ this.pickr?.destroyAndRemove();
265
+ }
266
+ connectedCallback() {
267
+ super.connectedCallback();
268
+ setTimeout(() => {
269
+ var color = tinycolor(this.value || this.defaultColor, {});
270
+ const pickr = Pickr.create({
271
+ el: this.pickrElement,
272
+ theme: 'classic',
273
+ default: color.toRgbString(),
274
+ swatches: [
275
+ 'rgba(244, 67, 54, 1)',
276
+ 'rgba(233, 30, 99, 0.95)',
277
+ 'rgba(156, 39, 176, 0.9)',
278
+ 'rgba(103, 58, 183, 0.85)',
279
+ 'rgba(63, 81, 181, 0.8)',
280
+ 'rgba(33, 150, 243, 0.75)',
281
+ 'rgba(3, 169, 244, 0.7)',
282
+ 'rgba(0, 188, 212, 0.7)',
283
+ 'rgba(0, 150, 136, 0.75)',
284
+ 'rgba(76, 175, 80, 0.8)',
285
+ 'rgba(139, 195, 74, 0.85)',
286
+ 'rgba(205, 220, 57, 0.9)',
287
+ 'rgba(255, 235, 59, 0.95)',
288
+ 'rgba(255, 193, 7, 1)'
289
+ ],
290
+ components: {
291
+ preview: true,
292
+ opacity: true,
293
+ hue: true,
294
+ interaction: {
295
+ hex: true,
296
+ rgba: true,
297
+ hsla: true,
298
+ hsva: true,
299
+ cmyk: true,
300
+ input: true,
301
+ clear: true,
302
+ save: true
303
+ }
304
+ }
305
+ });
306
+ pickr.on('save', (color) => {
307
+ this.setColorString(color ? color.toRGBA().toString() : '');
308
+ pickr.hide();
309
+ });
310
+ this.pickr = pickr;
311
+ });
312
+ }
313
+ updated(changed) {
314
+ if (changed.has('value')) {
315
+ // var color = tinycolor(this.value || this.defaultColor)
316
+ // this.pickr?.setColor(color.toRgbString() || null, true)
317
+ this.pickr?.setColor(this.value || this.defaultColor, true);
318
+ this.pickrButton?.style.setProperty('--pcr-color', this.value || this.defaultColor);
319
+ }
320
+ }
321
+ setColorString(colorString) {
322
+ if (!colorString) {
323
+ this.value = '';
324
+ this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
325
+ return;
326
+ }
327
+ var color = tinycolor(colorString || this.defaultColor, {});
242
328
  var { withoutAlpha, valueType } = this.properties || {};
243
329
  if (color.isValid()) {
244
330
  if (valueType == 'hex' || withoutAlpha) {
@@ -249,10 +335,7 @@ let OxInputColor = class OxInputColor extends OxFormField {
249
335
  this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
250
336
  }
251
337
  }
252
- _thumbnail() {
253
- return tinycolor(this.value || 'transparent', {}).toRgbString();
254
- }
255
- _onInputChanged(e) {
338
+ onInputChanged(e) {
256
339
  e.stopPropagation();
257
340
  this.value = e.target.value;
258
341
  this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
@@ -264,43 +347,9 @@ let OxInputColor = class OxInputColor extends OxFormField {
264
347
  if (this.disabled) {
265
348
  return;
266
349
  }
267
- var { withoutAlpha } = this.properties || {};
268
- var color = tinycolor(this.value, {});
269
- var picker = document.createElement('paper-color-picker');
270
- picker.shape = 'huebox';
271
- picker.color = color;
272
- picker.colorAsString = color.toRgbString();
273
- if (!withoutAlpha) {
274
- picker.allowAlpha = true;
275
- picker.alwaysShowAlpha = true;
350
+ if (this.pickr) {
351
+ this.pickr.show();
276
352
  }
277
- picker.type = 'hsl';
278
- picker.style.setProperty('--paper-input-container-color', 'var(--md-sys-color-primary, gray)');
279
- picker.style.setProperty('--primary-text-color', 'var(--md-sys-color-primary, gray)');
280
- if (color.isValid()) {
281
- let rgb = color.toRgb();
282
- let alpha = color.getAlpha();
283
- picker._initialAlphaValueHack = alpha;
284
- picker.set('immediateColor.red', rgb.r);
285
- picker.set('immediateColor.green', rgb.g);
286
- picker.set('immediateColor.blue', rgb.b);
287
- if (alpha != undefined) {
288
- picker.set('immediateColor.alpha', alpha);
289
- }
290
- }
291
- document.body.appendChild(picker);
292
- var _ = (e) => {
293
- if (!e?.detail?.confirmed) {
294
- return;
295
- }
296
- if (picker.colorAsString) {
297
- this.colorString = picker.colorAsString;
298
- }
299
- picker.removeEventListener('iron-overlay-closed', _);
300
- picker.parentNode?.removeChild(picker);
301
- };
302
- picker.addEventListener('iron-overlay-closed', _);
303
- setTimeout(() => picker.open());
304
353
  }
305
354
  };
306
355
  __decorate([
@@ -309,6 +358,15 @@ __decorate([
309
358
  __decorate([
310
359
  property({ type: Object })
311
360
  ], OxInputColor.prototype, "properties", void 0);
361
+ __decorate([
362
+ property({ type: String, attribute: 'default-color' })
363
+ ], OxInputColor.prototype, "defaultColor", void 0);
364
+ __decorate([
365
+ query('.pickr')
366
+ ], OxInputColor.prototype, "pickrElement", void 0);
367
+ __decorate([
368
+ query('div > button')
369
+ ], OxInputColor.prototype, "pickrButton", void 0);
312
370
  OxInputColor = __decorate([
313
371
  customElement('ox-input-color')
314
372
  ], OxInputColor);
package/dist/src/ox-input-color.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-color.js","sourceRoot":"","sources":["../../src/ox-input-color.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/color-picker/paper-color-picker.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport tinycolor from 'tinycolor2'\n\nimport { OxFormField } from './ox-form-field.js'\n\n/**\n색상을 입력하는데 사용되는 입력 컴포넌트이다.\n화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,\n다른 하나는 마우스로 클릭하여 컬러 파레트를 팝업 시키는 입력 필드이다.\n컬러 파레트를 팝업시키는 입력필드는 현재 입력된 색상으로 표시된다.\n\n색상값을 직접 입력하는 필드에서는 'white', 'red', 'yellow' 등 색상의미 단어를 사용할 수도 있고,\n#fff, #123456 와 같이 스타일에서 지정하는 방식의 3자리 및 6자리 숫자 표현도 가능하다.\n컬러 파레트를 팝업시키는 입력 필드에서 색상을 지정하게되면, 모두 6자리 숫자 표현방식만을 사용한다.\n\n의미 단어를 지원하는 색상은 다음과 같다.\n\naliceblue : #f0f8ff<br>\nantiquewhite : #faebd7<br>\naqua : #00ffff<br>\naquamarine : #7fffd4<br>\nazure : #f0ffff<br>\nbeige : #f5f5dc<br>\nbisque : #ffe4c4<br>\nblack : #000000<br>\nblanchedalmond : #ffebcd<br>\nblue : #0000ff<br>\nblueviolet : #8a2be2<br>\nbrown : #a52a2a<br>\nburlywood : #deb887<br>\ncadetblue : #5f9ea0<br>\nchartreuse : #7fff00<br>\nchocolate : #d2691e<br>\ncoral : #ff7f50<br>\ncornflowerblue : #6495ed<br>\ncornsilk : #fff8dc<br>\ncrimson : #dc143c<br>\ncyan : #00ffff<br>\ndarkblue : #00008b<br>\ndarkcyan : #008b8b<br>\ndarkgoldenrod : #b8860b<br>\ndarkgray : #a9a9a9<br>\ndarkgreen : #006400<br>\ndarkkhaki : #bdb76b<br>\ndarkmagenta : #8b008b<br>\ndarkolivegreen : #556b2f<br>\ndarkorange : #ff8c00<br>\ndarkorchid : #9932cc<br>\ndarkred : #8b0000<br>\ndarksalmon : #e9967a<br>\ndarkseagreen : #8fbc8f<br>\ndarkslateblue : #483d8b<br>\ndarkslategray : #2f4f4f<br>\ndarkturquoise : #00ced1<br>\ndarkviolet : #9400d3<br>\ndeeppink : #ff1493<br>\ndeepskyblue : #00bfff<br>\ndimgray : #696969<br>\ndodgerblue : #1e90ff<br>\nfirebrick : #b22222<br>\nfloralwhite : #fffaf0<br>\nforestgreen : #228b22<br>\nfuchsia : #ff00ff<br>\ngainsboro : #dcdcdc<br>\nghostwhite : #f8f8ff<br>\ngold : #ffd700<br>\ngoldenrod : #daa520<br>\ngray : #808080<br>\ngreen : #008000<br>\ngreenyellow : #adff2f<br>\nhoneydew : #f0fff0<br>\nhotpink : #ff69b4<br>\nindianred : #cd5c5c<br>\nindigo : #4b0082<br>\nivory : #fffff0<br>\nkhaki : #f0e68c<br>\nlavender : #e6e6fa<br>\nlavenderblush : #fff0f5<br>\nlawngreen : #7cfc00<br>\nlemonchiffon : #fffacd<br>\nlightblue : #add8e6<br>\nlightcoral : #f08080<br>\nlightcyan : #e0ffff<br>\nlightgoldenrodyellow : #fafad2<br>\nlightgrey : #d3d3d3<br>\nlightgreen : #90ee90<br>\nlightpink : #ffb6c1<br>\nlightsalmon : #ffa07a<br>\nlightseagreen : #20b2aa<br>\nlightskyblue : #87cefa<br>\nlightslategray : #778899<br>\nlightsteelblue : #b0c4de<br>\nlightyellow : #ffffe0<br>\nlime : #00ff00<br>\nlimegreen : #32cd32<br>\nlinen : #faf0e6<br>\nmagenta : #ff00ff<br>\nmaroon : #800000<br>\nmediumaquamarine : #66cdaa<br>\nmediumblue : #0000cd<br>\nmediumorchid : #ba55d3<br>\nmediumpurple : #9370d8<br>\nmediumseagreen : #3cb371<br>\nmediumslateblue : #7b68ee<br>\nmediumspringgreen : #00fa9a<br>\nmediumturquoise : #48d1cc<br>\nmediumvioletred : #c71585<br>\nmidnightblue : #191970<br>\nmintcream : #f5fffa<br>\nmistyrose : #ffe4e1<br>\nmoccasin : #ffe4b5<br>\nnavajowhite : #ffdead<br>\nnavy : #000080<br>\noldlace : #fdf5e6<br>\nolive : #808000<br>\nolivedrab : #6b8e23<br>\norange : #ffa500<br>\norangered : #ff4500<br>\norchid : #da70d6<br>\npalegoldenrod : #eee8aa<br>\npalegreen : #98fb98<br>\npaleturquoise : #afeeee<br>\npalevioletred : #d87093<br>\npapayawhip : #ffefd5<br>\npeachpuff : #ffdab9<br>\nperu : #cd853f<br>\npink : #ffc0cb<br>\nplum : #dda0dd<br>\npowderblue : #b0e0e6<br>\npurple : #800080<br>\nred : #ff0000<br>\nrosybrown : #bc8f8f<br>\nroyalblue : #4169e1<br>\nsaddlebrown : #8b4513<br>\nsalmon : #fa8072<br>\nsandybrown : #f4a460<br>\nseagreen : #2e8b57<br>\nseashell : #fff5ee<br>\nsienna : #a0522d<br>\nsilver : #c0c0c0<br>\nskyblue : #87ceeb<br>\nslateblue : #6a5acd<br>\nslategray : #708090<br>\nsnow : #fffafa<br>\nspringgreen : #00ff7f<br>\nsteelblue : #4682b4<br>\ntan : #d2b48c<br>\nteal : #008080<br>\nthistle : #d8bfd8<br>\ntomato : #ff6347<br>\nturquoise : #40e0d0<br>\nviolet : #ee82ee<br>\nwheat : #f5deb3<br>\nwhite : #ffffff<br>\nwhitesmoke : #f5f5f5<br>\nyellow : #ffff00<br>\nyellowgreen : #9acd32<br>\n\nExample:\n\n <ox-input-color .value=${color}>\n </ox-input-color>\n*/\n\n@customElement('ox-input-color')\nexport class OxInputColor extends OxFormField {\n static styles = css`\n :host {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: flex-end;\n }\n\n input[type='text'] {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border: 0;\n font: var(--input-font);\n color: var(--md-sys-color-on-primary-container);\n padding-right: 26px;\n }\n\n input:focus {\n outline: var(--input-focus-outline, inherit);\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n\n a {\n -webkit-appearance: none;\n display: flex;\n position: absolute;\n width: 26px;\n height: 100%;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n }\n\n span {\n width: 60%;\n height: 60%;\n border: 0.5px solid rgba(0, 0, 0, 0.3);\n border-radius: var(--border-radius);\n }\n\n span.transparent {\n background-color: #fefefe;\n background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),\n linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);\n background-position:\n 0 0,\n 9px 9px;\n background-size: 18px 18px;\n }\n `\n\n @property({ type: String }) value?: string = undefined\n @property({ type: Object }) properties: any\n\n render() {\n return html`\n <input\n id=\"text\"\n type=\"text\"\n .value=${this.value || ''}\n @change=${(e: Event) => this._onInputChanged(e)}\n .placeholder=${this.getAttribute('placeholder') || ''}\n ?disabled=${this.disabled}\n />\n\n <a @click=${(e: MouseEvent) => this.showPicker()}>\n <span id=\"color-thumbnail\" .style=\"background-color:${this._thumbnail()}\" class=${this._thumbnail()}> </span>\n </a>\n `\n }\n\n set colorString(colorString: string) {\n var color = tinycolor(colorString, {})\n var { withoutAlpha, valueType } = this.properties || {}\n\n if (color.isValid()) {\n if (valueType == 'hex' || withoutAlpha) {\n this.value = color.toHexString()\n } else this.value = color.toRgbString()\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n _thumbnail() {\n return tinycolor(this.value || 'transparent', {}).toRgbString()\n }\n\n _onInputChanged(e: Event) {\n e.stopPropagation()\n this.value = (e.target as HTMLInputElement).value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n /**\n * 외부에서 호출 가능한 메쏘드임.\n */\n showPicker() {\n if (this.disabled) {\n return\n }\n\n var { withoutAlpha } = this.properties || {}\n\n var color = tinycolor(this.value, {})\n\n var picker = document.createElement('paper-color-picker') as HTMLElement & {\n shape: string\n color: any\n colorAsString: string\n allowAlpha: boolean\n alwaysShowAlpha: boolean\n type: string\n _initialAlphaValueHack: number\n set: (name: string, value: number) => void\n open: () => void\n }\n\n picker.shape = 'huebox'\n picker.color = color\n picker.colorAsString = color.toRgbString()\n if (!withoutAlpha) {\n picker.allowAlpha = true\n picker.alwaysShowAlpha = true\n }\n picker.type = 'hsl'\n picker.style.setProperty('--paper-input-container-color', 'var(--md-sys-color-primary, gray)')\n picker.style.setProperty('--primary-text-color', 'var(--md-sys-color-primary, gray)')\n\n if (color.isValid()) {\n let rgb = color.toRgb() as { r: number; g: number; b: number }\n let alpha = color.getAlpha()\n\n picker._initialAlphaValueHack = alpha\n\n picker.set('immediateColor.red', rgb.r)\n picker.set('immediateColor.green', rgb.g)\n picker.set('immediateColor.blue', rgb.b)\n\n if (alpha != undefined) {\n picker.set('immediateColor.alpha', alpha)\n }\n }\n\n document.body.appendChild(picker)\n\n var _ = (e: Event) => {\n if (!(e as CustomEvent)?.detail?.confirmed) {\n return\n }\n\n if (picker.colorAsString) {\n this.colorString = picker.colorAsString\n }\n\n picker.removeEventListener('iron-overlay-closed', _)\n picker.parentNode?.removeChild(picker)\n }\n picker.addEventListener('iron-overlay-closed', _)\n\n setTimeout(() => picker.open())\n }\n}\n"]}
1
+ {"version":3,"file":"ox-input-color.js","sourceRoot":"","sources":["../../src/ox-input-color.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\nimport '@simonwep/pickr/dist/themes/classic.min.css' // important!\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport tinycolor from 'tinycolor2'\nimport Pickr from '@simonwep/pickr'\n\nimport { OxFormField } from './ox-form-field.js'\n\n/**\n색상을 입력하는데 사용되는 입력 컴포넌트이다.\n화면상에는 두개의 입력 필드가 보이며, 하나는 색상값을 키보드로 직접 입력하는 입력 픽드이며,\n다른 하나는 마우스로 클릭하여 컬러 파레트를 팝업 시키는 입력 필드이다.\n컬러 파레트를 팝업시키는 입력필드는 현재 입력된 색상으로 표시된다.\n\n색상값을 직접 입력하는 필드에서는 'white', 'red', 'yellow' 등 색상의미 단어를 사용할 수도 있고,\n#fff, #123456 와 같이 스타일에서 지정하는 방식의 3자리 및 6자리 숫자 표현도 가능하다.\n컬러 파레트를 팝업시키는 입력 필드에서 색상을 지정하게되면, 모두 6자리 숫자 표현방식만을 사용한다.\n\n의미 단어를 지원하는 색상은 다음과 같다.\n\naliceblue : #f0f8ff<br>\nantiquewhite : #faebd7<br>\naqua : #00ffff<br>\naquamarine : #7fffd4<br>\nazure : #f0ffff<br>\nbeige : #f5f5dc<br>\nbisque : #ffe4c4<br>\nblack : #000000<br>\nblanchedalmond : #ffebcd<br>\nblue : #0000ff<br>\nblueviolet : #8a2be2<br>\nbrown : #a52a2a<br>\nburlywood : #deb887<br>\ncadetblue : #5f9ea0<br>\nchartreuse : #7fff00<br>\nchocolate : #d2691e<br>\ncoral : #ff7f50<br>\ncornflowerblue : #6495ed<br>\ncornsilk : #fff8dc<br>\ncrimson : #dc143c<br>\ncyan : #00ffff<br>\ndarkblue : #00008b<br>\ndarkcyan : #008b8b<br>\ndarkgoldenrod : #b8860b<br>\ndarkgray : #a9a9a9<br>\ndarkgreen : #006400<br>\ndarkkhaki : #bdb76b<br>\ndarkmagenta : #8b008b<br>\ndarkolivegreen : #556b2f<br>\ndarkorange : #ff8c00<br>\ndarkorchid : #9932cc<br>\ndarkred : #8b0000<br>\ndarksalmon : #e9967a<br>\ndarkseagreen : #8fbc8f<br>\ndarkslateblue : #483d8b<br>\ndarkslategray : #2f4f4f<br>\ndarkturquoise : #00ced1<br>\ndarkviolet : #9400d3<br>\ndeeppink : #ff1493<br>\ndeepskyblue : #00bfff<br>\ndimgray : #696969<br>\ndodgerblue : #1e90ff<br>\nfirebrick : #b22222<br>\nfloralwhite : #fffaf0<br>\nforestgreen : #228b22<br>\nfuchsia : #ff00ff<br>\ngainsboro : #dcdcdc<br>\nghostwhite : #f8f8ff<br>\ngold : #ffd700<br>\ngoldenrod : #daa520<br>\ngray : #808080<br>\ngreen : #008000<br>\ngreenyellow : #adff2f<br>\nhoneydew : #f0fff0<br>\nhotpink : #ff69b4<br>\nindianred : #cd5c5c<br>\nindigo : #4b0082<br>\nivory : #fffff0<br>\nkhaki : #f0e68c<br>\nlavender : #e6e6fa<br>\nlavenderblush : #fff0f5<br>\nlawngreen : #7cfc00<br>\nlemonchiffon : #fffacd<br>\nlightblue : #add8e6<br>\nlightcoral : #f08080<br>\nlightcyan : #e0ffff<br>\nlightgoldenrodyellow : #fafad2<br>\nlightgrey : #d3d3d3<br>\nlightgreen : #90ee90<br>\nlightpink : #ffb6c1<br>\nlightsalmon : #ffa07a<br>\nlightseagreen : #20b2aa<br>\nlightskyblue : #87cefa<br>\nlightslategray : #778899<br>\nlightsteelblue : #b0c4de<br>\nlightyellow : #ffffe0<br>\nlime : #00ff00<br>\nlimegreen : #32cd32<br>\nlinen : #faf0e6<br>\nmagenta : #ff00ff<br>\nmaroon : #800000<br>\nmediumaquamarine : #66cdaa<br>\nmediumblue : #0000cd<br>\nmediumorchid : #ba55d3<br>\nmediumpurple : #9370d8<br>\nmediumseagreen : #3cb371<br>\nmediumslateblue : #7b68ee<br>\nmediumspringgreen : #00fa9a<br>\nmediumturquoise : #48d1cc<br>\nmediumvioletred : #c71585<br>\nmidnightblue : #191970<br>\nmintcream : #f5fffa<br>\nmistyrose : #ffe4e1<br>\nmoccasin : #ffe4b5<br>\nnavajowhite : #ffdead<br>\nnavy : #000080<br>\noldlace : #fdf5e6<br>\nolive : #808000<br>\nolivedrab : #6b8e23<br>\norange : #ffa500<br>\norangered : #ff4500<br>\norchid : #da70d6<br>\npalegoldenrod : #eee8aa<br>\npalegreen : #98fb98<br>\npaleturquoise : #afeeee<br>\npalevioletred : #d87093<br>\npapayawhip : #ffefd5<br>\npeachpuff : #ffdab9<br>\nperu : #cd853f<br>\npink : #ffc0cb<br>\nplum : #dda0dd<br>\npowderblue : #b0e0e6<br>\npurple : #800080<br>\nred : #ff0000<br>\nrosybrown : #bc8f8f<br>\nroyalblue : #4169e1<br>\nsaddlebrown : #8b4513<br>\nsalmon : #fa8072<br>\nsandybrown : #f4a460<br>\nseagreen : #2e8b57<br>\nseashell : #fff5ee<br>\nsienna : #a0522d<br>\nsilver : #c0c0c0<br>\nskyblue : #87ceeb<br>\nslateblue : #6a5acd<br>\nslategray : #708090<br>\nsnow : #fffafa<br>\nspringgreen : #00ff7f<br>\nsteelblue : #4682b4<br>\ntan : #d2b48c<br>\nteal : #008080<br>\nthistle : #d8bfd8<br>\ntomato : #ff6347<br>\nturquoise : #40e0d0<br>\nviolet : #ee82ee<br>\nwheat : #f5deb3<br>\nwhite : #ffffff<br>\nwhitesmoke : #f5f5f5<br>\nyellow : #ffff00<br>\nyellowgreen : #9acd32<br>\n\nExample:\n\n <ox-input-color .value=${color}>\n </ox-input-color>\n*/\n\n@customElement('ox-input-color')\nexport class OxInputColor extends OxFormField {\n static styles = css`\n :host {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: flex-end;\n }\n\n input[type='text'] {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border: 0;\n font: var(--input-font);\n color: var(--md-sys-color-on-primary-container);\n padding-right: 26px;\n border-radius: inherit;\n background-color: inherit;\n }\n\n input:focus {\n outline: var(--input-focus-outline, inherit);\n border-color: var(--md-sys-color-secondary-fixed-dim);\n }\n\n div {\n -webkit-appearance: none;\n display: flex;\n position: absolute;\n width: 26px;\n height: 100%;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n }\n\n div > button {\n position: relative;\n width: 60%;\n height: 60%;\n border: 0.5px solid rgba(0, 0, 0, 0.3);\n padding: 0;\n color: white;\n outline: none;\n cursor: pointer;\n }\n\n div > button::before {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>');\n content: '';\n background-size: 0.5em;\n border-radius: 0.15em;\n z-index: -1;\n }\n\n div > button::after {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n transition: background 0.3s;\n background: var(--pcr-color);\n border-radius: 0.15em;\n }\n `\n\n @property({ type: String }) value?: string = undefined\n @property({ type: Object }) properties: any\n @property({ type: String, attribute: 'default-color' }) defaultColor: string = 'black'\n\n @query('.pickr') pickrElement!: HTMLAnchorElement\n @query('div > button') pickrButton?: HTMLButtonElement\n\n private pickr: Pickr | null = null\n\n render() {\n return html`\n <input\n id=\"text\"\n type=\"text\"\n .value=${this.value || ''}\n @change=${(e: Event) => this.onInputChanged(e)}\n .placeholder=${this.getAttribute('placeholder') || ''}\n ?disabled=${this.disabled}\n />\n\n <div class=\"pickr\"></div>\n `\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n this.pickr?.destroyAndRemove()\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n setTimeout(() => {\n var color = tinycolor(this.value || this.defaultColor, {})\n\n const pickr = Pickr.create({\n el: this.pickrElement,\n theme: 'classic',\n default: color.toRgbString(),\n swatches: [\n 'rgba(244, 67, 54, 1)',\n 'rgba(233, 30, 99, 0.95)',\n 'rgba(156, 39, 176, 0.9)',\n 'rgba(103, 58, 183, 0.85)',\n 'rgba(63, 81, 181, 0.8)',\n 'rgba(33, 150, 243, 0.75)',\n 'rgba(3, 169, 244, 0.7)',\n 'rgba(0, 188, 212, 0.7)',\n 'rgba(0, 150, 136, 0.75)',\n 'rgba(76, 175, 80, 0.8)',\n 'rgba(139, 195, 74, 0.85)',\n 'rgba(205, 220, 57, 0.9)',\n 'rgba(255, 235, 59, 0.95)',\n 'rgba(255, 193, 7, 1)'\n ],\n components: {\n preview: true,\n opacity: true,\n hue: true,\n\n interaction: {\n hex: true,\n rgba: true,\n hsla: true,\n hsva: true,\n cmyk: true,\n input: true,\n clear: true,\n save: true\n }\n }\n })\n\n pickr.on('save', (color: any) => {\n this.setColorString(color ? color.toRGBA().toString() : '')\n pickr.hide()\n })\n\n this.pickr = pickr\n })\n }\n\n updated(changed: PropertyValues<this>) {\n if (changed.has('value')) {\n // var color = tinycolor(this.value || this.defaultColor)\n\n // this.pickr?.setColor(color.toRgbString() || null, true)\n\n this.pickr?.setColor(this.value || this.defaultColor, true)\n this.pickrButton?.style.setProperty('--pcr-color', this.value || this.defaultColor)\n }\n }\n\n private setColorString(colorString: string) {\n if (!colorString) {\n this.value = ''\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n return\n }\n\n var color = tinycolor(colorString || this.defaultColor, {})\n var { withoutAlpha, valueType } = this.properties || {}\n\n if (color.isValid()) {\n if (valueType == 'hex' || withoutAlpha) {\n this.value = color.toHexString()\n } else this.value = color.toRgbString()\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n }\n\n private onInputChanged(e: Event) {\n e.stopPropagation()\n this.value = (e.target as HTMLInputElement).value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n /**\n * 외부에서 호출 가능한 메쏘드임.\n */\n showPicker() {\n if (this.disabled) {\n return\n }\n\n if (this.pickr) {\n this.pickr.show()\n }\n }\n}\n"]}